Skills

Agent skills for designers who ship production code. They are the guardrails I use to ship with
Claude Code as a founding designer: build a Figma design exactly, keep the design system honest,
and get every change from idea to merged without an agent ever pulling a trigger a human should.

Agents write code quickly. What makes that code mergeable is structure: a fixed order of
operations, a written rulebook, and checks that don't trust the agent or the author. These skills
are that structure, with the company-specific parts removed.

Install

npx skills@latest add Kemdirimakujuobi/skills

Then copy what you need from templates/ into your repo and fill in the
configuration table in AGENTS.md. The skills read your base branch, preflight script, changelog
and docs locations from there, and fall back to sensible defaults when something is missing.

The rules underneath

• Agents may push branches and open draft PRs. Agents never merge, deploy, or push to the base
  branch. A human pulls the trigger. Approval in one message does not carry to the next.
• One rulebook, three readers. STANDARDS.md is read by the pre-push skill, the review bot and
  the human reviewer. Every rule has an ID, so every finding cites one. No rule ID, no comment.
• The model finds problems; a deterministic check decides whether they block. Fail closed.
• The design file is the source of truth. No agent is ever in the token value path.
• Every mistake becomes a rule. RETRO.md → a skill step → a STANDARDS rule → a CI check.
  starting-a-change reads the latest retro before every branch, so a lesson reaches every
  session after it.

The life of a change

idea
 └─ authoring-a-prd
     └─ starting-a-change
         ├─ figma-import
         ├─ building-components / design-tokens
         └─ figma-build
             └─ pre-push-review
                 ├─ updating-the-changelog
                 ├─ docs-sync-review
                 └─ mobile-responsive-review
                     └─ PR → CI + review bot → a human merges
                         └─ landing-a-design-system-change

Reference

Workflow

• authoring-a-prd: turns a brief into a PRD with user
  stories, fields, analytics events and numbered acceptance criteria. Every product claim traces
  to a source; anything unconfirmed becomes an open question. Seeding an issue tracker needs
  explicit confirmation. Ships with TEMPLATE.md.
• starting-a-change: runs before any branch exists.
  Names it <area>/<slug>, cuts it from a fresh base, refuses to stack, and carries the latest
  retro's traps into the plan.
• pre-push-review: runs before every push. Greps the diff
  against the rulebook, runs two review passes and the local gates, checks size and evidence, then
  calls the three sub-reviews below where they apply.
• updating-the-changelog: every PR adds a
  customer-facing changelog entry or records Changelog: none — <reason>.
• docs-sync-review: maps the diff to the help pages it
  makes wrong and drafts the fix in the same PR.
• mobile-responsive-review: scans added markup
  for what breaks at 360–430px and drafts max-md: fixes that leave desktop unchanged. Ships with
  a scanner script.

Design system

• building-components: a headless primitive with
  every part is the base, your semantic tokens are the only paint, and the doc contract is the
  finish line.
• design-tokens: tokens travel from the design file through
  a Git sync and a deterministic CI transform. Agents explain and review token diffs; they never
  produce a value.
• landing-a-design-system-change: a merge
  is not delivery. Checks the release was declared, the package published, the product bumped,
  and the installed build actually contains the change.

Figma fidelity

• figma-import: enforces the extraction order. Full node
  first, then spacing, colour, type, radii and every state. The screenshot comes last, only to
  verify against.
• figma-build: the 1:1 round-trip. Build, render, measure,
  diff, fix, repeat until the measured difference is zero in every state and both themes. Ships
  with MEASURE.md.

Templates

The story of how this setup grew, and what each piece has prevented, is in the release note on my
portfolio: Shipping with guardrails.

License

MIT