monkilabs/figma-design
src/orchestrator/plugins/figma/SKILL.md
Figma design-to-code workflows, design token extraction, component inspection, and asset export. Use when translating Figma designs into code, extracting design tokens, or referencing component specs.
$ install --global
skillsauthnpx skillsauth add monkilabs/opencastle figma-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 17, 2026, 9:17 AM16.7s3 files scanned
SKILL.md
- name:
- figma-design
- description:
- Figma design-to-code workflows, design token extraction, component inspection, and asset export. Use when translating Figma designs into code, extracting design tokens, or referencing component specs.
<!-- ⚠️ This file is managed by OpenCastle. Edits will be overwritten on update. Customize in the .opencastle/ directory instead. -->
Figma Design
For project-specific design system details, see the frontend-design skill.
MCP Tools
| Tool | Purpose |
|------|---------|
| figma/get_file | Retrieve full Figma file structure |
| figma/get_file_nodes | Get specific nodes/frames |
| figma/get_images | Export nodes as images |
| figma/get_comments | Read design review comments |
| figma/get_styles | Extract color/text/effect styles |
| figma/get_components | List reusable components |
Example MCP invocations
// figma/get_file — full file structure
{ "file_key": "a1b2C3d4E5", "depth": 2 }
// figma/get_file_nodes — specific frames
{ "file_key": "a1b2C3d4E5", "node_ids": ["123:45"] }
// figma/get_images — export as PNG at 2x
{ "file_key": "a1b2C3d4E5", "ids": ["123:45"], "format": "png", "scale": 2 }
Design-to-Code Workflow
- Identify the frame — obtain the Figma file key or node ID from the task input.
- Inspect nodes — call
figma/get_file_nodesfor the target node IDs and extract bounding boxes, fills, text styles, and auto-layout info. - Extract tokens — map returned styles to token files (colors, typography, spacing) and commit tokens to
src/styles/tokens.cssor a token JSON. - Implement component — scaffold a framework component that consumes tokens and matches layout properties (gap, padding, width). Import tokens (CSS variables or JSON) and attach a
data-testidfor programmatic verification.
// src/components/ui/Card.tsx — consumes tokens, matches Figma layout
import '../styles/tokens.css';
interface CardProps { title: string; description?: string }
export function Card({ title, description }: CardProps) {
return (
<div data-testid="card" className="card">
<span className="card-title">{title}</span>
{description && <p>{description}</p>}
</div>
);
}
- Verify programmatically — run a visual diff or DOM-attribute check:
- Render in Storybook and compare DOM bounding boxes against Figma node metrics.
- Acceptance: differences <= 4px for spacing and matching token colors; fonts must match family and weight.
- Feedback loop — if implementation deviates beyond thresholds, update token mapping or request design clarification and repeat from step 2.
See REFERENCE.md for a verification script and Figma→CSS translation rules.
Related Skills
monkilabs/validation-gates
development
VerifiedTrustedCommunity
Defines 10 sequential validation gates: secret scanning, lint/test/build checks, blast radius analysis, dependency auditing, browser testing, cache management, regression checks, smoke tests. Use when running pre-deploy validation or CI checks, CI/CD pipelines, deployment pipeline validation, pre-merge checks, continuous integration, or pull request validation.
44SKILL.mdUpdated Apr 21, 2026
monkilabs/testing-workflow
development
VerifiedTrustedCommunity
Generates test plans, writes unit/integration/E2E test files, identifies coverage gaps, flags common testing anti-patterns. Use when writing tests, creating test suites, planning test strategies, mocking dependencies, measuring code coverage, or test planning.
44SKILL.mdUpdated Apr 21, 2026
monkilabs/team-lead-reference
development
VerifiedTrustedCommunity
Provides model routing rules, validates delegation prerequisites, supplies cost tracking templates, defines dead-letter queue formats for Team Lead orchestration. Load when assigning tasks to agents, choosing model tiers, starting delegation session, running multi-agent workflow, delegating work, choosing which model to use, or assigning tasks.
44SKILL.mdUpdated Apr 21, 2026
monkilabs/session-checkpoints
testing
VerifiedTrustedCommunity
Saves, restores session state including task progress, file changes, delegation history. Use when saving progress, resuming interrupted work, picking up where you left off, or checkpointing current work.
44SKILL.mdUpdated Apr 21, 2026