jrpease

jrpease/throughline

Plugin Claude Code

Plugin marketplace listing 1 plugin: throughline.

jrpease/throughline

Plugin Claude Code

ThroughLine — build a complete design system end to end. Author tokens, styles, icons, and components in Figma, then stand up a monorepo, sync tokens to framework-specific code via Style Dictionary, and generate Storybook stories with Chromatic. One unbroken line from design to code. Built for designers becoming…

jrpease/throughline

MCP server Claude CodeCodexCursor +2

The most comprehensive MCP server for Figma — design tokens, variables, components, write tools, version history diff, accessibility audits, FigJam, Slides, and more. Local (WebSocket Desktop Bridge plugin) and Cloudflare Workers (paired + remote) modes. Runs locally from the figma-console-mcp npm package. Needs 1…

jrpease/throughline

Command Cursor

Read design-system.json and present a clear, plain-language summary of where the user's design system stands. This is the "where am I?" command — especially valuable for users who don't want to read raw JSON.

jrpease/throughline

Command Cursor

Document a single existing component end to end, using the settings already in design-system.json (project.uiFramework, figma.mechanism, sync.platforms) rather than re-asking configuration. Scale explanation to user.codingLevel.

jrpease/throughline

Command Cursor

Run the component-pipeline orchestrator skill to take one new component from Figma all the way to a tested, storied code component.

jrpease/throughline

Command Cursor

This is the first step for building a design system with ThroughLine. The user invoked it explicitly, so begin immediately — do not invoke any brainstorming or planning skill first. There is nothing to brainstorm until the environment exists: the local working folder must be created and Figma must be connected before…

jrpease/throughline

Command Cursor

Re-run the token sync pipeline to catch any updates made in Figma.

jrpease/throughline

Cursor rule Cursor

Build Figma components — buttons, inputs, cards, badges, chips, modals, and more — with variant matrices (types, sizes, states) and icon/component/content slots bound to the design system's tokens and styles. Use this when the user wants to create components, build a component library, make buttons/inputs/cards/etc.…

jrpease/throughline

Cursor rule Cursor

Take a single new component from Figma to fully-built-and-storied code, end to end — build it in Figma, sync any new tokens it introduced, then build its code component and stories. Orchestrates component-builder, token-sync-layer, and storybook-chromatic-builder with a human confirmation between each stage. Use this…

jrpease/throughline

Cursor rule Cursor

Measure a pre-existing design system before retrofitting it onto tokens, so the retrofit is right-sized. This is a PROCESS skill and the brownfield front door. Use this when retrofitting a design system onto a mature codebase and an already-populated Figma file, when the user wants to audit an existing system, size a…

jrpease/throughline

Cursor rule Cursor

Set up the local working folder and connect Cursor to Figma so the design-system skills can read and write variables, styles, and components. Run this BEFORE brainstorming and before any other design-system skill. Invoke it immediately when the user wants to start, set up, or begin building a design system — phrases…

jrpease/throughline

Cursor rule Cursor

Build an icon system in Figma — a dedicated "Icons" page of well-named, scalable icon components from Lucide, Tabler, Phosphor, Material, or custom SVGs. Use this when the user wants to set up icons, add an icon library, import Lucide or Material icons, create icon components, or build an icon set in Figma. Also…

jrpease/throughline

Cursor rule Cursor

Graduate the local design-system folder into a real monorepo — a pnpm + Turborepo workspace with packages for tokens and UI components — and walk the user from a plain folder to local git to a GitHub remote with PRs and CI. Use this when the user wants to set up a repo, create a GitHub repository, add version control…

jrpease/throughline

Cursor rule Cursor

Orchestrate a full brownfield design-system retrofit end to end — audit, refine, rebind, sync, baseline, code, docs, cleanup — with a human confirmation gate between every phase. Use this when the user wants to run a complete retrofit, migrate a mature codebase and populated Figma file onto tokens, resume an…

jrpease/throughline

Cursor rule Cursor

Stand up Storybook in the monorepo, build code components matching the Figma design system, generate stories for every component, set up Chromatic for visual regression testing, and wire Code Connect when the user's Figma plan supports it. Use this when the user wants to set up Storybook, build component stories, add…

jrpease/throughline

Cursor rule Cursor

Build a two-tier (primitive + semantic) design token system as Figma variables — color ramps, spacing, type scale, radius, shadows — with light/dark or brand modes, using one collection per category per tier. Use this when the user wants to create design tokens, design variables, a color system, a type scale, a…

jrpease/throughline

Cursor rule Cursor

Build the brownfield token crosswalk — a persistent three-way map between each new token, the old Figma variable, and the old code identifier(s) — then wire the tokens:validate CI gate. Use this when retrofitting a design system onto a mature codebase, when the user wants to map old tokens to new ones, build a…

jrpease/throughline

Cursor rule Cursor

Build an on-brand "Foundations" page in Figma that visually documents every variable collection and style — color ramps with swatches, the type scale, spacing, radius, shadows/elevations. Use this when the user wants a visual stylesheet, a token reference page, a Foundations page, to document or showcase their design…

jrpease/throughline

Cursor rule Cursor

Sync Figma design variables into code-ready token files via DTCG JSON and Style Dictionary, emitting framework-specific outputs (shadcn/Tailwind, MUI, vanilla CSS, iOS Swift, Android Kotlin, or custom), and set up the reusable "sync figma tokens" command. Use this when the user wants to turn Figma tokens into code…

jrpease/throughline

Skill Claude CodeCodex

Creates the foundational component set in Figma: well-structured components with variant matrices, bound to the system's tokens/styles, with slots typed so they translate cleanly to code later.

jrpease/throughline

Skill Claude CodeCodex

Sequences a single new component through the whole flow: Figma → tokens → code/stories. This skill holds zero domain logic of its own — it is a sequencer that invokes the real skills and gates each stage on a human confirmation. All the actual work lives in the skills it calls; this keeps it from rotting when those…

jrpease/throughline

Skill Claude CodeCodex

Measures both sides of a pre-existing system so a retrofit can be right-sized, before anything is built or changed. It is the brownfield analog of /design-system-status: where status reports a local manifest, this assesses an external, mature system — a real codebase and an already-populated Figma file.

jrpease/throughline

Skill Claude CodeCodex

This skill does three foundational jobs, in order.