{
	"skill_name": "shadcn-svelte",
	"evals": [
		{
			"id": 1,
			"prompt": "I'm building a SvelteKit app with shadcn-svelte (nova style, 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 Svelte component using Field.FieldGroup, Field.Field, ToggleGroup, data-invalid/aria-invalid validation, gap-* spacing, and semantic colors.",
			"files": [],
			"expectations": [
				"Uses Field.FieldGroup and Field.Field 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-svelte with tabler icons.",
			"expected_output": "A Svelte component with Dialog.Title, Avatar with Avatar.Fallback, data-icon on icon buttons, no icon sizing classes, @tabler/icons-svelte imports.",
			"files": [],
			"expectations": [
				"Includes Dialog.Title for accessibility (visible or with sr-only class)",
				"Avatar includes Avatar.Fallback",
				"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-svelte) instead of @lucide/svelte when tabler is configured",
				"Uses shadcn-svelte Dialog patterns (e.g. Dialog.Trigger wrapping the control, or bind:open on Dialog.Root)"
			]
		},
		{
			"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-svelte with lucide icons.",
			"expected_output": "A Svelte component with full Card composition, Skeleton for loading, Badge for changes, semantic colors, gap-* spacing.",
			"files": [],
			"expectations": [
				"Uses full Card composition with Card.Header, Card.Title, Card.Content (not dumping everything into Card.Content)",
				"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-*"
			]
		}
	]
}