design-system-skills

Use when implementing interactive components, custom widgets, or ensuring screen reader compatibility. Provides ARIA patterns for common UI elements.

Use when checking WCAG contrast ratios, validating color combinations, or generating accessible color pairings. Supports AA and AAA compliance.

Use when creating keyboard focus indicators, focus-visible styles, or ensuring interactive elements are accessible to keyboard users.

Use when generating component API documentation, creating usage guides, or documenting design system components with props, examples, and guidelines.

Use when generating design token documentation, creating token reference guides, or documenting a design system's foundational values.

Use when building Angular components with design tokens, creating component libraries with signals, or implementing design system patterns in Angular projects.

Use when building React components with design tokens, creating component libraries, or implementing design system patterns in React/Next.js projects.

Use when building Svelte 5 components with design tokens, creating component libraries with runes, or implementing design system patterns in Svelte/SvelteKit projects.

Use when building Vue 3 components with design tokens, creating component libraries with Composition API, or implementing design system patterns in Vue/Nuxt projects.

Use when creating responsive breakpoints, media query tokens, or mobile-first layout systems. Supports container queries.

Use when generating color palettes, creating design tokens, or building theme systems with brand colors. Supports CSS, Tailwind, and JSON output.

Use when creating border radius tokens, rounding scales, or consistent corner systems. Supports contextual sizing.

Use when creating elevation systems, depth tokens, or box-shadow scales. Supports layered shadows for realistic depth.

Use when creating spacing tokens, layout systems, or consistent padding/margin scales. Supports t-shirt sizes or numeric naming.

Use when creating typography scales, font size tokens, or establishing a typographic hierarchy. Includes auto-calculated line heights.

Use when syncing design tokens with Figma, setting up Figma Variables, or establishing a Figma-to-code workflow. Covers plugin integration and token formats.

Use when integrating design tokens with Framer, creating Framer overrides, or building interactive prototypes with design system tokens.

Use when documenting components with Storybook, creating interactive examples, or building a component library catalog. Covers stories, controls, and addons.