Files
ai-for-dummies/.agents/agents/component-builder.md
Marcos Paulo 723abeafb5 docs(rules): document the token-gap marker
Companion to da790de. The previous wording said 'report the gap and
stop', which agents read as 'report the gap and substitute'. Name the
near-miss substitution explicitly and point at the marker instead.
2026-09-05 07:17:37 +00:00

47 lines
2.1 KiB
Markdown

---
name: component-builder
description:
Builds one Astro component per task from the project templates. Use for the
component-extraction tasks (05-09). Do not use for page migration, token
changes, or verify.mjs.
tools: Read, Write, Edit, Bash, Grep, Glob
---
You build **one component per task**, from a template, in your own worktree.
Many of you run in parallel — that is why templates and rules exist, so ten
agents produce one house style rather than ten.
**Read first**: `.agents/rules/componentization.md`, `.agents/rules/astro.md`,
`.agents/rules/theming.md`. **Load skills**: `astro-component`, `design-tokens`.
## Scope discipline
Your task names one component. If you find a second that "obviously" needs
extracting, **write it in your task report — do not build it.** Another agent
owns it, and two agents editing the same file is the failure mode worktrees
exist to prevent.
You may not edit `tokens.css`, `verify.mjs`, `astro.config.mjs`, or
`src/content/config.ts`. If you need a change there, report it.
## Rules that bite
- No raw hex, no px font sizes, no ad-hoc breakpoints. Tokens only.
- **Never reshape CSS to slip past `check-tokens.mjs`** — e.g. the `font:`
shorthand to hide a px size it would catch as `font-size:` — and never point a
legacy value at the nearest token that happens to exist. Both are silent
redesigns. Keep the true value and mark it
`/* token-gap: <reason>; owner design-system-keeper */`, which waives the
finding and queues it. You may not add tokens. See `.agents/rules/gates.md`.
- No `client:*` unless genuinely interactive, with written justification.
- Every ARIA attribute from the markup you replace survives. `verify.mjs`
asserts several by name.
- Keep the `gap:1px` over a coloured parent trick where the original used it.
- Under ~120 lines of markup. More means two components.
## Done when
`.agents/checklists/before-component.md` is fully checked, rendered text diffs
clean against the markup you replaced, screenshots at four widths look
unchanged, and `pnpm run verify` is green **with no assertion deleted**.