southleft

southleft/figma-console-mcp

Command Claude Code

Implement a feature or fix using best practices for this MCP server project.

southleft/figma-console-mcp

Command Claude Code

Run tests and ensure code quality for the Figma Console MCP server.

southleft/figma-console-mcp

Instructions file

Instructions for southleft/figma-console-mcp, covering figma console mcp, build & test, release process, known issues and architecture.

southleft/story-ui

Instructions file

Instructions for southleft/story-ui, covering story ui - ai assistant project guide, what is story ui?, core value proposition, quick reference and important files.

southleft/figma-console-mcp-skills

Plugin Claude Code

Plugin marketplace listing 1 plugin: figma-console-mcp-skills.

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Author FigJam boards with granular control — sticky notes (single + batch), connectors between nodes, shapes-with-text, sections, tables, code blocks, and auto-arrange — plus read back board contents and the connection graph. Use when the user wants to build or edit a FigJam board element-by-element. Triggers: 'add…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Analyze a Figma COMPONENTSET as a state machine for code generation — extract variant axes (state/size/etc.), map state variants to CSS pseudo-classes (hover→:hover, focus→:focus-visible, disabled→:disabled, error→[aria-invalid]), and compute per-variant visual diffs (only what changes per state). Use when generating…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Read and write designer annotations on Figma nodes — node-level design specs that pin properties (fills, width, fontSize, etc.) and carry plain or markdown notes. Use when the user wants to document or inspect interaction specs, animation timings, easing, accessibility requirements, or implementation notes attached…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Organize a Figma COMPONENTSET's variants into a clean, labeled grid — rows and columns derived from the variant properties, with row labels on the left, column headers on top, and a titled white container. Use when a variant set is a messy pile and you want a presentable, documentation-ready layout — triggers…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Deep accessibility scorecard for a single Figma component or component set — state coverage (default/hover/focus/disabled/error/active/loading), focus-indicator quality and contrast, non-color state differentiation, target size, annotation completeness, and color-blind simulation (protanopia/deuteranopia/tritanopia)…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Find which Figma version introduced a specific change — a component property or a child node — via a binary search over version history (log2(N) API calls instead of N). Answers 'who added this and when'. Use when the user wants git-blame-style attribution for a Figma design — triggers: 'when was this component…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Compare a Figma node's actual specs against a code spec (the values your component renders) and get a 0–100 parity score, a list of discrepancies, and fix suggestions. Use to detect design-to-code DRIFT: triggers 'check design parity', 'does my code match the Figma', 'compare this component to the design', 'is my…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Read, post, reply to, and delete comments on a Figma file via the REST API — including pinning a comment to a specific node and threading replies. Use when the user wants to work with Figma comments programmatically — triggers: 'get Figma comments', 'read comments on this file', 'post a comment in Figma', 'leave a…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Add, edit, and delete Figma component properties (TEXT, BOOLEAN, INSTANCESWAP, VARIANT) on a COMPONENT or COMPONENTSET, and instantiate a component then set its instance properties. Use when authoring or wiring up a component's API in Figma — triggers: 'add a component property', 'add a boolean prop to this…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Extract a single Figma component (or any node) as a full recursive tree to N levels deep — every child's layout, fills/strokes/effects, typography, resolved bound variables (token names + code syntax), INSTANCE mainComponent references, prototype reactions, and annotations. Use when you need maximum-fidelity data to…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

One call to inventory an entire Figma design system — variables/tokens (grouped by collection + mode), components and component sets (with property definitions and per-variant visual specs), and styles (color/text/effect with resolved values). Use when you need the whole design-system picture before generating code or…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Export Figma variables to design token files in DTCG, CSS custom properties, Tailwind v4/v3, SCSS, TypeScript, JSON, Style Dictionary, or Tokens Studio. Use when the user wants to pull design tokens OUT of Figma into code — triggers: 'export tokens', 'export Figma variables', 'generate CSS variables from Figma', 'turn…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Extract a design system from vibe-coded production apps that never had one: inventory components, mine de-facto styling into DTCG tokens, scaffold a Storybook package, port components, and optionally round-trip tokens/components into Figma. Use when the user wants to 'extract a design system', 'create a design system…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Generate a human-readable markdown changelog between two Figma file versions — pages added/removed/renamed plus per-component changes, enriched with author handles and timestamps, ready to paste into release notes, PRs, or Storybook MDX. Use when the user wants prose history — triggers: 'generate a Figma changelog'…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Generate complete Markdown documentation for a Figma component — anatomy/layer tree, design tokens (colors, spacing, typography), states/variants matrix, accessibility notes, content guidelines, and optional code-parity + YAML frontmatter. Use when the user wants a docs page or handoff spec for a component or…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Push design tokens from code INTO Figma as variables — DTCG / tokens.json / a token object → Figma variable collections, modes, and values. Use when the user wants to sync tokens code→Figma: triggers 'import tokens into Figma', 'create Figma variables from my tokens.json / DTCG / Tailwind config', 'sync design tokens…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Discover and import design tokens from SUBSCRIBED Figma team libraries into the current file. Use when the user wants to reuse tokens that live in a shared library: triggers 'list library variables', 'what tokens are in our shared library', 'import a variable from our design system library', 'pull in the brand color…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Lint a Figma node tree for WCAG 2.2 accessibility AND design-system quality — contrast, target size, focus indicators, color-only signaling, hardcoded colors, missing text styles, detached components, and more. Use when the user wants a design-side audit BEFORE handoff: triggers 'lint this frame', 'check…

southleft/figma-console-mcp-skills

Skill Claude CodeCodex

Create, update, rename, delete, and organize Figma variables, collections, and modes — including fast batch create/update, setting scopes, code syntax, and adding theme modes. Use for incremental variable work: triggers 'create a variable', 'batch update variables', 'add a dark mode to my collection', 'rename this…