Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Shade — ShadCN install guardrails · tryghost | DecimalAI

frontendby tryghost

Shade — ShadCN install guardrails

tryghost/Shade ShadCN install

Source tryghost/ghost ↗License MIT

Guardrails for running `pnpm dlx shadcn@latest add` in Shade — never overwrite existing components, fresh branch first, swap raw colours for semantic tokens after integrating.

SkillScore86Maintained

Automatic

Frontend / UI pack

Last verified 9/28/2026

What it changes

Passed 17 of 20 test cases with the skill, and 9 of 20 without it.

Without skill45%

With skill86%

Checks it passed that the model alone missed

Replaces bg-white with bg-surface-elevated.
Maps form control borders to border-control-border.
Maps general chrome borders to border-border-default.

and 7 more in the full report

9 fixed10 passed either way3 still failing0 broke

Pass-rate lift: +41 pp
Tokens: +9%
Agent turns: 0%
Response time: -45%

Model gemini-3.6-flashMeasured 9/28/2026v119 of 22 cases passed with skill · 20 comparable

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/tryghost-shade-shadcn-install/SKILL.md https://app.decimal.ai/s/tryghost-shade-shadcn-install/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add tryghost-shade-shadcn-install, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/tryghost-shade-shadcn-install/ and pins it in .decimal/skills.lock

decimalai skills add tryghost-shade-shadcn-install

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/tryghost-shade-shadcn-install/SKILL.md https://app.decimal.ai/s/tryghost-shade-shadcn-install/SKILL.md

Raw file: /s/tryghost-shade-shadcn-install/SKILL.md ↗ · machine-readable summary at /s/tryghost-shade-shadcn-install.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 9 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 9

Prompt

When cleaning up a raw imported component from ShadCN, it uses bg-white and text-zinc-500. What specific Shade semantic tokens replace these raw color utility classes?

What was checked, without and with the skill
Checked	Without skill	With skill
Replaces bg-white with bg-surface-elevated.	Missed	Passed
Replaces text-zinc-500 with text-muted-foreground.	Passed	Passed

case-19 · gemini-3.6-flash · 9/28/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md55 linessingle file

Shade — ShadCN install guardrails

Most new Shade components start from a ShadCN install. The CLI is destructive by default — follow these guardrails.

Command

pnpm dlx shadcn@latest add <component-name>

(Use pnpm, not npx / yarn / bunx. Ghost is pnpm.)

Before running

Be on a fresh branch. The CLI's diff is mixed in with your branch's changes otherwise.
Check if the component already exists in apps/shade/src/components/ui/. If it does, do not run the CLI against the repo — generate into a scratch repo and manually port the parts you want. The CLI will offer to overwrite, and you'd lose Shade customisations.

During the prompts

If asked to overwrite an existing file: choose No. Always.
If asked about path aliases: keep @/.

After the file lands — required cleanup

Raw ShadCN output is not Shade-quality yet. Do all of these:

Swap raw colours for semantic tokens. ShadCN ships things like bg-white, border-gray-200, text-zinc-500. Replace with bg-surface-elevated, border-border-default, text-muted-foreground, etc. See the shade-tokens-not-hex skill for the inventory.
Remove any dark: colour variants. Semantic tokens flip automatically. See shade-no-dark-variants.
Use the @/ alias for internal imports (@/lib/utils, @/components/ui/...) — not relative paths.
Ensure all four required states work: default, hover, focus-visible, disabled. (focus-visible: only — never focus:.)
Trim props that hint at a specific surface. If a prop name reads like product workflow (isMembersPage, layoutMode), it doesn't belong on a generic Component — extract a Pattern instead.
For form controls, drive border/background/focus through the inputSurface recipe instead of duplicating the chrome. See shade-input-surface-recipe.
Add a sibling <name>.stories.tsx if one isn't already there. Copy useful examples from https://ui.shadcn.com/docs/components/<name> into stories. See shade-new-component.
forwardRef + className merge via cn() — both are required.

What ShadCN gets wrong that Shade fixes

ShadCN default	Shade convention
`bg-background dark:bg-background`	`bg-background` (token already flips)

Track record

Benchmark

17 / 20

test cases passed, vs 9 / 20 without

Adoption

Users: 1
Times used: 20

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v5 — 8/31/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

tryghost / ghost

.agents/skills/shade-shadcn-install/SKILL.md

View on GitHub ↗

License MITImported 8/31/2026Version v1

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

Shade — ShadCN install guardrails

Command

Before running

During the prompts

After the file lands — required cleanup

What ShadCN gets wrong that Shade fixes

Track record

Benchmark

Adoption

SkillSafety

Source

Related skills