dylantarre/design-system-skills
29 skills297 installs1.1k starsGitHub
Install
npx skills add https://github.com/dylantarre/design-system-skillsSkills in this repo
1Getting StartedThis skill introduces the design system skills plugin and its available skills. A developer uses it when first installing the plugin or planning a design system implementation.18installs2Animation PrinciplesThis skill applies the 12 animation principles to UI motion design and micro-interactions. A developer uses it to design easing curves and transitions that feel natural and purposeful.12installs3Motion ScaleThis skill generates animation duration, easing curve, and delay tokens with reduced-motion support. A developer uses it to create transition timing and motion systems.12installs4Color ContrastThis skill validates WCAG 2.1 contrast ratios and generates accessible color pairings. A developer uses it to check accessibility compliance or fix contrast issues.11installs5Color ScaleThis skill generates perceptually uniform OKLCH color palettes from brand colors. A developer uses it to create color systems, theme palettes, or convert hex values to 11-step scales.11installs6Dark ModeThis skill implements theme switching with semantic tokens and prefers-color-scheme detection. A developer uses it to add dark mode or convert hardcoded colors to theme-aware tokens.11installs7Design Tokens StructureThis skill architects token systems across primitive, semantic, and component layers. A developer uses it when structuring tokens from scratch, adding multi-theme support, or organizing token hierarchies.11installs8Responsive TypographyThis skill implements fluid typography using CSS clamp() that scales with viewport. A developer uses it to create responsive font sizes and headings that adapt without breakpoints.11installs9Spacing ScaleThis skill generates consistent spacing tokens using base values and ratios. A developer uses it to create margin, padding, and gap systems for layouts.11installs10Aria PatternsThis skill supplies ARIA roles, states, and properties for interactive components. A developer uses it when building custom widgets or fixing screen reader accessibility issues.10installs11BreakpointsThis skill generates responsive breakpoint tokens for media queries and container queries. A developer uses it when setting up mobile-first layouts or viewport-based styling.10installs12Component DocsThis skill generates component API documentation with props tables, usage examples, and guidelines. A developer uses it when documenting a component library or building API references.10installs13Compound ComponentsThis skill builds accessible composable components using Radix and Headless UI patterns. A developer uses it to create Select, Dialog, Tabs, or Menu components with proper ARIA, keyboard navigation, and focus management.10installs14Focus StatesThis skill generates accessible focus indicators meeting WCAG 2.4.7 and 2.4.11 requirements. A developer uses it when styling :focus-visible or fixing focus ring visibility issues.10installs15Icon SystemThis skill implements scalable icon systems using SVG sprites or framework components. A developer uses it to set up icon libraries, sizing tokens, or accessible icon buttons.10installs16Layout PrimitivesThis skill builds composable layout primitives like Stack, Cluster, Grid, and Sidebar. A developer uses it to create layout systems and spacing compositions that adapt without breakpoints.10installs17Radius ScaleThis skill generates border-radius tokens ranging from sharp to pill shapes. A developer uses it to create corner rounding systems for buttons, cards, or inputs.10installs18Shadow ScaleThis skill generates layered box-shadow elevation tokens for depth hierarchy. A developer uses it to create elevation systems, card shadows, and modal depth.10installs19Style DictionaryThis skill transforms design tokens into platform-specific formats using Style Dictionary. A developer uses it to set up multi-platform token pipelines across web, iOS, and Android.10installs20Token DocsThis skill generates design token documentation with visual swatches and code examples. A developer uses it to document token values or build searchable token reference guides.10installs21Type ScaleThis skill generates typography scales using modular ratios with auto-calculated line heights. A developer uses it to set up font-size tokens and heading hierarchy.10installs22Z Index ScaleThis skill generates systematic z-index tokens for layering management. A developer uses it to organize stacking contexts and fix z-index conflicts across modals, dropdowns, and tooltips.10installs23FramerThis skill integrates design tokens with Framer for prototyping and production sites. A developer uses it to add CSS custom properties to Framer projects or build code components.9installs24ReactThis skill builds token-driven React components with TypeScript and modern patterns. A developer uses it when creating React component libraries or Next.js design system components with CSS custom properties.9installs25SvelteThis skill builds token-driven Svelte 5 components with runes and TypeScript. A developer uses it when creating Svelte component libraries or SvelteKit design system components.9installs26AngularThis skill builds token-driven Angular components with signals, standalone components, and new control flow syntax. A developer uses it when creating Angular component libraries or integrating design tokens.8installs27FigmaThis skill syncs design tokens between code and Figma via the Variables API or Tokens Studio plugin. A developer uses it to establish Figma-to-code workflows or export Figma tokens.8installs28StorybookThis skill documents components with Storybook using CSF 3.0, controls, and MDX. A developer uses it to create component catalogs, interactive examples, or visual testing setups.8installs29VueThis skill builds token-driven Vue 3 components with the Composition API and TypeScript. A developer uses it when creating Vue component libraries or Nuxt design system components with composables.8installs