How do I install the Produced Skill skill?

Run npx skillmds@latest add vercel-labs/produced-skill-13 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Produced Skill skill do?

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. It is listed under Coding & Dev Tools on SkillMD.

Is Produced Skill safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Produced Skill?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Produced Skill free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Produced Skill?

Vercel Labs (@vercel-labs) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Produced Skill by vercel-labs — Agent Skill

Name: Produced Skill
Author: Vercel Labs

Produced Skill

Test fixture — produced-skill ships ≥1 Hard Rule referencing body/root/provider + a surface token AND the cited shell/<slug> resolves to a Layer B row in produced anti-patterns.md. SHELL_INVARIANTS must PASS.

Vercel Labs 373e020 4 files · 3.0 KB Updated Sep 17, 2026 28.7k repo stars

File contents

Setup

Source: <reference-project> @ src/app/layout.tsx

import { ThemeProvider, BaseSurface } from 'ds-react'
import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider>
          <BaseSurface style={{ backgroundColor: 'var(--ds-surface-default)' }}>
            {children}
          </BaseSurface>
        </ThemeProvider>
      </body>
    </html>
  )
}

Companion CSS — src/app/globals.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 <BaseSurface style> 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.
<ThemeProvider> 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.

---name: produced-skill-13description: Test fixture — produced-skill ships ≥1 Hard Rule referencing body/root/provider + a surface token AND the cited shell/<slug> resolves to a Layer B row in produced anti-patterns.md. SHELL_INVARIANTS must PASS.---## SetupSource: `<reference-project>` @ `src/app/layout.tsx````tsximport { ThemeProvider, BaseSurface } from 'ds-react'import './globals.css'export default function RootLayout({ children }) { return ( <html lang="en"> <body> <ThemeProvider> <BaseSurface style={{ backgroundColor: 'var(--ds-surface-default)' }}> {children} </BaseSurface> </ThemeProvider> </body> </html> )}```### 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 `<BaseSurface style>` 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`.- `<ThemeProvider>` 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 checksAfter 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.

Frequently asked questions