This skill documents how to define and structure quarks — the smallest design tokens (colors, spacing, typography, shadows, breakpoints, z-index) that atoms and components consume. It provides examples, TypeScript token files, CSS variable generation, and integration notes for Tailwind and CSS-in-JS.
Use this skill when building or refactoring a design system, migrating hard-coded styles into tokens, or introducing runtime theming and CSS custom properties. Appropriate for frontend engineers, design systems teams, and component library maintainers.
{ }
Pure documentation skill providing guidance on creating design tokens (quarks) for atomic design systems. No scripts to execute. Well-structured with comprehensive code examples for color, spacing, typography, border, shadow, animation, and breakpoint tokens. Includes CSS custom property generation, theming patterns, and clear best practices vs anti-patterns.
No security concerns whatsoever — purely advisory content with TypeScript/CSS code examples. Well-written reference material for design system token organization.
GraphQL Inspector — Validate
Validate GraphQL operations against a schema with configurable depth, complexity, alias and directive limits to catch errors before runtime.
Pytest Plugins Guide
Guidance on the pytest plugin ecosystem: plugin development, pytest-cov, pytest-mock, configuration, CI integration, and advanced patterns.
Gleam — Erlang Interop
Guides Gleam developers to call Erlang libraries, declare external functions, handle Erlang types, and integrate with OTP, NIFs, and ports.
Professional Honesty
Guidelines for agents to prioritise technical accuracy and direct, evidence-based communication instead of excessive agreeableness.
React Native Components
Practical guidance and patterns for building React Native UI components: core components, composition, performance best practices, and common patterns.
Gluestack UI — Accessibility
Guidance and best practices for building accessible interfaces with gluestack-ui (WCAG 2.1 AA, ARIA, screen readers, keyboard navigation).
Tailwind Configuration
Guides configuring tailwind.config (content paths, theme extension, plugins, dark mode and production optimizations) for projects using Tailwind CSS.
Ink Hooks & State Management
Guidance and examples for using React-style hooks (useState, useEffect, useInput, useApp, useStdout, useFocus) to manage state and side effects in Ink terminal
Docker Compose Networking
Practical guidance for designing Docker Compose network topologies—service discovery, bridge and internal networks, aliases, static IPs, and troubleshooting for
Kustomize Generators
Generate Kubernetes ConfigMaps and Secrets with Kustomize from literals, files, and envs to manage environment-specific configuration and trigger safe rollouts.