shadcn (Awesome Design Skills)
3/5 out of 5. Read the verdictA shadcn/ui-inspired style with minimal components, a monochrome palette and utility-first patterns. From bergside's Awesome Design Skills.
First screen only. Switch to side by side to read the full pages.
Scroll either page; the other follows.Full shadcn (Awesome Design Skills) pageFull baseline
Every skill gets the same Tally brief, alone in a clean project. How we test
Our verdict
3/5 out of 5
Passed the cut
shadcn gives Tally the familiar shadcn/ui look: Geist type, thin zinc borders, black buttons, Fira Code numbers and a solid black Plus card. The dashboard has a sidebar with the household switcher and color only for status. It is clean and correct, but it is what many AI-built apps already look like. Pick it if you build on shadcn/ui and want pages that match.
Pick it for
- shadcn/ui projects
- SaaS dashboards
- developer tools
- admin panels
Skip it for
- brands that want to stand out
- consumer apps that need warmth
- editorial sites
Colors
Observations
- looks like a stock shadcn template
Install
1 Run in your terminal
npx degit bergside/awesome-design-skills/skills/shadcn#main .claude/skills/shadcn2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini
It tells your tool to install this from its source repository.
This install is for Claude Code only; for other agents use Copy prompt or copy the skill folder.
Copies just this skill's folder into your project's .claude/skills.
Check the source for the latest instructions.
We tested the shadcn skill from this repo.
Details
- Type
- Skill
- GitHub stars
- 3,255*
- Updated
- 4mo ago
- License
- MIT
- Best for
- Visual directionDashboards
Test runOpus 5.5Claude Code 2.1.303Oct 18, 2026generated in 5 minabout $1.18 at API pricescommit f631a09
* Stars are for the whole bergside/awesome-design-skills repository.
Made this skill?Put your score on your README, and claim this page for a link to your site. 
1. Put your score on your README
[](https://skillsfordesign.com/s/awesome-design-skills-shadcn/) The badge links here. If a retest changes the score, it updates by itself.
2. Claim this page
Get a free backlink to your site.
- A followed link, not nofollow. From the page about your skill, on a site about design skills, to your portfolio, product or studio. Search engines count it.
- Your name on the page. Credited as the maker, right under the description, where every visitor sees it.
- Free. Live within a few days.
How it will look
Thanks, we have it.
We'll check the repo and email you when your name is on the listing.
Similar
Same brief, other skills
Blue Laser Clean Glass Layout (Meng To)
Blue Laser Clean Glass Layout puts Tally on near-black with a thin blue light beam, frosted glass panels and Inter Tight with mono labels. The dashboard is the stronger page: clear cards, blue bars and readable tables. The mobile dashboard scrolls sideways. Pick it for technical or premium dark products.
updated today
CSS Border Gradient (Meng To)
CSS Border Gradient takes Tally dark: deep navy panels with faint mint-edged gradient borders, Fraunces headlines over Manrope on the landing and Inter on the dashboard, with mint, amber and coral accents. The dashboard is clean and colorful without getting loud. Pick it if you want a polished dark product with a soft glow.
updated today
Dark Blue Contrasting Clean (Meng To)
Dark Blue Contrasting Clean gives Tally a deep navy page with bright cobalt gradient blocks, crisp frames, Inter and lots of JetBrains Mono labels. The dashboard leads with a cobalt summary card and stays clear and readable. Pick it for confident, technical-feeling products.
updated today
Dark Glass Clean Layout (Meng To)
Dark Glass Clean Layout is the neutral version of dark mode: near-black zinc surfaces, frosted cards, Inter with mono labels and almost no color beyond a pale green. It looks expensive and quiet, but both pages scroll sideways on a phone. Pick it for premium, understated products.
updated today
Also for these tasks
Power (Awesome Design Skills)
Power gives Tally a black, monochrome page with big uppercase Oswald headlines, thin grid lines and outlined display text. The dashboard is black and white too, with JetBrains Mono numbers and green, amber and red only for status. It is strong and consistent, but the mobile dashboard scrolls sideways. Pick it for premium dark brands.
updated 4mo ago
Sleek (Awesome Design Skills)
Sleek gives Tally a light, minimal page: Inter, a neutral palette with one blue accent and an 8px grid. The dashboard puts a dark "Left to budget" card at the top of pale slate cards. It is tidy and readable, but generic. Pick it as a clean neutral base.
updated 4mo ago
Paper (Awesome Design Skills)
Paper gives Tally a ledger feel: warm grainy off-white, black Montserrat headlines, Roboto body text, PT Mono labels and violet as the only accent. The landing hero is a budget sheet with a "synced" stamp and a taped-on note. It is tidy and has a small idea, but it stays close to a plain light page, and the mobile dashboard scrolls sideways. Pick it for calm, print-flavored products.
updated 4mo ago
Artistic (Awesome Design Skills)
Artistic sets Tally as an Art Deco poster: Limelight display type, JetBrains Mono body text, navy and white sections and solid blue and violet blocks with hard offset shadows. The dashboard keeps the dark sidebar, thick outlines and big colored summary blocks. It has a real point of view, but the mobile dashboard scrolls sideways. Pick it for expressive, poster-like brands.
updated 4mo ago