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

```

1. Check login status by running any command (e.g. superdesign --help). If you see an auth/login error, run:

```

superdesign login

```

Wait for login to complete successfully before proceeding.

1. Only after login succeeds, run your intended superdesign commands.

> Never assume the user is already logged in. Always verify login first.

How it works

MUST MANDATORY Fetch fresh guidelines below:

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

Action accordingly based on instruction in the SUPERDESIGN.md