AI Agent Skill · Static Rule Linter · Reproduction Evalskills/frame12/SKILL.md

FRAME/12 for coding agents

Most design systems degrade into generic cards and arbitrary spacing after two prompts. FRAME/12 pairs a compact agent skill (SKILL.md) with a deterministic static rule checker (check-frame12.mjs) so AI agents can catch and fix layout, token, and motion drift automatically.

Claude Code · Cursor · Antigravity · WindsurfZero-config markdown skill

Drop SKILL.md into your agent workspace

The skill teaches the 8 non-negotiable grammar rules, storyboard panel composition, component selection table, and pre-flight verification loop in under 140 lines—with progressive disclosure references for full TypeScript signatures and drift fixes.

Standard skill locations for AI coding assistants
Agent	Workspace Path	Activation
Antigravity / Claude Code	`.claude/skills/frame12/SKILL.md` or `skills/frame12/SKILL.md`	Automatic frontmatter discovery on UI tasks
Cursor	`.cursor/rules/frame12.mdc` (copy from SKILL.md)	Attached to .tsx and .css globs
Windsurf / Codex / Generic	`AGENTS.md` + `skills/frame12/`	Referenced in repository instructions

Step 1 · Registry + Skill

Add the kit

Install the component registry and copy skills/frame12/ into your repo:

Install FRAME/12 registry

npx shadcn@latest add https://frame12.dev/r/frame12.json

Step 2 · Automated Linter

Verify with check-frame12.mjs

Catches color literals, illegal gutters, marker misuse, out-of-order cuts, and raw shadcn imports in milliseconds:

Run grammar checker

node scripts/check-frame12.mjs src app

Enforced GrammarStatic source & regex linter + Playwright DOM verification

The 8 non-negotiable rules

Every screen generated with skills/frame12/SKILL.md is verified against these 8 rules.
#	Rule	Requirement
01	Tokens, not literals (color-literal)	Use --f-* and --font-f-* custom properties exclusively. Never write raw hex, rgb/hsl color functions, or font-family names outside frame12.css.
02	Gutter grammar (illegal-gutter)	Gutters inside Scene come strictly from 12px (pair), 20px (scene), and 32px (change). Arbitrary gaps (8px, 16px, 24px) are rejected.
03	Sequential cut numbers (cut-order)	Number panels sequentially starting at C-01 in reading order. Visual order, reading order, and DOM order always match.
04	Marker yellow discipline (marker-misuse)	--f-marker only sits as a background under --f-marker-ink text or inked target dots. Never a line, chart series, or text color.
05	Motion on twos	Discrete state changes step at 12fps (83.33ms poses). Hover, scroll, drag, typing, and crosshairs stay immediate. Reduced motion forces instant cuts.
06	Accessibility (WCAG AA)	4.5:1 body / 3:1 large text contrast in light & dark themes, visible :focus-visible outline, named controls, and a <details className="f12-tbl"> table for every chart.
07	Describe the craft, never name people	Never cite specific artists, studios, or franchises in code, comments, or copy. Refer strictly to panels, screentone, registration pegs, exposure sheets, and twos.
08	Zero external chart or motion libraries	Do not import recharts, chart.js, d3, framer-motion, or gsap. Use @/components/frame12 and @/hooks/use-on-twos.

Benchmark Promptseval/prompts/01-settings.md

01 · SaaS Workspace & Dispatch Settings

Environment switcher, validated threshold input with marker alert, paired delivery health KPIs (12px slanted gutter), API keys table, and revocation modal.

Prompt (eval/prompts/01-settings.md)

Build a workspace and notification settings page for a checkout recovery SaaS product using @/components/frame12 and following skills/frame12/SKILL.md.
1. Sheet Header: registration pegs, eyebrow tags, title "Workspace & Dispatch Settings", and SegmentedControl for Production / Staging / Sandbox.
2. Scene 1 (gutter="scene", layout="split"):
   - Panel 1 (establishing): Input fields for Workspace display name, Alert lift threshold (%) with validation alert when < 10, Webhook endpoint URL, Select for Primary delivery channel, and Save/Reset buttons with a Tooltip.
   - PanelPair (2 & 3 across 12px slanted gutter): Webhook delivery rate Metric + ToneSpark over Mean dispatch latency Metric + ToneSpark.
3. Scene 2 (gutter="change", layout="equal"):
   - Panel 4: API Signing Keys semantic Table + DropdownMenu.
   - Panel 5: Danger Zone with Balloon warning and modal Dialog (cut 6) to revoke active signing secret.

eval/RESULTS.md3 product archetypes · 17/17 linter unit tests

Reproduction benchmark matrix

Three non-dashboard product archetypes were built from plain prompts using only SKILL.md and @/components/frame12, then audited across desktop (1280px) and mobile (390px) viewports in light and dark themes.

Summary from eval/RESULTS.md (including pre-check mobile container-query fix cycle)
Verification Check	01-settings	02-landing	03-table
check-frame12.mjs violations	0	0	0
TypeScript (tsc --noEmit)	Pass	Pass	Pass
Sequential cuts & reading order	5 + modal	5 + modal	5 + modal
Gutters (12 / 20 / 32px only)	Pass	Pass	Pass
WCAG AA contrast (Light & Dark)	Pass	Pass	Pass
Visible :focus-visible (all tab stops)	100%	100%	100%
1280px & 390px zero overflow	Pass	Pass	Pass