← All skills
ui-styling
80 / 100 · Low risk
Fine to try.
By zircote/.claude (GitHub) · design · 25 stars · scanned at commit 0f0276a
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
Works with any agent that supports SKILL.md skills.
What this skill can do
Downloads and installs other software
The author does not mention this.
Found in 11 places.
Show 8 more
- skills/ui-styling/references/shadcn-components.md, line 10
npx shadcn@latest add button card dialog # Multiple - skills/ui-styling/references/shadcn-components.md, line 11
npx shadcn@latest add --all # All components - skills/ui-styling/scripts/shadcn_add.py, line 86
"shadcn not initialized. Run 'npx shadcn@latest init' first", - skills/ui-styling/scripts/shadcn_add.py, line 129
return False, "npx not found. Ensure Node.js is installed" - skills/ui-styling/scripts/shadcn_add.py, line 144
"shadcn not initialized. Run 'npx shadcn@latest init' first", - skills/ui-styling/scripts/shadcn_add.py, line 174
return False, "npx not found. Ensure Node.js is installed" - skills/ui-styling/scripts/tests/test_shadcn_add.py, line 195
"""Test component addition when npx is not found.""" - skills/ui-styling/scripts/tests/test_shadcn_add.py, line 202
assert "npx not found" in message
Runs commands on your computer
The author does not mention this.
Found in 15 places.
Show 12 more
- skills/ui-styling/SKILL.md, line 215
python scripts/shadcn_add.py button card dialog - skills/ui-styling/SKILL.md, line 221
python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter - skills/ui-styling/scripts/shadcn_add.py, line 111
result = subprocess.run( - skills/ui-styling/scripts/shadcn_add.py, line 125
except subprocess.CalledProcessError as e: - skills/ui-styling/scripts/shadcn_add.py, line 156
result = subprocess.run( - skills/ui-styling/scripts/shadcn_add.py, line 170
except subprocess.CalledProcessError as e: - skills/ui-styling/scripts/tests/test_shadcn_add.py, line 130
with patch("subprocess.run") as mock_run: - skills/ui-styling/scripts/tests/test_shadcn_add.py, line 156
@patch("subprocess.run") - skills/ui-styling/scripts/tests/test_shadcn_add.py, line 180
@patch("subprocess.run") - skills/ui-styling/scripts/tests/test_shadcn_add.py, line 183
mock_run.side_effect = subprocess.CalledProcessError( - skills/ui-styling/scripts/tests/test_shadcn_add.py, line 193
@patch("subprocess.run") - skills/ui-styling/scripts/tests/test_shadcn_add.py, line 221
@patch("subprocess.run")
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'ui-styling' ] || [ -L ~/.agents/skills/'ui-styling' ]; then echo 'A skill folder named ui-styling already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/zircote/.claude' "$d" && git -C "$d" checkout --quiet '0f0276a9ba3e2c6cf1c1acb586ebc270560b2d69' -- 'skills/ui-styling' && mkdir -p ~/.agents/skills && cp -R "$d"/'skills/ui-styling' ~/.agents/skills/'ui-styling' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'ui-styling' ~/.claude/skills/'ui-styling' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for zircote/.claude shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/zircote/.claude/)
Score history
| Date | Version | Score |
|---|
| 2026-11-07 | 0f0276a | 80 |
Also found in
Identical copies of this skill exist at:
- duongthinh03/portfolio/.agents/skills/ui-styling
- duongthinh03/portfolio/.claude/skills/ui-styling