superdesign/SKILL.md
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). Supports line ranges: --context-file path:startLine:endLine
npx skillsauth add atxinsky/skills superdesignInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
SuperDesign helps you (1) find design inspirations/styles and (2) generate/iterate design drafts on an infinite canvas.
.superdesign/init/When .superdesign/init/ directory doesn't exist or is empty, you MUST automatically:
.superdesign/init/ directoryhttps://raw.githubusercontent.com/superdesigndev/superdesign-skill/main/skills/superdesign/INIT.md
Do NOT ask the user to do this manually — just do it.
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 codelayouts.md — shared layout components (nav, sidebar, header, footer)routes.md — page/route mappingtheme.md — design tokens, CSS variables, Tailwind configpages.md — page component dependency trees (which files each page needs)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.
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:
Check if CLI is already installed:
superdesign --version
npm install -g @superdesign/cli@latest
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.
Only after login succeeds, run your intended superdesign commands.
Never assume the user is already logged in. Always verify login first.
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
development
Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
testing
Use when creating new skills, editing existing skills, or verifying skills work before deployment
development
Use when you have a spec or requirements for a multi-step task, before touching code
documentation
Create detailed implementation plan with bite-sized tasks