# Produced Skill > Test fixture — produced-skill ships ≥1 Hard Rule referencing body/root/provider + a surface token AND the cited shell/ resolves to a Layer B row in produced anti-patterns.md. SHELL_INVARIANTS must PASS. - Skill: `vercel-labs/produced-skill-13` (Agent Skill, multi-file: 4 files) - Install (CLI): `npx skillmds@latest add vercel-labs/produced-skill-13` - Raw SKILL.md: https://api.skillmd.com/api/skills/vercel-labs/produced-skill-13/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: Vercel Labs (https://skillmd.com/u/vercel-labs) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/vercel-labs/produced-skill-13 --- ## Setup Source: `` @ `src/app/layout.tsx` ```tsx import { ThemeProvider, BaseSurface } from 'ds-react' import './globals.css' export default function RootLayout({ children }) { return ( {children} ) } ``` ### Companion CSS — src/app/globals.css ```css @import "ds-themes/light.css"; body { background-color: var(--ds-surface-default); color: var(--ds-text-default); } ``` ## When to Load References | Trigger | Files to load | Notes | |---|---|---| | user composes a screen, page, or section layout | references/design-craft.md | DS-agnostic design-craft defaults, shipped verbatim by the meta-skill — the DS wins on conflict | | button asks | references/components/button.md | per-component file | ## Hard rules - The body/root MUST paint with `var(--ds-surface-default)` via either the `` prop OR `body { background-color: var(--ds-surface-default); color: var(--ds-text-default); }` in `globals.css`. A token-painted component on an unpainted shell is the canonical mode-mismatch bug — see `references/anti-patterns.md` `shell/unpainted-body`. - `` MUST wrap children, not render as a sibling — provider context only reaches descendants, see `shell/provider-missing-content-wrap`. - Any prop, variant, token, or asset the agent cannot ground in source gets a literal `[VERIFY]` marker inline. ## Final checks After generating UI: cite each component used to its source file; list any `[VERIFY]` markers; name the screen-level prompt built; AND confirm shell parity: the page/root surface paints with `var(--ds-surface-default)`; the provider wraps children, not siblings. In scope: tokens, assets, component descriptions, component APIs.