superdesign — Skills — getagentictools

What it does

No .superdesign/init/ files already exist, AND

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

superdesign

Source

Repository: https://github.com/superdesigndev/superdesign-skill

superdesign FAQ

What does the superdesign skill do?

Design or redesign frontend UI with the Superdesign canvas. Use for design-system extraction, faithful UI reproduction, visual variants, reusable design components, multi-page flows, and static posters/flyers/cover art/social graphics composed on a fixed canvas. Do not use for implementation-only tasks that require no design exploration. No .superdesign/init/ files already exist, AND components.md — shared UI primitives with full source code

What does superdesign require?

pages.md — page component dependency trees (which files each page needs) Configuration keys: SKILL.

How do I install superdesign?

Run: npx -y skills add https://github.com/superdesigndev/superdesign-skill --skill superdesign --agent claude-code — the source lives at github.com/superdesigndev/superdesign-skill.

Maintain superdesign?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![superdesign on getagentictools](https://getagentictools.com/badge/skills/superdesigndev-superdesign-skill-superdesign.svg)](https://getagentictools.com/skills/superdesigndev-superdesign-skill-superdesign?ref=badge)

npx agentictools info skills/superdesigndev-superdesign-skill-superdesign

The second line is the CLI lookup for this page — handy in READMEs and docs.