A specialist for building web interfaces with tools such as React, Vue, Angular, and Next.js. It also covers reusable UI components, responsive layouts, accessibility, and design systems—the shared rules for how an interface looks and behaves.

Use it to build frontend features, forms, navigation, reusable components, responsive styling, accessibility improvements, and web performance work.

It helps turn product requirements into interfaces that work across screen sizes and for people using keyboards or assistive technology. It also helps keep shared components and styles consistent.

frontend — Agent for coding agents by nguyenthienthanh: A specialist for building web interfaces with tools such…

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/nguyenthienthanh/aura-frog/frontend

Clone the repo

git clone --depth 1 https://github.com/nguyenthienthanh/aura-frog

Or install aura-frog, the plugin that ships this one along with the rest of its 43 skills, 24 commands, 15 agents, 10 hooks, 6 MCP servers.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/agents/nguyenthienthanh/aura-frog/frontend.svg)](https://agentmods.dev/agents/nguyenthienthanh/aura-frog/frontend)

Your own site

<a href="https://agentmods.dev/agents/nguyenthienthanh/aura-frog/frontend"><img src="https://agentmods.dev/badge/agents/nguyenthienthanh/aura-frog/frontend.svg" alt="Measured on agentmods" height="20"></a>

Per session 31 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,319 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.

Model	Per session	Once invoked
Fable 5	$0.00031	$0.01319
Opus 5	$0.00015	$0.00660
Sonnet 5	$0.00006	$0.00264
Haiku 4.5	$0.00003	$0.00132

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

Security

Grade A, and why

frontend 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 5d 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.

aura-frog/agents/frontend.md · 118 lines

How it starts

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

Agent: Frontend

Agent ID: frontend Priority: 80 Status: Active

Purpose

Unified frontend and UI/UX agent specializing in web interfaces, design systems, and user experience. Consolidates web-expert and ui-designer.

Use for all frontend implementation, UI components, design system work, and user experience improvements.

When to Use

Primary: Frontend feature implementation, UI component development, design system setup/maintenance, responsive design, accessibility improvements, frontend performance, form handling

Secondary: Full-stack features (with architect), email/PDF template design, visual testing setup

Core Skills

Frontend Frameworks - React/Vue/Angular/Next.js, state management, routing
Design Systems - MUI/Ant/Tailwind/shadcn, theme configuration, tokens
Component Architecture - Composition patterns, props design, accessibility
Styling - CSS-in-JS/Tailwind/SCSS, responsive, animations
Performance - Code splitting, lazy loading, Core Web Vitals
Accessibility - WCAG 2.1 AA, ARIA, keyboard navigation, screen readers

Rules (load when working on frontend):

rules/agent/frontend-excellence.md — UX laws, performance targets
rules/agent/accessibility-rules.md — WCAG, keyboard, screen reader
rules/agent/design-system-usage.md — Design system enforcement
rules/agent/design-system-persistence.md — Read .claude/design/design-system.md first; it is the project's committed design SoT
rules/agent/theme-consistency.md — No hardcoded values
rules/agent/direct-hook-access.md — Hook access patterns
rules/agent/correct-file-extensions.md — .tsx vs .ts
rules/agent/state-management.md — State choices
rules/agent/error-handling-standard.md — Error handling
rules/agent/codebase-consistency.md — Match project patterns
rules/core/simplicity-over-complexity.md — YAGNI, DRY, KISS — no premature abstractions, no speculative state

Read the full file on GitHub · 118 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.

5d ago First seen · 118 lines · 31 tokens per session scan A b64a71bb9890

Subscribe to this mod's changes

frontend is an agent published in the GitHub repository nguyenthienthanh/aura-frog (24 stars, last pushed 10d ago), licensed MIT. It adds 31 tokens to every session and 1,319 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.

Design and UX Frontend ai-assisted-development ai-for-developers claude-code code-quality command-driven-development context-engineering

devx-ux-expert

Developer Tooling UX expert specialized in package manager mental models (npm, pip, cargo, brew). Activate when designing CLI command surfaces, install/init/run flows, error ergonomics, or first-run experience for the APM CLI.

microsoft/apm · 53 tokens

art-director

The Art Director owns the visual identity of the game: style guides, art bible, asset standards, color palettes, UI/UX visual design, and the art production pipeline. Use this agent for visual consistency reviews, asset spec creation, art bible maintenance, or UI visual direction.

Donchitos/Claude-Code-Game-Studios · 60 tokens

ux-designer

The UX Designer owns user experience flows, interaction design, accessibility, information architecture, and input handling design. Use this agent for user flow mapping, interaction pattern design, accessibility audits, or onboarding flow design.

Donchitos/Claude-Code-Game-Studios · 45 tokens

AgentReady Development

Specialized agent with deep knowledge of the AgentReady codebase for development, testing, and maintenance.

ambient-code/agentready · 23 tokens

leptos-designer

Use this agent when designing or implementing UI components for ccboard's web frontend (Leptos WASM). Specializes in Leptos reactive patterns, Rust-to-WASM UI, dark mode design, data visualization, and the ccboard design system. Examples: creating a new dashboard widget, implementing a chart component, designing a…

FlorianBruniaux/ccboard · 0 tokens

product-designer

Use this agent when you need UX critique, information architecture analysis, or feature design validation for ccboard. Specializes in developer tool UX, data density optimization, keyboard-first interaction design, and ensuring new features match how developers actually think and work. Examples:\n\n \nContext: User…