127 lines
10 KiB
JSON
127 lines
10 KiB
JSON
{
|
||
"skill_name": "shadcn",
|
||
"evals": [
|
||
{
|
||
"id": 1,
|
||
"prompt": "I'm building a Next.js app with shadcn/ui (base-nova preset, lucide icons). Create a settings form component with fields for: full name, email address, and notification preferences (email, SMS, push notifications as toggle options). Add validation states for required fields.",
|
||
"expected_output": "A React component using FieldGroup, Field, ToggleGroup, data-invalid/aria-invalid validation, gap-* spacing, and semantic colors.",
|
||
"files": [],
|
||
"expectations": [
|
||
"Uses FieldGroup and Field components for form layout instead of raw div with space-y",
|
||
"Uses Switch for independent on/off notification toggles (not looping Button with manual active state)",
|
||
"Uses data-invalid on Field and aria-invalid on the input control for validation states",
|
||
"Uses gap-* (e.g. gap-4, gap-6) instead of space-y-* or space-x-* for spacing",
|
||
"Uses semantic color tokens (e.g. bg-background, text-muted-foreground, text-destructive) instead of raw colors like bg-red-500",
|
||
"No manual dark: color overrides"
|
||
]
|
||
},
|
||
{
|
||
"id": 2,
|
||
"prompt": "Create a dialog component for editing a user profile. It should have the user's avatar at the top, input fields for name and bio, and Save/Cancel buttons with appropriate icons. Using shadcn/ui with radix-nova preset and tabler icons.",
|
||
"expected_output": "A React component with DialogTitle, Avatar+AvatarFallback, data-icon on icon buttons, no icon sizing classes, tabler icon imports.",
|
||
"files": [],
|
||
"expectations": [
|
||
"Includes DialogTitle for accessibility (visible or with sr-only class)",
|
||
"Avatar component includes AvatarFallback",
|
||
"Icons on buttons use the data-icon attribute (data-icon=\"inline-start\" or data-icon=\"inline-end\")",
|
||
"No sizing classes on icons inside components (no size-4, w-4, h-4, etc.)",
|
||
"Uses tabler icons (@tabler/icons-react) instead of lucide-react",
|
||
"Uses asChild for custom triggers (radix preset)"
|
||
]
|
||
},
|
||
{
|
||
"id": 3,
|
||
"prompt": "Create a dashboard component that shows 4 stat cards in a grid. Each card has a title, large number, percentage change badge, and a loading skeleton state. Using shadcn/ui with base-nova preset and lucide icons.",
|
||
"expected_output": "A React component with full Card composition, Skeleton for loading, Badge for changes, semantic colors, gap-* spacing.",
|
||
"files": [],
|
||
"expectations": [
|
||
"Uses full Card composition with CardHeader, CardTitle, CardContent (not dumping everything into CardContent)",
|
||
"Uses Skeleton component for loading placeholders instead of custom animate-pulse divs",
|
||
"Uses Badge component for percentage change instead of custom styled spans",
|
||
"Uses semantic color tokens instead of raw color values like bg-green-500 or text-red-600",
|
||
"Uses gap-* instead of space-y-* or space-x-* for spacing",
|
||
"Uses size-* when width and height are equal instead of separate w-* h-*"
|
||
]
|
||
},
|
||
{
|
||
"id": 4,
|
||
"prompt": "I'm building a Next.js app with shadcn/ui (base-nova preset, lucide icons). Build a chat conversation view: a scrollable thread of messages from two different people, each with an avatar, sender name, timestamp, and message bubble. A couple of messages include an image attachment and a PDF file attachment, and there's a 'Today' divider separating the days.",
|
||
"expected_output": "A React component composing MessageScroller, Message, Bubble, Attachment, and Marker from the registry instead of hand-rolled bubble/divider/attachment markup.",
|
||
"files": [],
|
||
"expectations": [
|
||
"Uses MessageScroller (MessageScrollerProvider, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem) for the scrollable thread instead of a raw overflow-y-auto div or ScrollArea",
|
||
"Wraps each row in MessageScrollerItem inside MessageScrollerContent",
|
||
"Uses Message with MessageAvatar/MessageContent/MessageHeader for row layout instead of custom flex divs",
|
||
"Uses Bubble + BubbleContent for the message surface instead of a styled div with bg-muted/bg-primary",
|
||
"Uses Attachment (AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription) for the file and image attachments instead of Item or a custom card",
|
||
"Uses Marker (variant=\"separator\") for the 'Today' divider instead of Separator plus a centered label",
|
||
"Uses semantic color tokens and gap-* spacing; no raw colors like bg-emerald-500 and no space-y-*",
|
||
"Includes \"use client\" when the component uses state or event handlers (isRSC)"
|
||
]
|
||
},
|
||
{
|
||
"id": 5,
|
||
"prompt": "Using shadcn/ui (base-nova preset, lucide icons), build a streaming AI chat UI. The assistant's reply streams in while it generates, the view auto-scrolls to follow the latest content but stops following if the user scrolls up to read earlier messages, a 'jump to latest' button appears when the user has scrolled away from the bottom, and a subtle 'thinking…' shimmer shows while the model is generating.",
|
||
"expected_output": "A React component that delegates scroll/anchor behavior to MessageScroller and uses MessageScrollerButton for jump-to-latest and the shimmer utility for the thinking indicator — no hand-rolled scroll logic or custom shimmer keyframes.",
|
||
"files": [],
|
||
"expectations": [
|
||
"Uses MessageScroller with MessageScrollerProvider (autoScroll) and scrollAnchor on message items for the stick-to-bottom/follow behavior instead of a custom useStickToBottom hook or ResizeObserver/scrollTop wiring",
|
||
"Uses MessageScrollerButton for the jump-to-latest control instead of a hand-built conditional button driven by manual scroll-position state",
|
||
"Uses the shimmer utility class for the 'thinking…' indicator instead of a custom @keyframes or bg-clip-text gradient animation",
|
||
"Wraps each message row in MessageScrollerItem inside MessageScrollerContent",
|
||
"Uses Message + Bubble + BubbleContent for the conversation rows instead of hand-rolled bubble divs",
|
||
"Uses semantic color tokens and gap-* spacing; includes \"use client\" (isRSC)"
|
||
]
|
||
},
|
||
{
|
||
"id": 6,
|
||
"prompt": "Build me a design system using preset b0. Use the DESIGN.md in this folder (a productivity-app spec: white canvas, #0075DE primary, 8px buttons, 12px cards, multi-layer soft shadows, 2px blue focus outline with 2px offset).",
|
||
"expected_output": "A new Vite app created with init --preset b0 --template vite, every component installed, a design system page that renders all of them, and the DESIGN.md tokens mapped onto the shadcn theme.",
|
||
"files": [],
|
||
"expectations": [
|
||
"Creates the app with init --preset b0 --template vite --name <app> and passes the preset code through without decoding it",
|
||
"Installs every component with add --all and reports the component count from disk",
|
||
"Reads the DESIGN.md Do's and Don'ts and Known Gaps before editing the theme",
|
||
"Maps DESIGN.md colors onto shadcn variables in the existing tailwindCssFile and registers extra tokens in @theme inline instead of creating a new CSS file",
|
||
"Pins the radius scale in @theme inline and overrides the shadow scale with the documented multi-layer shadows",
|
||
"Implements the 2px outline focus with an offset instead of keeping the default ring",
|
||
"Changes field control heights together with the button height",
|
||
"Renders every installed component on the design system page and runs the coverage check",
|
||
"Verifies in a browser: typecheck, no console errors, page loads at the top, no horizontal overflow",
|
||
"Shows color roles as surface/foreground pairs with measured contrast ratios",
|
||
"Shows a variant × state matrix for Button with hover, focus, active and disabled pinned via data-preview",
|
||
"Renders do/don't pairs for rules from the DESIGN.md"
|
||
]
|
||
},
|
||
{
|
||
"id": 7,
|
||
"prompt": "Create a Next.js design system app called editorial from preset b0 and apply this DESIGN.md: cream canvas #faf9f5, coral primary #cc785c that darkens only on press, licensed serif display (substitute Cormorant Garamond), Inter body, dark #181715 product surfaces, 40px buttons and inputs.",
|
||
"expected_output": "A Next.js app with all components, serif display type utilities, coral primary with an active-only darker state, dark bands scoped with the dark class, and a showcase page covering every component.",
|
||
"files": [],
|
||
"expectations": [
|
||
"Uses --template next with --preset b0 and --name editorial",
|
||
"Installs the documented font substitutes from Fontsource instead of linking licensed fonts",
|
||
"Defines type-* utilities for the display scale with serif family, weight 400-500 and negative tracking, instead of --text-* theme keys",
|
||
"Uses active: rather than hover: for the primary darker state, per the DESIGN.md",
|
||
"Raises button and input heights to 40px across button, input, input-group, select and related controls",
|
||
"Uses className=\"dark\" on sections or cards to render dark product surfaces with the same components",
|
||
"Avoids the cmdk mount scroll jump on the inline Command example",
|
||
"Reports deliberate deviations from the DESIGN.md (font substitutes, kept hover, derived values)"
|
||
]
|
||
},
|
||
{
|
||
"id": 8,
|
||
"prompt": "Create a new design system using shadcn and the following DESIGN.md. <DESIGN.md: editorial cream canvas, coral primary, 40px controls, 12px cards, 16px hero container, pill badges, shadows rare, generous 32px card padding>",
|
||
"expected_output": "A new app scaffolded without a preset code by picking a style that matches the DESIGN.md geometry, then themed, with a full design system page.",
|
||
"files": [],
|
||
"expectations": [
|
||
"Does not ask for or invent a preset code; passes --base base --preset <style> so init doesn't stop at an interactive prompt",
|
||
"Picks a style matching the DESIGN.md geometry (e.g. maia for generous spacing and 12px+ cards, or sera for editorial serif type) and states the reason in one line",
|
||
"Passes --no-monorepo and --template vite (or next when asked)",
|
||
"Installs all components and builds the design system page per design-system-page.md",
|
||
"Reports contrast pairs below 4.5:1, including the DESIGN.md's own primary/on-primary pair if it fails"
|
||
]
|
||
}
|
||
]
|
||
}
|