Project-Pilot: Skill for Claude Code

SuperDesign helps you (1) find design inspirations/styles and (2) generate/iterate design drafts on an infinite canvas.

---

Core scenarios (what this skill handles)

1. superdesign init — Analyze the repo and build UI context to .superdesign/init/
2. Help me design X (feature/page/flow)
3. Set design system
4. Help me improve design of X

Init: Repo Analysis

When .superdesign/init/ directory doesn't exist or is empty, you MUST automatically:

1. Create the .superdesign/init/ directory
2. Fetch the init prompt from the URL below
3. Follow the prompt instructions to analyze the repo and write context files

https://raw.githubusercontent.com/superdesigndev/superdesign-skill/main/skills/superdesign/INIT.md

Do NOT ask the user to do this manually — just do it.

Mandatory Init Files

If .superdesign/init/ exists, you MUST read ALL files in this directory FIRST before any design task:

• components.md — shared UI primitives with full source code
• layouts.md — shared layout components (nav, sidebar, header, footer)
• routes.md — page/route mapping
• theme.md — design tokens, CSS variables, Tailwind config
• pages.md — page component dependency trees (which files each page needs)
• extractable-components.md — components that can be extracted as reusable DraftComponents

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.

Superdesign CLI (MUST run before any command)

IMPORTANT: Before running ANY superdesign command, you MUST ensure the CLI is installed and logged in.

Follow these steps in order — do NOT skip any step:

1. Check if CLI is already installed:

   superdesign --version
   

   • If the command succeeds (prints a version), skip installation and go to step 2.
   • If the command fails (not found), install the CLI:

     npm install -g @superdesign/cli@latest