design-system-skills

In the author's own words, from each skill's SKILL.md.

• getting-started

  Introduction to the design system skills plugin. Use when first installing the plugin, exploring available skills, or planning a design system implementation.

  skills/getting-started/SKILL.md on GitHub (opens in a new tab)

• aria-patterns

  Provides ARIA roles, states, and properties for interactive components. Use when building custom widgets, fixing screen reader issues, or implementing modals, tabs, accordions, menus, or dialogs accessibly.

  skills/accessibility/aria-patterns/SKILL.md on GitHub (opens in a new tab)

• color-contrast

  Validates WCAG 2.1 contrast ratios and generates accessible color pairings. Use when checking accessibility compliance, fixing contrast issues, or selecting text/background combinations for AA or AAA levels.

  skills/accessibility/color-contrast/SKILL.md on GitHub (opens in a new tab)

• focus-states

  Generates accessible focus indicators meeting WCAG 2.4.7 and 2.4.11 requirements. Use when styling :focus-visible, keyboard navigation indicators, or fixing focus ring visibility issues.

  skills/accessibility/focus-states/SKILL.md on GitHub (opens in a new tab)

• component-docs

  Generates component API documentation with props tables, usage examples, and guidelines. Use when documenting component libraries, creating API references, or building component documentation for designers and developers.

  skills/documentation/component-docs/SKILL.md on GitHub (opens in a new tab)

• token-docs

  Generates design token documentation with visual swatches and code examples. Use when documenting token values, creating token reference guides, or building searchable design system documentation.

  skills/documentation/token-docs/SKILL.md on GitHub (opens in a new tab)

• angular

  Builds token-driven Angular components with signals and standalone components. Use when creating Angular component libraries, integrating design tokens, or building design system components with new control flow syntax.

  skills/frameworks/angular/SKILL.md on GitHub (opens in a new tab)

• react

  Builds token-driven React components with TypeScript and modern patterns. Use when creating React component libraries, integrating CSS custom properties, or building Next.js design system components with forwardRef and composition.

  skills/frameworks/react/SKILL.md on GitHub (opens in a new tab)

• svelte

  Builds token-driven Svelte 5 components with runes ($state, $props) and TypeScript. Use when creating Svelte component libraries, integrating design tokens, or building SvelteKit design system components.

  skills/frameworks/svelte/SKILL.md on GitHub (opens in a new tab)

• vue

  Builds token-driven Vue 3 components with Composition API and TypeScript. Use when creating Vue component libraries, integrating design tokens, or building Nuxt design system components with composables.

  skills/frameworks/vue/SKILL.md on GitHub (opens in a new tab)

• animation-principles

  Applies Disney's 12 animation principles to UI motion design. Use when improving animation quality, designing micro-interactions, creating easing curves, or making transitions feel natural and purposeful.

  skills/patterns/animation-principles/SKILL.md on GitHub (opens in a new tab)

• compound-components

  Builds accessible composable components using Radix/Headless UI patterns. Use when creating Select, Dialog, Tabs, Accordion, Menu, or Dropdown components with proper ARIA, keyboard navigation, and focus management.

  skills/patterns/compound-components/SKILL.md on GitHub (opens in a new tab)

• dark-mode

  Implements theme switching with semantic tokens and prefers-color-scheme detection. Use when adding dark mode, light/dark themes, color scheme toggles, or converting hardcoded colors to theme-aware tokens.

  skills/patterns/dark-mode/SKILL.md on GitHub (opens in a new tab)

• icon-system

  Implements scalable icon systems with SVG sprites or React/Vue components. Use when setting up icon libraries, creating icon sizing tokens, optimizing SVGs, or building accessible icon buttons.

  skills/patterns/icon-system/SKILL.md on GitHub (opens in a new tab)

• layout-primitives

  Builds composable layout components (Stack, Cluster, Grid, Sidebar, Center, Cover). Use when creating layout systems, spacing compositions, or Every Layout-style intrinsic design patterns that adapt without breakpoints.

  skills/patterns/layout-primitives/SKILL.md on GitHub (opens in a new tab)

• breakpoints

  Generates responsive breakpoint tokens for media queries and container queries. Use when setting up responsive design, mobile-first layouts, or viewport-based styling. Outputs CSS, Tailwind, or JSON.

  skills/tokens/breakpoints/SKILL.md on GitHub (opens in a new tab)

• color-scale

  Generates perceptually uniform OKLCH color palettes from brand colors. Use when creating color systems, theme palettes, or converting hex values to 11-step scales. Outputs CSS custom properties, Tailwind config, or JSON tokens.

  skills/tokens/color-scale/SKILL.md on GitHub (opens in a new tab)

• design-tokens-structure

  Architects token systems with primitive, semantic, and component layers. Use when structuring tokens from scratch, adding multi-theme support, setting up token aliasing, or organizing token hierarchies.

  skills/tokens/design-tokens-structure/SKILL.md on GitHub (opens in a new tab)

• motion-scale

  Generates animation duration, easing curves, and delay tokens with prefers-reduced-motion support. Use when creating transition timing, animation speed, or motion systems. Outputs CSS, Tailwind, or JSON.

  skills/tokens/motion-scale/SKILL.md on GitHub (opens in a new tab)

• radius-scale

  Generates border-radius tokens from sharp to pill shapes. Use when creating corner rounding systems, button radius, card corners, or input styling. Outputs CSS, Tailwind, or JSON.

  skills/tokens/radius-scale/SKILL.md on GitHub (opens in a new tab)

• responsive-typography

  Implements fluid typography using CSS clamp() that scales with viewport. Use when creating responsive font sizes, viewport-aware headings, or type that adapts smoothly without breakpoints.

  skills/tokens/responsive-typography/SKILL.md on GitHub (opens in a new tab)

• shadow-scale

  Generates layered box-shadow elevation tokens for depth hierarchy. Use when creating elevation systems, card shadows, modal depth, or dark mode shadow variants. Outputs CSS, Tailwind, or JSON.

  skills/tokens/shadow-scale/SKILL.md on GitHub (opens in a new tab)

• spacing-scale

  Generates consistent spacing tokens using base values and ratios. Use when creating margin/padding systems, gap tokens, or layout spacing. Outputs CSS custom properties, Tailwind config, or JSON tokens.

  skills/tokens/spacing-scale/SKILL.md on GitHub (opens in a new tab)

• type-scale

  Generates typography scales using modular ratios with auto-calculated line heights. Use when setting up font-size tokens, heading hierarchy (h1-h6), or text sizing systems. Outputs CSS, Tailwind, or JSON.

  skills/tokens/type-scale/SKILL.md on GitHub (opens in a new tab)

• z-index-scale

  Generates systematic z-index tokens for layering management. Use when organizing stacking contexts, modal/dropdown z-index, tooltip layers, or fixing z-index conflicts. Outputs CSS, Tailwind, or JSON.

  skills/tokens/z-index-scale/SKILL.md on GitHub (opens in a new tab)

• figma

  Syncs design tokens between code and Figma using Variables API or Tokens Studio plugin. Use when establishing Figma-to-code workflows, exporting Figma tokens, or setting up design-development handoff.

  skills/tools/figma/SKILL.md on GitHub (opens in a new tab)

• framer

  Integrates design tokens with Framer for prototyping and production sites. Use when adding CSS custom properties to Framer projects, creating code components, or building Framer sites with design systems.

  skills/tools/framer/SKILL.md on GitHub (opens in a new tab)

• storybook

  Documents components with Storybook using CSF 3.0, controls, and MDX. Use when creating component catalogs, interactive examples, visual testing setups, or design system documentation sites.

  skills/tools/storybook/SKILL.md on GitHub (opens in a new tab)

• style-dictionary

  Transforms design tokens into platform-specific formats (CSS, SCSS, iOS Swift, Android XML). Use when setting up multi-platform token pipelines, creating build processes, or managing cross-platform design systems.

  skills/tools/style-dictionary/SKILL.md on GitHub (opens in a new tab)

No skill matches that filter.

Similar skills

• superpowersby obra An agentic skills framework & software development methodology that works. 300k stars · 15 skills
• skillsby mattpocock Skills for Real Engineers. Straight from my .agents directory. 293k stars · 30 skills
• ECCby affaan-m The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Cod… 280k stars · 30 skills
• reaby morluto Reverse engineer anything with agents, from app behavior down to native binaries. 270k stars · 1 skill
• andrej-karpathy-skillsby multica-ai A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls. 220k stars · 1 skill
• skillsby anthropics Public repository for Agent Skills 181k stars · 19 skills