Give Claude the philosophy.
A Claude Code Agent Skill: install it and Claude builds UI using this project’s real design philosophy and component registry — not invented conventions — routed automatically to one of seven distinct visual voices based on what you’re actually building. Grounded in the same files everything else on this site is grounded in: the philosophy docs, the registry, and the token system.
Install it
No terminal? The download above unzips straight into a dsgn/ folder — drop it into your Claude Code skills directory and you’re done. Prefer a one-liner instead? The skill is a folder of markdown, nothing to build — pull just skills/dsgn out of the repo (no full clone needed).
npx @dhruvchoudhary/dsgn skill --globalor npx @dhruvchoudhary/dsgn skill --project for this project only — same CLI that installs components, now installs the skill too.
npx degit dhruvch1244/design/skills/dsgn ~/.claude/skills/dsgnnpx degit dhruvch1244/design/skills/dsgn .claude/skills/dsgngit clone --depth 1 https://github.com/dhruvch1244/design /tmp/dsgn-skill && cp -r /tmp/dsgn-skill/skills/dsgn ~/.claude/skills/dsgn && rm -rf /tmp/dsgn-skillNot using Claude Code?
Same router, seven personas, and reference docs — built as real multi-file structure for tools that support it (Cursor, Windsurf, Gemini CLI), shaped around what each format actually documents rather than one flattened file everywhere.
./.cursor/rules/dsgn/ (router + 7 agents + 4 reference docs)npx @dhruvchoudhary/dsgn skill --cursorCursor reads each file's description and auto-attaches the relevant one. No file-based global — Cursor's only global mechanism is its Settings UI.
./.windsurf/rules/dsgn-*.md (12 files)npx @dhruvchoudhary/dsgn skill --windsurf~/.windsurf/global_rules.mdnpx @dhruvchoudhary/dsgn skill --windsurf-globalA condensed summary, not the full skill — Windsurf caps this file at 6,000 characters.
./.github/copilot-instructions.md + .github/instructions/dsgn-*.instructions.md (7 files)npx @dhruvchoudhary/dsgn skill --copilotCopilot has no description-based routing — all 7 voices apply together; delete the ones you don't want.
./GEMINI.md + ./.gemini/dsgn/ (real @file.md imports)npx @dhruvchoudhary/dsgn skill --gemini~/.gemini/GEMINI.md + ~/.gemini/dsgn/npx @dhruvchoudhary/dsgn skill --gemini-global./AGENTS.md (single flattened file — the correct shape for this convention)npx @dhruvchoudhary/dsgn skill --agents-mdNon-destructive by default, like every dsgn install command — pass --overwrite if the target file already exists and you want it replaced.
The router — SKILL.md
The entry point Claude reads first. Full file also covers source-of-truth references and how the handoff to a sub-agent works when one is available.
---
name: dsgn
description: Build UI with the real @dhruvchoudhary/dsgn component registry and the dhruvch1244/design philosophy, in one of seven distinct visual voices, routed automatically by project context or explicit request.
---
## When to use this skill
Use it whenever the task is building or restyling UI — a page, a component
library, a design system, a "make this look premium" request — especially
when the project is a fresh scaffold with no established visual language yet,
or when the user explicitly asks for one of the seven voices below by name.
Don't use it to override an established, working design system already in
place in the target project unless the user asks for a restyle. This skill
is additive, not a replacement for a project's existing conventions.
## Router logic
Apply these signals in order — the first one that matches decides:
1. Explicit request wins. If the user names a style directly ("make it
brutalist," "give me the neon one," "like your own site"), use that agent.
2. Existing brand cues win next. Match a project's existing palette/type
direction rather than introducing a new voice on top of an established one.
3. Project type is the fallback default — a SaaS dashboard, a portfolio, a
dev tool, a wellness app, a game each map to one of the seven voices below.
4. When genuinely unsure — two candidates, or no strong signal at all —
stop and ask, don't silently pick. Lead with your actual recommendation
and why, offer 1-2 alternatives, and use a structured choice tool
(e.g. AskUserQuestion) if the host has one.
## Before building: confirm the brief
Every time, unless the user's own request already reads like a full spec:
restate what's being built, its scope (in vs. explicitly out), the voice
chosen and the one-line reason, any stated constraints, and anything
genuinely unclear — then stop and wait for confirmation before installing
anything. A correction here is the step working as intended, not friction
to route around.The seven style agents
Each is a complete, self-contained persona — a visual style plus that style’s take on all five workflow facets. None contradict the philosophy; they only differ in what the UI looks and moves like.
A worked example
Illustrative, not a screenshot of a real session — but every claim in it (the routing rule applied, the persona’s stated behavior, the code produced) is real, pulled from the actual files above.
I’m starting a new project — a sleep and meditation tracker. No design system yet, just a blank Next.js + Tailwind app. Build me a session-summary card.
1. explicit request — no style named. Skip.
2. existing brand cues — fresh scaffold, nothing to match. Skip.
3. project type — a sleep/ meditation tracker is a wellness product → Soft / Minimal.
Its own file: “Cards drop borders entirely in favor of a soft ambient shadow for separation. Buttons favor fully rounded (rounded-full) shapes with soft fills.” Applied to the real registry components:
<Card className="border-0 shadow-[0_8px_40px_-12px_rgba(0,0,0,0.08)]">
<CardHeader>
<CardTitle>Tonight's session</CardTitle>
<CardDescription>18 minutes · Sleep story</CardDescription>
</CardHeader>
<CardContent>
<Button variant="soft" className="w-full rounded-full">
Start again
</Button>
</CardContent>
</Card>Reference docs
What grounds every persona in real repo content instead of invented conventions.