Superdesign

1---2name: superdesign3description: >4  Superdesign is a design agent specialized in frontend UI/UX design. Use this skill before implementing any UI that requires design thinking. Common commands: superdesign create-project --title "X" (setup project), superdesign create-design-draft --project-id <id> --title "Current UI" -p "Faithfully reproduce..." --context-file src/Component.tsx (faithful reproduction), superdesign iterate-design-draft --draft-id <id> -p "dark theme" -p "minimal" --mode branch --context-file src/Component.tsx (design variations), superdesign execute-flow-pages --draft-id <id> --pages '[...]' --context-file src/Component.tsx (extend to more pages), superdesign create-component --project-id <id> --name "NavBar" --html-file /tmp/navbar.html --props '[...]' (extract reusable component), superdesign update-component --component-id <id> --html-file /tmp/navbar.html (update existing component), superdesign list-components --project-id <id> (list existing components). Supports line ranges: --context-file path:startLine:endLine5metadata:6  author: superdesign7  version: "0.0.2"8---9 10SuperDesign helps you (1) find design inspirations/styles and (2) generate/iterate design drafts on an infinite canvas.11 12---13 14# Core scenarios (what this skill handles)15 161. **superdesign init** — Analyze the repo and build UI context to `.superdesign/init/`172. **Help me design X** (feature/page/flow)183. **Set design system**194. **Help me improve design of X**20 21# Init: Repo Analysis22 23When `.superdesign/init/` directory doesn't exist or is empty, you MUST automatically:24 251. Create the `.superdesign/init/` directory262. Fetch the init prompt from the URL below273. Follow the prompt instructions to analyze the repo and write context files28 29```30https://raw.githubusercontent.com/superdesigndev/superdesign-skill/main/skills/superdesign/INIT.md31```32 33Do NOT ask the user to do this manually — just do it.34 35# Mandatory Init Files36 37If `.superdesign/init/` exists, you MUST read ALL files in this directory FIRST before any design task:38 39- `components.md` — shared UI primitives with full source code40- `layouts.md` — shared layout components (nav, sidebar, header, footer)41- `routes.md` — page/route mapping42- `theme.md` — design tokens, CSS variables, Tailwind config43- `pages.md` — page component dependency trees (which files each page needs)44- `extractable-components.md` — components that can be extracted as reusable DraftComponents45 46**When designing for an existing page**: First check `pages.md` for the page's complete dependency tree. Every file in that tree MUST be passed as `--context-file`. Then also add globals.css, tailwind.config, and design-system.md.47 48# Superdesign CLI (MUST run before any command)49 50**IMPORTANT: Before running ANY superdesign command, you MUST ensure the CLI is installed and logged in.**51 52Follow these steps in order — do NOT skip any step:53 541. Check if CLI is already installed:55 56   ```57   superdesign --version58   ```59 60   - If the command succeeds (prints a version), **skip installation** and go to step 2.61   - If the command fails (not found), install the CLI:62     ```63     npm install -g @superdesign/cli@latest64     ```65 662. Check login status by running any command (e.g. `superdesign --help`). If you see an auth/login error, run:67   ```68   superdesign login69   ```70   Wait for login to complete successfully before proceeding.713. Only after login succeeds, run your intended superdesign commands.72 73> **Never assume the user is already logged in.** Always verify login first.74 75# How it works76 77MUST MANDATORY Fetch fresh guidelines below:78 79```80https://raw.githubusercontent.com/superdesigndev/superdesign-skill/main/skills/superdesign/SUPERDESIGN.md81```82 83Action accordingly based on instruction in the SUPERDESIGN.md