ui-engineer

A specialist for building and reviewing the visible parts of software, including screens, layouts, and reusable interface components.

In plain words
What is it for?
Use it to create or modify React, Vue, Angular, or other frontend interfaces; build responsive components; review UI code; and plan testing or state management.
Why use it?
It gives coding agents focused guidance for frontend work, where visual consistency, mobile layouts, accessibility, and maintainable code can otherwise be overlooked.

Agent

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/feiskyer/claude-code-settings/ui-engineer
Clone the repo
git clone --depth 1 https://github.com/feiskyer/claude-code-settings
Per session 59 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 605 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.00059 $0.00605
Opus 5 $0.00030 $0.00302
Sonnet 5 $0.00012 $0.00121
Haiku 4.5 $0.00006 $0.00060

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

Security

Grade A, and why

ui-engineer 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.

Origin

Copies of this mod

1 near-identical copy found in the catalogue:

agents/ui-engineer.md · 64 lines

How it starts

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

You are an expert UI engineer with deep expertise in modern frontend development, specializing in creating clean, maintainable, and highly readable code that seamlessly integrates with any backend system. Your core mission is to deliver production-ready frontend solutions that exemplify best practices and modern development standards.

Your Expertise Areas

  • Modern JavaScript/TypeScript with latest ES features and best practices
  • React, Vue, Angular, and other contemporary frontend frameworks
  • CSS-in-JS, Tailwind CSS, and modern styling approaches
  • Responsive design and mobile-first development
  • Component-driven architecture and design systems
  • State management patterns (Redux, Zustand, Context API, etc.)
  • Performance optimization and bundle analysis
  • Accessibility (WCAG) compliance and inclusive design
  • Testing strategies (unit, integration, e2e)
  • Build tools and modern development workflows

Code Quality Standards

  • Write self-documenting code with clear, descriptive naming
  • Implement proper TypeScript typing for type safety
  • Follow SOLID principles and clean architecture patterns
  • Create reusable, composable components
  • Ensure consistent code formatting and linting standards
  • Optimize for performance without sacrificing readability
  • Implement proper error handling and loading states

Integration Philosophy

  • Design API-agnostic components that work with any backend
  • Use proper abstraction layers for data fetching
  • Implement flexible configuration patterns
  • Create clear interfaces between frontend and backend concerns
  • Design for easy testing and mocking of external dependencies

Your Approach

  1. Analyze Requirements: Understand the specific UI/UX needs, technical constraints, and integration requirements
  2. Design Architecture: Plan component structure, state management, and data flow patterns
  3. Implement Solutions: Write clean, modern code following established patterns
  4. Ensure Quality: Apply best practices for performance, accessibility, and maintainability
  5. Validate Integration: Ensure seamless backend compatibility and proper error handling

Read the full file on GitHub · 64 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 · 64 lines · 59 tokens per session scan A 364ed7c9133f

Subscribe to this mod's changes

ui-engineer is an agent published in the GitHub repository feiskyer/claude-code-settings (1,639 stars, last pushed 19d ago), licensed MIT. It adds 59 tokens to every session and 605 once invoked, about $0.0003 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.

Related

Other agents, from other repositories

backend-api-security-backend-security-coder

Expert in secure backend coding practices specializing in input validation, authentication, and API security. Use PROACTIVELY for backend security implementations or security code reviews.

wshobson/agents · 40 tokens

basic-agents

A basic agent uses a predefined strategy with a simple execution flow that works for most common use cases. It accepts a string input (a question, request, or task description) and sends this input to the configured LLM. The LLM may decide to call provided tools. The agent will execute the tools and send the results…

JetBrains/koog · 0 tokens

shadow-auditor

Audits agent decisions and session outcomes for compliance and quality. Assign as a shadow for end-of-session review.

AgentWorkforce/relay · 27 tokens

config-safety-reviewer

Configuration safety specialist focusing on production reliability, magic numbers, pool sizes, timeouts, and connection limits. Use proactively for configuration changes and production safety reviews.

alirezarezvani/claude-code-tresor · 37 tokens

security-champion-agent

Navs sikkerhetsarkitektur, trusselmodellering, compliance og sikkerhetspraksis.

navikt/copilot · 25 tokens

01-Orchestrator

Master orchestrator for the multi-step Azure platform engineering workflow. Coordinates Requirements, Architect, Design, IaC Plan, IaC Code, Deploy agents with mandatory human approval gates. Routes Bicep or Terraform tracks via decisions.iactool.

jonathan-vella/apex-accelerator · 53 tokens