slurpyb/design-system

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 source-to-source CSS transforms — anything that needs a real CSS parser instead of regex. Triggers: "parse CSS", "extract design tokens / custom properties from CSS", "validate CSS", "css-tree", "CSS AST", "transform a stylesheet".

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 translate a design system into Tailwind theme config, export tokens to DTCG, lint token consistency, diff design system revisions, or check WCAG contrast on component color pairs. Acts as the upstream source of truth for the impeccable sub-commands (colorize/typeset/audit/critique), web-design-guidelines, and shadcn.

Author or review Elena component ownership, props, templates, events, lifecycle, accessibility, frameworks, SSR, and tests in this repository.

Author or review Elena component CSS, recipe transposition, token use, scoped ownership, progressive rendering, layout, motion, and visual verification.

Change or verify Elena build configuration, package exports, CEM and declarations, registration, SSR, framework fixtures, and release validation.

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-filters, anchor positioning, container queries, :has(), :user-valid. - Scroll/Motion: View Transitions, Scroll-driven animations, scroll parallax/reveals. - Performance: CWV (LCP, INP), content-visibility, Fetch Priority, image optimization. - System/APIs: Local filesystem access, WebUSB, WebSockets sync, WebAssembly widgets. - Frameworks: Adapting layout/styles in React, Vue, Angular. - General Frontend: Forms, autofill, advanced inputs, custom scrollbars, modern component states, etc. DO NOT trigger for: - Backend: Database SQL, ORMs, Express API routes. - Pipelines: CI/CD deployment, Docker, Actions. - Generic: Local scripts (Python/Go tools), ESLint, Git.

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.

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 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, configuring Storybook, mocking network requests, or wiring component tests.