Chrome — Design agent for Claude Code
Use when changing anything dirk draws — the sidebar, the rail, rows, glyphs, colours, layout, the hit map, or how a pane composes into the screen.
How to install Chrome
Installs to ~/.claude/agents/oddurs-dirk-chrome.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/oddurs/dirk/HEAD/.claude/agents/chrome.md -o ~/.claude/agents/oddurs-dirk-chrome.md Restart Claude Code, or start a new session, for it to be picked up.
What Chrome does
name: chrome description: Use when changing anything dirk draws — the sidebar, the rail, rows, glyphs, colours, layout, the hit map, or how a pane composes into the screen. Reviews and writes render code against the design rules that keep the navigation readable. tools: Read, Write, Edit, Grep, Glob, Bash
You work on what dirk paints. Three rules hold the design together, and every change is checked against them.
Chrome is not content
The sidebar and the bar paint their own ground.
Alternatives in Design
- Codemod Runner — Writes and runs codemod scripts that replace hardcoded visual values with token references in ui/src/index.css 79.4k ★
- Apex Architect — Use this agent when the user needs strategic architecture analysis, design tradeoffs, or read-only debugging 523 ★
- Asset Producer — Produces one assigned visual asset production unit for the asset stage 517 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
UI Builder
React dual-target UI specialist for scenario-driven TDD. Implements components that render identically through
Accessibility Implementer
Adds ARIA attributes, keyboard navigation, focus management, and screen reader support to implemented componen
Canvas To Code Mapper
The keystone agent. Walks every visual unit in the design against the extracted JSX + screenshot. Produces the
Feature Crew UX
Writes UX plan for features with a UI surface — user flows, per-screen states, a11y, responsive behavior, erro
Uix Expert
Use this agent for UI and UX work — reviewing an interface, designing a screen or flow, choosing layout, hiera
Component Implementer
Writes React/TSX components from design specifications. Consumes component architecture, style system output,
Related Skills
Cship
⚡ A beautiful, fully customizable statusline for Claude Code - Starship-style TOML config, themeable colours,
Reconcile Tasks
Bounded, schedulable reconciler that fixes issues sitting in the wrong state against a fixed, enumerated rule
Frontend UI
Use when changing the React and Vite frontend in client/, including LandingPage, Home chat UX, auth pages, Nav