bbb2f41591
- Created `openspec-ff-change` skill for fast-forward artifact creation. - Introduced `openspec-new-change` skill for structured change creation. - Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow. - Added `openspec-sync-specs` skill for syncing delta specs to main specs. - Implemented `openspec-verify-change` skill for verifying implementation against change artifacts. - Updated `.gitignore` to exclude OpenSpec generated files. - Added `skills-lock.json` to manage skill dependencies.
48 lines
3.0 KiB
JSON
48 lines
3.0 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-*"
|
|
]
|
|
}
|
|
]
|
|
}
|