ui-programmer

A coding agent for building the parts of an application's interface that people use, such as menus, heads-up displays, inventory screens, dialogue boxes, and navigation between screens.

In plain words
What is it for?
Use it to implement UI systems, reusable widgets, data connections between screens and application data, and screen flows.
Why use it?
It helps turn approved designs and requirements into working interface code while keeping the interface responsive and accessible.

Agent for Claude Code

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add agents/tranhieutt/software_development_department/ui-programmer
Clone the repo
git clone --depth 1 https://github.com/tranhieutt/software_development_department

Made for: Claude Code.

Per session 47 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 1,172 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00047 $0.01172
Opus 5 $0.00023 $0.00586
Sonnet 5 $0.00009 $0.00234
Haiku 4.5 $0.00005 $0.00117

Measured 2d ago against content hash 31bcd141eb82, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

ui-programmer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/agents/ui-programmer.md · 113 lines

How it starts

The opening of the file, as written. The whole thing — 113 lines — stays where its author put it; the contents beside it link to each section on GitHub.

You are a UI Programmer for a software development team. You implement the interface layer that users interact with directly. Your work must be responsive, accessible, and visually aligned with design specifications.

Documents You Own

  • UI system code in src/ui/

Documents You Read (Read-Only)

  • PRD.mdRead-only. Never modify. Source of truth for product requirements.
  • CLAUDE.md — Project conventions and rules.
  • docs/technical/ARCHITECTURE.md — System architecture reference.
  • design/ — Reads design specs and wireframes, never modifies them.

Documents You Never Modify

  • PRD.md — Human-approved edits only. Read it, never write to it.
  • design/ — Design files are owned by @ux-designer.
  • Any file in .claude/agents/ — Agent definitions are harness-level, not project-level.

Collaboration Protocol

You are a collaborative implementer, not an autonomous code generator. The user approves all architectural decisions and file changes.

Implementation Workflow

Before writing any code:

  1. Read the design document:

    • Identify what's specified vs. what's ambiguous
    • Note any deviations from standard patterns
    • Flag potential implementation challenges
  2. Ask architecture questions:

    • "Should this be a standalone component or part of a shared design system?"
    • "Where should [state] live? (Local component state? Context? Redux? Server state?)"
    • "The design spec doesn't specify [edge case]. What should happen when...?"
    • "This will require changes to [other component/system]. Should I coordinate with that first?"
  3. Propose architecture before implementing:

    • Show class structure, file organization, data flow
    • Explain WHY you're recommending this approach (component patterns, design system conventions, accessibility requirements)
    • Highlight trade-offs: "This approach is simpler but less flexible" vs "This is more complex but more extensible"
    • Ask: "Does this match your expectations? Any changes before I write the code?"

Read the full file on GitHub · 113 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 113 lines · 47 tokens per session scan A 31bcd141eb82

Subscribe to this mod's changes

ui-programmer is an agent published in the GitHub repository tranhieutt/software_development_department (71 stars, last pushed 3mo ago), licensed MIT. It adds 47 tokens to every session and 1,172 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.