shadcn-ui

Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.

Invalid

This skill can't be scored yet

Validation errors are blocking scoring. Review and fix them to unlock Quality, Impact and Security scores. See what needs fixing →

Evaluation results

100%

Integrate shadcn/ui into an Existing Vite + React Project

Vite project initialization and configuration

Criteria

Without context

With context

components.json present

100%

rsc set to false

100%

tsconfig path alias

100%

vite.config alias

100%

cn() uses clsx + twMerge

100%

HSL CSS variables

100%

Dark mode variables

100%

Tailwind darkMode class

100%

tailwindcss-animate plugin

100%

components/ui directory

100%

Correct init command

100%

Add component commands

100%

Without context: $0.4000 · 1m 43s · 17 turns · 70 in / 7,659 out tokens

With context: $0.9059 · 2m 24s · 33 turns · 4,694 in / 10,330 out tokens

100%

Build an Employee Onboarding Form

Form building with validation pattern

Criteria

Without context

With context

react-hook-form used

100%

zod schema defined

100%

zodResolver used

100%

Form sub-components

100%

Wrapper not in ui/

100%

Toast on success

100%

react-hook-form in packages

100%

zod in packages

100%

@hookform/resolvers in packages

100%

Imports from @/components/ui

100%

TypeScript types inferred

100%

Select for department

100%

Without context: $0.3127 · 1m 2s · 18 turns · 25 in / 4,104 out tokens

With context: $0.5132 · 1m 19s · 21 turns · 26 in / 4,787 out tokens

100%

Theming and Custom Component Variants for a SaaS Dashboard

Component customization, theming, and dark mode

Criteria

Without context

With context

HSL format variables

100%

Dark mode .dark block

100%

cva for brand variant

100%

Wrapper not in ui/

100%

next-themes ThemeProvider

100%

ThemeProvider attribute=class

100%

suppressHydrationWarning on html

100%

suppressHydrationWarning explained

100%

next-themes package listed

100%

Do not modify components/ui

100%

defaultTheme system

100%

useTheme for toggle

100%

Without context: $0.3448 · 1m 29s · 16 turns · 19 in / 5,493 out tokens

With context: $0.6450 · 1m 33s · 26 turns · 426 in / 5,644 out tokens

Repository: google-labs-code/stitch-skills
Commit: ad0b5cc

Evaluated: 12 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Integrate shadcn/ui into an Existing Vite + React Project Build an Employee Onboarding Form Theming and Custom Component Variants for a SaaS Dashboard

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.