superdesigndev/superdesign
skills/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), 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:endLine
$ install --global
skillsauthnpx skillsauth add superdesigndev/superdesign-skill superdesignInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 2:25 AM4.3s3 files scanned
SKILL.md
- name:
- superdesign
- description:
- >
- 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:endLine
- author:
- superdesign
- version:
- 0.0.2
SuperDesign helps you (1) find design inspirations/styles and (2) generate/iterate design drafts on an infinite canvas.
Core scenarios (what this skill handles)
- superdesign init — Analyze the repo and build UI context to
.superdesign/init/ - Help me design X (feature/page/flow)
- Set design system
- Help me improve design of X
Init: Repo Analysis
When .superdesign/init/ directory doesn't exist or is empty, you MUST automatically:
- Create the
.superdesign/init/directory - Fetch the init prompt from the URL below
- 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 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)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:
-
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
-
Check login status by running any command (e.g.
superdesign --help). If you see an auth/login error, run:superdesign loginWait 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.
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
Related Skills
openclaw/openclaw-secret-scanning-maintainer
development
VerifiedTrustedCommunity
Maintainer-only workflow for handling GitHub Secret Scanning alerts on OpenClaw. Use when Codex needs to triage, redact, clean up, and resolve secret leakage found in issue comments, issue bodies, PR comments, or other GitHub content.
357,764SKILL.mdUpdated Apr 15, 2026
openclaw/openclaw-release-maintainer
development
VerifiedTrustedCommunity
Maintainer workflow for OpenClaw releases, prereleases, changelog release notes, and publish validation. Use when Codex needs to prepare or verify stable or beta release steps, align version naming, assemble release notes, check release auth requirements, or validate publish-time commands and artifacts.
357,764SKILL.mdUpdated Apr 10, 2026
openclaw/openclaw-qa-testing
development
VerifiedTrustedCommunity
Run, watch, debug, and extend OpenClaw QA testing with qa-lab and qa-channel. Use when Codex needs to execute the repo-backed QA suite, inspect live QA artifacts, debug failing scenarios, add new QA scenarios, or explain the OpenClaw QA workflow. Prefer the live OpenAI lane with regular openai/gpt-5.4 in fast mode; do not use gpt-5.4-pro or gpt-5.4-mini unless the user explicitly overrides that policy.
357,764SKILL.mdUpdated Apr 10, 2026
openclaw/openclaw-parallels-smoke
development
VerifiedTrustedCommunity
End-to-end Parallels smoke, upgrade, and rerun workflow for OpenClaw across macOS, Windows, and Linux guests. Use when Codex needs to run, rerun, debug, or interpret VM-based install, onboarding, gateway smoke tests, latest-release-to-main upgrade checks, fresh snapshot retests, or optional Discord roundtrip verification under Parallels.
357,764SKILL.mdUpdated Apr 10, 2026