jrpease
Community@jrpease
jrpease provides Figma design-system skills covering tokens, components, icons, Storybook, Chromatic, and brownfield retrofits into pnpm/Turborepo monorepos.
Agent Skills by jrpease
Showing 12 vetted skills indexed across 1 GitHub repositories.
jrpeasestorybook-chromatic-builder
Builds Storybook components, stories, and Chromatic visual regression testing from synced Figma design tokens.
jrpeasecomponent-builder
Builds Figma component libraries with variant matrices, token bindings, and typed slots.
jrpeaseretrofit-planner
Orchestrates a seven-phase brownfield design-system retrofit with human confirmation gates between phases.
jrpeasedesign-system-audit
Measures existing code and Figma design systems to size a token retrofit.
jrpeasetoken-sync-layer
Sync Figma design variables into code-ready token files via DTCG JSON and Style Dictionary.
jrpeasetoken-sheet-builder
Generates a branded Foundations page in Figma documenting design tokens and styles.
jrpeasetoken-builder
Creates two-tier primitive and semantic design token systems as Figma variables with modes and styles.
jrpeaserepository-builder
Scaffold a pnpm and Turborepo monorepo and advance it from local folder to GitHub with CI.
jrpeaseicon-system-builder
Builds a Figma Icons page of named, scalable icon components from Lucide, Tabler, Phosphor, Material, or custom SVGs.
jrpeasetoken-crosswalk-builder
Build a three-way token crosswalk mapping new DTCG tokens to old Figma variables and code identifiers.
jrpeasecomponent-pipeline
Orchestrates a new component from Figma build through token sync to code and stories.
jrpeasefigma-environment-setup
Configures the local working folder and connects Claude to Figma for design-system workflows.
Frequently Asked Questions About jrpease
FAQPage SchemaWhat tasks can I accomplish with jrpease's design-system skills?▼
You can build Figma token systems, icon libraries from Lucide/Tabler/Phosphor/Material, and component libraries with variant matrices; sync tokens to code via DTCG JSON and Style Dictionary; stand up Storybook with Chromatic visual regression; and run full brownfield retrofits with audit, crosswalk mapping, and CI validation gates.
Who are these skills designed for?▼
Design-system engineers, product designers working in Figma, and frontend developers maintaining component libraries. They suit teams migrating mature codebases onto design tokens, as well as greenfield builders who want a guided path from Figma variables to a versioned monorepo with tested, documented code components.
How do I get started and in what order do the skills run?▼
Run figma-environment-setup first to connect Claude to Figma via the Console MCP, desktop bridge plugin, or access token. Then token-builder, icon-system-builder, and component-builder create the system; token-sync-layer and storybook-chromatic-builder produce code. Orchestrators like component-pipeline and retrofit-planner sequence phases with human confirmation gates.
What frameworks and outputs does the token sync support?▼
The token-sync-layer emits framework-specific outputs from DTCG JSON via Style Dictionary: shadcn/Tailwind configs, MUI themes, vanilla CSS (tokens.css), iOS Swift, Android Kotlin, or custom formats. It also installs a reusable 'sync figma tokens' command to keep code continuously aligned with Figma variables.
What are the prerequisites for using these skills?▼
You need a Figma file and a connection method (Figma Console MCP, desktop bridge plugin, or access token) configured by figma-environment-setup. For code output, repository-builder graduates the local folder into a pnpm + Turborepo monorepo with git, GitHub remote, PRs, and CI. Brownfield retrofits should start with design-system-audit.