Figma To Code
majiayu000/spellbookExtract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy. Use when a user provides a Figma URL or asks to convert Figma designs to code.
At a glance
This skill is for Design and helps you convert figma designs to react components, generate typescript code from figma, and create tailwind css from design files.
git clone --depth 1 https://github.com/majiayu000/spellbook
cp -r spellbook/skills/figma-to-code ~/.claude/skills/figma-to-code
Setup, runtime and requirements describe majiayu000/spellbook, the repo this skill ships in.
figmareacttypescriptTailwind CssnextjsUi Components
Also in majiayu000/spellbook
View the repoAudit AND optimize a CLAUDE.md / AGENTS.md instruction file — score it against the five high-leverage patterns, flag anti-patterns, then app...
Generate or update repository-specific AGENTS.md instruction files from real repo evidence. Use when asked to create, design, scaffold, spli...
REST/GraphQL/gRPC API design best practices. Use when designing APIs, defining contracts, handling versioning. Covers OpenAPI 3.2, GraphQL F...
Mobile app UI design expert for iOS and Android. Use when designing app interfaces, creating design systems, ensuring accessibility, or foll...
End-to-end app feature inventory and user-story testing workflow with a canonical tracker. Use when the user asks to audit every feature, de...
Design architecture foundations before implementation. Use when asked to design or refactor architecture, choose Rust/Go crate, package, mod...
Ask Grok or Gemini via opencli (browser-session based, no API cost). Use when the user says "问 grok", "问 gemini", "ask grok", "ask gemini"...
OAuth 2.1 + JWT authentication security best practices. Use when implementing auth, API authorization, token management. Follows RFC 9700 (2...
能力蒸馏工作流——从用户批准的强模型访谈或真实任务轨迹中提取非显然的判断规则，形成可审计的 judgment packet，再交给 skill-audit 和 skill-creato...
Clash Verge 诊断与配置管理。网络诊断、配置 AI 工具路由规则（Claude/Codex/Cursor/Warp）、查看/克隆订阅配置、切换配置文件。当用户遇到网络问题...
查看指定进程的代理线路。通过 Mihomo API 查询当前活跃连接，显示进程匹配的规则和代理链路。用于确认某个进程（如 claude、chrome）走的是哪条订阅...
对用户拥有或明确获授权的本机可执行文件、应用二进制和版本产物做只读静态逆向，包括 Claude Code 及其他 CLI、Mach-O、ELF、PE、Wasm 或打包应用。...
Other Design skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typog...
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art...
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explor...
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right,...
An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid wi...
Generate configurable chat motion overlays from a transcript or screenshot, including plain bubble scenes, app-style chat containers, option...