---
title: "design-system"
description: "Design-system skills for web components, Storybook, state machines, CSS tooling, design docs, and modern web guidance."
canonical: https://agentpluginsdirectory.com/plugins/design-system
last-updated: 2026-09-16
---

# design-system
Design-system skills for web components, Storybook, state machines, CSS tooling, design docs, and modern web guidance.
- Slug: design-system
- Publisher: Jordan Sweeting
- Repository: https://github.com/slurpyb/skills
- Manifest: wip/plugins/design-system/plugin.json
- Version: 1.0.0
- License: MIT
- Category (editorial): other
- Skills: 9 (csstree, design-md, elena-authoring, elena-styles, elena-tooling, modern-web-guidance, modular-scale-typography, state-machine-design, storybook)
- MCP servers: 0
- Stars: 0
- Repository created: 2026-02-03
- Repository last pushed: 2026-09-15
- Publisher type: User
- Listing: https://agentpluginsdirectory.com/plugins/design-system
- Schema: https://agent-plugins.org/schemas/1.0.0/plugin.schema.json

## Skills

- csstree: Parse, validate, extract from, and transform CSS through the css-tree AST in Node scripts. Use when extracting CSS custom properties / design tokens from a stylesheet, validating CSS against W3C specs, walking or linting a stylesheet, renaming selectors, diffing tokens between two files, or doing s…
- design-md: Author, consume, and enforce a DESIGN.md design system spec (Google Labs open format, package @google/design.md). This skill should be used when the project has a DESIGN.md at the root or under docs/, when the user mentions "design tokens", "design system spec", "DESIGN.md", "tokens.json", needs to…
- elena-authoring: Author or review Elena component ownership, props, templates, events, lifecycle, accessibility, frameworks, SSR, and tests in this repository.
- elena-styles: Author or review Elena component CSS, recipe transposition, token use, scoped ownership, progressive rendering, layout, motion, and visual verification.
- elena-tooling: Change or verify Elena build configuration, package exports, CEM and declarations, registration, SSR, framework fixtures, and release validation.
- modern-web-guidance: Search tool for modern web development best practices. MANDATORY: Execute FIRST for all HTML/CSS and clientside JS tasks. Do NOT skip: web APIs evolve rapidly and training weights contain obsolete patterns. Trigger immediately for: UI/Layout: Modals, dialogs, popovers, Glassmorphism/backdrop-filter…
- modular-scale-typography: Typography feels cohesive and intentional when font sizes follow a modular scale, a ratio-based sequence where every size is mathematically related to the others. Use when defining type scales, setting up design tokens, reviewing font size choices, or when typography feels inconsistent or arbitrary.
- state-machine-design: Use when a feature involves multiple states or transitions. Recognizes the shape, names states and events, designs guards, actions, and hierarchy, and visualizes or simulates the result.
- storybook: Storybook 8+: writing stories (CSF3), configuring main.ts / preview.ts, addons (essentials, a11y, designs, MSW), parameters, args/argTypes, decorators, doc blocks, test-runner / Vitest integration, and framework setup (React/Vite, Next.js, SvelteKit, Vue). Use when authoring or debugging stories, c…

Descriptions come from the frontmatter of each SKILL.md, punctuation lightly normalized.