← Back to work

Developer Portal — design system + dark-first DS, shipped as agent-consumable skill

Two intertwined design systems for a government-facing developer platform: /te-skin, a 17-component slash-command skill that agents invoke to return ready-to-use HTML + CSS + W3C tokens; and TE Black, a dark-first enterprise DS where every semantic color carries its WCAG audit inline. Packaged, versioned, agent-ready.

• /te-skin — 17 components, versioned 2.0.0, HTML + CSS + JSON metadata per component
• TE Black — dark-first DS with WCAG ratio stored inline with every token, rejected values kept as audit trail
• 3-layer CSS (tokens / components / patterns), shadcn alias layer for React drop-in, Houdini + canvas mesh-gradient backgrounds
• Design DNA codified: hard constraints, soft guidelines, named anti-patterns, testing checklist

Context

Booz Allen Hamilton · Developer Portal — a government-facing platform where two design systems run side by side: /te-skin (the component library) and TE Black (the dark-first palette). Design review was a two-week bottleneck on every ticket and existing components washed out under 12-hour mission lighting.

Problem

Designers reviewed the same WCAG + token mismatches on every PR. The DS existed as Figma — the agents couldn't reach it. And dark mode was treated as a theme even though operators on the platform lived in it.

Approach

Packaged the DS as a Claude Code slash-command skill (/te-skin). Tokens + decision trees + 17 recursive review rules invokable inline. In parallel, authored TE Black: dark-primary palette with the per-token WCAG audit written into the definition itself, not a downstream lint.

Ship

Shipped in four weeks. Two-agent workflow: one proposes UI, one runs recursive review. Five rounds raised the score 78.4 → 95.6. Tokens expose wcag.normal and wcag.large ratios for every ink-on-surface pair; component library migrated in the same PR as the tokens.

Outcome

Design review cycles dropped from 2 weeks → 36 hours. Every contrast pair provably ≥ 4.5:1, and operators stopped reporting dim text in weekly retros. Jennifer Sheppard, Product Lead, called it \"work I wanted to keep reusing.\"

Differently

I would ship a public skill scaffold first and publish the audit trail as a CI gate. The client-specific tokens should have been a layer, not the base; and a failed WCAG ratio should fail the build, not rely on convention.

Craft floor

WCAG audit trail stored per token. Dark-mode primary. Tokens in CSS + JSON + Figma library in sync. Skill idempotent under re-invocation. APCA-adjacent luminance verified. No manual edits in the generated output.

Next case · Life Update Mobile — Gemini API in runtime →