divikwu

divikwu/figcraft

Settings file Claude Code

Agent settings declaring 135 allowed tools.

divikwu/figcraft

Cursor rule Cursor

FigCraft Figma design creation rules.

divikwu/figcraft

MCP server Claude CodeCodexCursor +2

MCP server "figma-desktop", hosted remotely at 127.0.0.1, as configured in divikwu/figcraft.

divikwu/figcraft

MCP server Claude CodeCodexCursor +2

TypeScript Execute (tsx): Node.js enhanced with esbuild to run TypeScript & ESM files. Runs locally from the tsx npm package.

divikwu/figcraft

Instructions file CodexOpenCode

AGENTS.md instructions for divikwu/figcraft, covering figcraft — agent instructions, ⛔ figma ui creation — mandatory pre-flight (all ai ides), api mode (endpoint), dynamic toolsets and multi-file parallel.

divikwu/figcraft

Instructions file

Claude Code instructions for divikwu/figcraft, covering project: figcraft, ⛔ figma ui creation — tool-driven mandatory flow, ⛔ skill priority — project skills override external, stack and commands.

divikwu/figcraft

Skill Claude CodeCodex

Generate documentation for Figma components — properties, variants, usage guidance, and structural health audit. Use when: document/describe/catalog + components/variants/library, or when auditing component quality for design system maintenance.

divikwu/figcraft

Skill Claude CodeCodex

Design patterns for empty, loading, and error states. Use when: empty state/loading/skeleton/error/no data + design/screen/component, or when ensuring data-driven views handle all states.

divikwu/figcraft

Skill Claude CodeCodex

No-library mode design rules: intentional design thinking, color, typography, iconography. Extends ui-ux-fundamentals.

divikwu/figcraft

Skill Claude CodeCodex

Library mode design rules: token priority, typography, spacing, elevation, dark mode, conflict resolution. Extends ui-ux-fundamentals.

divikwu/figcraft

Skill Claude CodeCodex

Design handoff — annotate designs with specs, export spacing/color/typography info for developers. Use when: handoff/annotate/spec/redline + design/screen/component, or when preparing designs for developer implementation.

divikwu/figcraft

Skill Claude CodeCodex

Lint Figma designs for compliance and auto-fix violations. Use when: lint/fix/check compliance/clean up + design/page/screen, or when automated quality fixes are needed. Supports both quick one-step lint and granular multi-step workflows.

divikwu/figcraft

Skill Claude CodeCodex

Review existing Figma designs against design quality rules. Outputs structured violation report with actionable fixes. Use when: review/audit/check/critique/analyze/inspect/diagnose + design/screen/page/component, analyze issues/problems with components, or after UI creation to verify quality.

divikwu/figcraft

Skill Claude CodeCodex

Audit design system health — token coverage, component consistency, unused variables, naming compliance, codeSyntax/scope coverage. Use when: audit/health check/coverage + design system/library/tokens, check/fix/repair + codeSyntax/code syntax/scope/description + variables, batch update/fix + variables, or when…

divikwu/figcraft

Skill Claude CodeCodex

Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.

divikwu/figcraft

Skill Claude CodeCodex

Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server…

divikwu/figcraft

Skill Claude CodeCodex

Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling usefigma. Handles plan resolution via whoami if needed. Usage — /figcraft-create-new-file [editorType] [fileName] (e.g. /figcraft-create-new-file figjam My Whiteboard).

divikwu/figcraft

Skill Claude CodeCodex

Create screens in Figma by REUSING an existing design system's components, variables, and styles. REQUIRES a published library or local components. Triggers: 'create a screen', 'build a landing page using the design system', 'push page to Figma', 'create designs from code', 'update the Figma screen'. Extends…

divikwu/figcraft

Skill Claude CodeCodex

Build or update the design system itself in Figma — variables/tokens, component libraries, theming (light/dark modes), foundations documentation. Use when creating the system, not just using it. Triggers: 'build component library', 'create design tokens', 'set up theming', 'reconcile code and Figma'. Uses FigCraft…

divikwu/figcraft

Skill Claude CodeCodex

Import HTML or a web page into Figma using FigCraft's native importhtml converter. Use when: html to figma, import html, import webpage, capture static page, convert HTML into editable Figma layers. For pixel-perfect live web capture, use official Figma MCP generatefigmadesign as a visual reference when available.

divikwu/figcraft

Skill Claude CodeCodex

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", "code from Figma", or asks to build application code matching Figma specs. NOT for reviewing/analyzing…

divikwu/figcraft

Skill Claude CodeCodex

MANDATORY prerequisite — you MUST invoke this skill BEFORE every usefigma tool call. NEVER call usefigma directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in…

divikwu/figcraft

Skill Claude CodeCodex

Create UI in Figma using FigCraft declarative tools (createframe, createtext, createcomponent). Use when: create/design/build/make + Figma/UI/screen/page/component/button/variant WITHOUT an existing design system. IMPORTANT: Use createframe for screens, createcomponent for reusable components. Never use usefigma for…

divikwu/figcraft

Skill Claude CodeCodex

Icon rules: ordering in auto-layout (children array order = visual order), tool chain (iconsearch -> iconcreate with index), sizing, spacing, style consistency. Use when: icon/icons + create/place/add/order/position/wrong/layout, or when icons appear in wrong position.