ui-forgelisted

5-stage UI design forge: Discover → Tokenize → Compose → Animate → Polish. Integrates 9 sub-skills (ui-ux-pro-max, awesome-design-md, ui-styling, motion-ui, frontend-design-direction, make-interfaces-feel-better, design-system, design, brand) + 9 reference sites (React Bits, Motion Primitives, Aceternity UI, Framer Motion, GSAP, Pageflow, Godly, Animate UI, GSAP Showcase) + Figma MCP. Covers landing pages, SaaS dashboards, mobile UI, component libraries, and advanced motion. Use when building any UI from scratch or from a Figma design.
dxkjuanjuan/ui-forge · ★ 3 · Web & Frontend · score 64

Install: claude install-skill dxkjuanjuan/ui-forge

# UI Forge — 5-Stage Design Forge A production-grade UI design workflow that forges pixel-perfect, accessible, animated interfaces from Figma designs or text descriptions. ## When to Use - Building any UI from scratch: landing pages, dashboards, mobile apps, component libraries - Converting a Figma design to code - Creating branded interfaces that need design system consistency - Adding motion and micro-interactions to existing components - When the user says "build me a page", "design a UI", "implement this Figma", or "create a component" ## Arguments | Arg | Default | Description | |-----|---------|-------------| | `--figma-url URL` | — | Figma file URL (triggers Entry A) | | `--brand NAME` | — | Brand from awesome-design-md (e.g. stripe, vercel, linear) | | `--skip PHASES` | — | Comma-separated phases to skip (e.g. `animate,polish`) | | `--intensity LEVEL` | auto | Motion intensity: low/medium/high (auto-detected from product type) | --- ## The 5 Stages ``` Entry A (Figma) ──┐ ├─→ Phase 1: Discover → Phase 2: Tokenize → Phase 3: Compose → Phase 4: Animate → Phase 5: Polish → Delivery Entry B (Text) ──┘ ↓ [Figma writeback?] ``` ### Quality Gate Protocol Each phase has a quality gate. If a gate fails: 1. Roll back to the previous phase an