dylantarre/design-system-skills

1

style-dictionary Transforms design tokens into platform-specific formats (CSS, SCSS, iOS Swift, Android XML). Use when setting up mult…

dylantarre/design-system-skills

31

2

getting-started Introduction to the design system skills plugin. Use when first installing the plugin, exploring available skills, or…

dylantarre/design-system-skills

25

3

animation-principles Applies Disney's 12 animation principles to UI motion design. Use when improving animation quality, designing micro-i…

dylantarre/design-system-skills

20

4

motion-scale Generates animation duration, easing curves, and delay tokens with prefers-reduced-motion support. Use when creating …

dylantarre/design-system-skills

20

5

color-scale Generates perceptually uniform OKLCH color palettes from brand colors. Use when creating color systems, theme palette…

dylantarre/design-system-skills

19

6

icon-system Implements scalable icon systems with SVG sprites or React/Vue components. Use when setting up icon libraries, creati…

dylantarre/design-system-skills

19

7

layout-primitives Builds composable layout components (Stack, Cluster, Grid, Sidebar, Center, Cover). Use when creating layout systems,…

dylantarre/design-system-skills

19

8

radius-scale Generates border-radius tokens from sharp to pill shapes. Use when creating corner rounding systems, button radius, c…

dylantarre/design-system-skills

19

9

responsive-typography Implements fluid typography using CSS clamp() that scales with viewport. Use when creating responsive font sizes, vie…

dylantarre/design-system-skills

19

10

z-index-scale Generates systematic z-index tokens for layering management. Use when organizing stacking contexts, modal/dropdown z-…

dylantarre/design-system-skills

19

11

aria-patterns Provides ARIA roles, states, and properties for interactive components. Use when building custom widgets, fixing scre…

dylantarre/design-system-skills

18

12

color-contrast Validates WCAG 2.1 contrast ratios and generates accessible color pairings. Use when checking accessibility complianc…

dylantarre/design-system-skills

18

13

component-docs Generates component API documentation with props tables, usage examples, and guidelines. Use when documenting compone…

dylantarre/design-system-skills

18

14

dark-mode Implements theme switching with semantic tokens and prefers-color-scheme detection. Use when adding dark mode, light/…

dylantarre/design-system-skills

18

15

design-tokens-structure Architects token systems with primitive, semantic, and component layers. Use when structuring tokens from scratch, ad…

dylantarre/design-system-skills

18

16

spacing-scale Generates consistent spacing tokens using base values and ratios. Use when creating margin/padding systems, gap token…

dylantarre/design-system-skills

18

17

token-docs Generates design token documentation with visual swatches and code examples. Use when documenting token values, creat…

dylantarre/design-system-skills

18

18

breakpoints Generates responsive breakpoint tokens for media queries and container queries. Use when setting up responsive design…

dylantarre/design-system-skills

17

19

compound-components Builds accessible composable components using Radix/Headless UI patterns. Use when creating Select, Dialog, Tabs, Acc…

dylantarre/design-system-skills

17

20

focus-states Generates accessible focus indicators meeting WCAG 2.4.7 and 2.4.11 requirements. Use when styling :focus-visible, ke…

dylantarre/design-system-skills

17

21

shadow-scale Generates layered box-shadow elevation tokens for depth hierarchy. Use when creating elevation systems, card shadows,…

dylantarre/design-system-skills

17

22

type-scale Generates typography scales using modular ratios with auto-calculated line heights. Use when setting up font-size tok…

dylantarre/design-system-skills

17

23

framer Integrates design tokens with Framer for prototyping and production sites. Use when adding CSS custom properties to F…

dylantarre/design-system-skills

16

24

react Builds token-driven React components with TypeScript and modern patterns. Use when creating React component libraries…

dylantarre/design-system-skills

16

25

svelte Builds token-driven Svelte 5 components with runes ($state, $props) and TypeScript. Use when creating Svelte componen…

dylantarre/design-system-skills

16

26

storybook Documents components with Storybook using CSF 3.0, controls, and MDX. Use when creating component catalogs, interacti…

dylantarre/design-system-skills

15

27

angular Builds token-driven Angular components with signals and standalone components. Use when creating Angular component li…

dylantarre/design-system-skills

14

28

figma Syncs design tokens between code and Figma using Variables API or Tokens Studio plugin. Use when establishing Figma-t…

dylantarre/design-system-skills

14

29

vue Builds token-driven Vue 3 components with Composition API and TypeScript. Use when creating Vue component libraries, …

dylantarre/design-system-skills

14