shadcn-ui

1 stars 2 forks
17
D

Build beautiful, accessible UIs with shadcn/ui components. Use this skill when creating forms, dialogs, tables, sidebars, or any UI components in Next.js. Covers installation, component patterns, react-hook-form integration with Zod validation, and dark mode setup.

Also in: testing ci cd

Third-Party Agent Skill: Review the code before installing. Agent skills execute in your AI assistant's environment and can access your files. Learn more about security

Installation for Agentic Skill

View all platforms →
skilz install mjunaidca/mjs-agent-skills/shadcn-ui
skilz install mjunaidca/mjs-agent-skills/shadcn-ui --agent opencode
skilz install mjunaidca/mjs-agent-skills/shadcn-ui --agent codex
skilz install mjunaidca/mjs-agent-skills/shadcn-ui --agent gemini

First time? Install Skilz: pip install skilz

Works with 22+ AI coding assistants

Cursor, Aider, Copilot, Windsurf, Qwen, Kimi, and more...

View All Agents
Download Agent Skill ZIP

Extract and copy to ~/.claude/skills/ then restart Claude Desktop

1. Clone the repository:
git clone https://github.com/mjunaidca/mjs-agent-skills
2. Copy the agent skill directory:
cp -r mjs-agent-skills/docs/taskflow-vault/skills/engineering/shadcn-ui ~/.claude/skills/

Need detailed installation help? Check our platform-specific guides:

Related Agentic Skills

Agentic Skill Details

Stars
1
Forks
2
Type
Technical
Meta-Domain
development
Primary Domain
javascript
Market Score
17

Agent Skill Grade

D
Score: 67/100 Click to see breakdown

Score Breakdown

Spec Compliance
11/15
PDA Architecture
15/30
Ease of Use
19/25
Writing Style
8/10
Utility
16/20
Modifiers: -2

Areas to Improve

  • Description needs trigger phrases
  • No TOC in 853-line file
  • No layered references

Recommendations

  • Focus on improving Pda (currently 15/30)
  • Address 2 high-severity issues first
  • Add trigger phrases to description for discoverability

Graded: 2026-01-24

Developer Feedback

I've been digging through component libraries lately, and shadcn-ui's approach to composition caught my attention—especially how it handles the abstraction layer between your design system and actual usage patterns, though the 67/100 suggests there might be some friction in how that story gets communicated.

Links:

The TL;DR

You're at 67/100, which puts you in D territory. This is based on Anthropic's best practices for agentic skills. Your Writing Style is solid at 8/10—the technical voice is clean and you've got good imperative structure. But Progressive Disclosure Architecture is dragging you down at 15/30. That's the real bottleneck here.

What's Working Well

  • Clear triggers in your description - "forms, dialogs, tables, sidebars" gives agents concrete activation points
  • Comprehensive component coverage - You're hitting the real problems developers face: forms with validation, dark mode, tables, dialogs
  • Good imperative tone - Section headers and code comments are directive and clear; this is how skills should sound
  • Practical examples - You're showing multiple variants and component composition patterns, not just theory

The Big One: Split That 853-Line File

This is killing your PDA score. Right now you've got everything in one massive SKILL.md file—all 10 core patterns with full boilerplate, imports repeated endlessly, and zero layered references. That's not scalable, and it tanks your token economy.

Here's the fix: Create a references/ directory and split your patterns:

  • references/forms.md - Form patterns with validation (extract lines ~200-300)
  • references/tables.md - Table patterns (extract ~50-100 lines)
  • references/dialogs.md - Dialog pat...

Report Security Issue

Found a security vulnerability in this agent skill?