frontend by giuseppe-trisciuoglio
shadcn/ui Component Patterns giuseppe-trisciuoglio/shadcn-ui
Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components.
What it changes View full report → Passed 20 of 21 test cases with the skill, and 17 of 21 without it.
Without skill 82%
With skill 95%
Checks it passed that the model alone missed and 1 more in the full report
3 fixed18 passed either way1 still failing0 broke
Pass-rate lift +14 pp
Tokens +128%
Agent turns 0%
Response time -38% Model gemini-3.6-flashMeasured 8/21/2026 v1 21 of 22 cases passed with skill · 21 comparable
Use this skill Claude Code DecimalAI agent CLI & files
Save it into your project's skills folder. Claude Code picks it up in its next session.
curl -fsSL --create-dirs -o .claude/skills/giuseppe-trisciuoglio-shadcn-ui/SKILL.md https://app.decimal.ai/s/giuseppe-trisciuoglio-shadcn-ui/SKILL.md Copy command Copy SKILL.md
Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add giuseppe-trisciuoglio-shadcn-ui, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"
Linked stays up to date: your agents get the author's new versions automatically.
Editable copy is yours to change; the author's updates won't reach it.
Install linked skill Create editable copy
1 · One-time — install the CLI (
docs ↗ )
$ pip install "decimalai>=0.15"Copy
2 · Get the skill — writes .agents/skills/giuseppe-trisciuoglio-shadcn-ui/ and pins it in .decimal/skills.lock
$ decimalai skills add giuseppe-trisciuoglio-shadcn-uiCopy
Copy link Copy README badge Copy SKILL.md No CLI? Get the same file — curl · raw file $ curl -fsSL --create-dirs -o .claude/skills/giuseppe-trisciuoglio-shadcn-ui/SKILL.md https://app.decimal.ai/s/giuseppe-trisciuoglio-shadcn-ui/SKILL.mdCopy
Safety checks: 3 of 3 passed
Code scan Clean Intent Passed Content Clean
Overview Benchmark Contents Activity Versions 1 Ratings 0
See it in action One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
Prompt Which headless component primitive library provides built-in accessibility and keyboard navigation for these UI components?
What was checked, without and with the skill Checked Without skill With skill Identifies Radix UI (@radix-ui) as the underlying primitive library.
Show both answers
What's inside The instructions your model reads when the skill loads.
SKILL.md 305 lines 12 files
shadcn/ui Component Patterns
Build accessible, customizable UI components with shadcn/ui, Radix UI, and Tailwind CSS.
Overview
Components are copied into your project — you own and customize the code
Built on Radix UI primitives for full accessibility
Styled with Tailwind CSS and CSS variables for theming
CLI-based installation: npx shadcn@latest add <component>
When to Use
Activate when user requests involve:
"Set up shadcn/ui", "initialize shadcn", "add shadcn components"
"Install button/input/form/dialog/card/select/toast/table/chart"
"React Hook Form", "Zod validation", "form with validation"
"accessible components", "Radix UI", "Tailwind theme"
"shadcn button", "shadcn dialog", "shadcn sheet", "shadcn table"
"dark mode", "CSS variables", "custom theme"
"charts with Recharts", "bar chart", "line chart", "pie chart"
Quick Reference
Available Components
When it activates Automatically, when a task matches.
Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.
Track record Benchmark 20 / 21
test cases passed, vs 17 / 21 without
Adoption
Users 0
Times used 0 View activity → Safety and source details
SkillSafety ✓ 3 of 3 passed ✓ Code scan 15 of 15 checks clean
0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026
View 15 scanner checks live_secret remote_code_execution reverse_shell data_exfiltration ssrf_metadata agent_snooping anti_refusal destructive_commands obfuscated_unicode unicode_homoglyph opaque_blob suspicious_url tool_overreach trigger_abuse prompt_injection_phrasing
✓ Intent Safe
LLM judge · does the skill do what it claims
✓ Content Clean
LLM judge · policy & harmful-content review
Source Imported giuseppe-trisciuoglio / developer-kit
plugins/developer-kit-typescript/skills/shadcn-ui/SKILL.md
View on GitHub ↗ License MITImported 8/3/2026Version v1Bundled 11 files