dylantarre/design-system-skills
29 skills · 297 total installs
$npx skills add dylantarre/design-system-skillsSkillInstalls
getting-startedIntroduction to the design system skills plugin. Use when first installing the plugin, exploring available skills, or planning a design system implementation.animation-principlesApplies Disney's 12 animation principles to UI motion design. Use when improving animation quality, designing micro-interactions, creating easing curves, or…motion-scaleGenerates animation duration, easing curves, and delay tokens with prefers-reduced-motion support.color-contrastValidates WCAG 2.1 contrast ratios and generates accessible color pairings.color-scaleGenerates perceptually uniform OKLCH color palettes from brand colors.dark-modeImplements theme switching with semantic tokens and prefers-color-scheme detection.design-tokens-structureArchitects token systems with primitive, semantic, and component layers.responsive-typographyImplements fluid typography using CSS clamp() that scales with viewport.spacing-scaleGenerates consistent spacing tokens using base values and ratios. Use when creating margin/padding systems, gap tokens, or layout spacing.aria-patternsProvides ARIA roles, states, and properties for interactive components.breakpointsGenerates responsive breakpoint tokens for media queries and container queries.component-docsGenerates component API documentation with props tables, usage examples, and guidelines.compound-componentsBuilds accessible composable components using Radix/Headless UI patterns.focus-statesGenerates accessible focus indicators meeting WCAG 2.4.7 and 2.4.11 requirements.icon-systemImplements scalable icon systems with SVG sprites or React/Vue components.layout-primitivesBuilds composable layout components (Stack, Cluster, Grid, Sidebar, Center, Cover).radius-scaleGenerates border-radius tokens from sharp to pill shapes. Use when creating corner rounding systems, button radius, card corners, or input styling.shadow-scaleGenerates layered box-shadow elevation tokens for depth hierarchy.style-dictionaryTransforms design tokens into platform-specific formats (CSS, SCSS, iOS Swift, Android XML).token-docsGenerates design token documentation with visual swatches and code examples.type-scaleGenerates typography scales using modular ratios with auto-calculated line heights.z-index-scaleGenerates systematic z-index tokens for layering management. Use when organizing stacking contexts, modal/dropdown z-index, tooltip layers, or fixing z-index…framerIntegrates design tokens with Framer for prototyping and production sites.reactBuilds token-driven React components with TypeScript and modern patterns.svelteBuilds token-driven Svelte 5 components with runes ($state, $props) and TypeScript.angularBuilds token-driven Angular components with signals and standalone components.figmaSyncs design tokens between code and Figma using Variables API or Tokens Studio plugin.storybookDocuments components with Storybook using CSF 3.0, controls, and MDX.vueBuilds token-driven Vue 3 components with Composition API and TypeScript.