dylantarreCommunity·29 Agent Skills Included

design-system-skills

Design tokens, component patterns, and accessibility guidance

Generates design tokens for colors, spacing, typography, shadows, and motion in CSS, Tailwind, or JSON formats. Builds accessible React, Vue, Svelte, and Angular components with dark mode, ARIA patterns, and WCAG contrast checks. Syncs tokens with Figma, Storybook, Framer, and Style Dictionary to eliminate manual design-to-code handoff.

38|3

↗

npx skills add dylantarre/design-system-skills --all -g -y

Available:

Explains the skill file format, token conventions, and directory structure so the agent can correctly apply and extend the design system skills in this repository.

All Skills in This Repository (29)

Pure Emerald Level Indicators

📦 In Repo

dylantarre

getting-started

Onboard users to explore available skills and plan a design system implementation.

component-docs

Generate Markdown component API docs from TypeScript interfaces.

token-docs

Generate structured Markdown documentation from CSS, JSON, or JS design tokens.

storybook

Generate Storybook CSF 3.0 stories and MDX documentation for UI components.

framer

Export design tokens as CSS variables for Framer prototypes.

figma

Synchronize design tokens between codebases and Figma bidirectionally via API workflows involving Tokens Studio or Variables.

style-dictionary

Transform design tokens into CSS, SCSS, Swift, and Android XML outputs.

dark-mode

Implement dark mode with semantic color tokens, CSS variables, and system preference detection.

compound-components

Build accessible React UI primitives with compound component patterns.

layout-primitives

Create reusable layout primitives with CSS flexbox, grid, and React components.

icon-system

Standardize icon delivery with SVG sprites and inline components.

animation-principles

Map Disney's 12 animation principles to UI motion guidelines.

Community

Basic

Frequently Asked Questions

FAQPage Schema

How to install Design System Skills?▼

Run `npx skills add dylantarre/design-system-skills --all -g -y` in your terminal to install all 28 skills globally.

How to generate design tokens with AI?▼

Ask for what you need in plain English, like a color scale or spacing system, and the matching skill generates tokens in CSS, Tailwind, or JSON format.

Does it support React, Vue, Svelte, and Angular?▼

Yes. Dedicated framework skills generate token-driven components using modern patterns like React forwardRef, Vue Composition API, Svelte 5 runes, and Angular signals.

Can it help with WCAG accessibility compliance?▼

Yes. Built-in skills check color contrast ratios, generate visible focus states, and provide ARIA patterns for modals, tabs, menus, and other interactive components.

How to sync design tokens with Figma?▼

The figma and style-dictionary skills guide syncing tokens between code and Figma Variables or Tokens Studio, with multi-platform output for web, iOS, and Android.