styleframe-devOfficial·7 Agent Skills Included

styleframe

Type-safe CSS-in-TypeScript design system compilation and theming

Compiles design tokens, utility classes, component recipes, and themes into CSS, TypeScript, and type declarations. Eliminates runtime CSS overhead, untyped style values, and manual Figma token syncing across projects. Guides coding agents through recipe creation, verification, documentation, and release workflows for faster design system delivery.

91|4

↗

npx skills add styleframe-dev/styleframe --all -g -y

Available:

Instructs the agent on coding discipline (simplicity, surgical changes, goal-driven verification) and provides the full Styleframe architecture map, API reference, and critical rules for building tokens, utilities, recipes, and themes correctly.

All Skills in This Repository (7)

Pure Emerald Level Indicators

📦 In Repo

styleframe-dev

implement-recipe

Convert design.md files into TypeScript recipe implementations, barrel indices, and tests.

design-recipe

Classify Styleframe component recipes into color and variant patterns with user-approved design documentation.

research-component

Research UI component variants and patterns across specified library pages.

create-recipe

Orchestrate six sub-skills to create Styleframe recipes with tests, Storybook, and docs.

verify-recipe

Execute type checks, tests, and linting to verify Styleframe recipes.

document-recipe

Automate Styleframe recipe documentation via pattern extraction, source analysis, draft, and conformance check.

showcase-recipe

Generate Storybook showcases and Vue components from design.md and implementation.md.

Official

Advanced

Frequently Asked Questions

FAQPage Schema

How to install Styleframe?▼

Run `npx skills add styleframe-dev/styleframe --all -g -y` in your terminal to install all skills in this suite globally.

What does Styleframe do?▼

Styleframe is a type-safe CSS-in-TypeScript framework that compiles design tokens, utilities, component recipes, and themes into CSS and typed TypeScript output at build time.

How do the agent skills help build design systems?▼

The skills chain research, design, implementation, Storybook showcase, documentation, and verification steps so an agent can create production-ready component recipes end to end.

Does Styleframe work with Vite, Nuxt, and Webpack?▼

Yes. It ships one plugin with adapters for Vite, Nuxt, Webpack, Rollup, esbuild, Rspack, Farm, and Astro, plus bidirectional Figma token sync via the W3C DTCG format.

Can agents verify their own Styleframe changes?▼

Yes. Dedicated skills run typecheck, tests, lint, and Storybook builds, then report failures with exact file and line references.