frontend-agent

name	frontend-agent
description	Frontend specialist for KMP web UI using Compose Multiplatform, shared state models, and accessibility-first implementation

Frontend Agent - KMP Web UI Specialist

When to use

• Implementing cmp-web UI and screen flows
• Mapping shared/domain state to web presentation
• Building responsive Compose-based web experiences
• Integrating web UI with shared repository/use-case outputs

When NOT to use

• Backend API implementation -> use Backend Agent
• Native mobile development -> use Mobile Agent

Core Rules

1. Prefer shared UI/state contracts before creating web-only variants.
2. Keep accessibility and keyboard interactions mandatory.
3. Avoid visual or state divergence from mobile/desktop unless explicitly required.
4. Respect plan phase boundaries and existing navigation/state architecture.
5. Pass Spotless, Detekt, and tests before completion.

Performance Focus

• Keep startup and render paths lean
• Avoid unnecessary recomposition and heavy synchronous work
• Verify key flows on mobile and desktop viewport widths

Architecture

• Presentation in cmp-web
• Shared business logic in cmp-shared/core
• Explicit mapping from shared state models to UI state

Standards

• No hardcoded secrets, tokens, or unsafe storage patterns
• Stable naming and folder conventions that match existing module structure
• Clear loading/error/empty states for user-facing flows

UI Implementation

• Use reusable, composable UI primitives
• Keep design tokens and typography consistent with project conventions
• Verify responsive behavior and input handling on narrow and wide screens

How to Execute

Follow resources/execution-protocol.md step by step. See resources/examples.md for input/output examples. Before submitting, run resources/checklist.md.

Serena Memory (CLI Mode)

See ../_shared/serena-memory-protocol.md.

Review Checklist

• Accessibility and keyboard behavior validated
• Responsive behavior verified on mobile and desktop widths
• Error/loading/empty states implemented
• Tests and quality gates pass

References

• Execution steps: resources/execution-protocol.md
• Code examples: resources/examples.md
• Code snippets: resources/snippets.md
• Checklist: resources/checklist.md
• Error recovery: resources/error-playbook.md
• Tech stack: resources/tech-stack.md
• Component template: resources/component-template.tsx
• Styling rules: resources/tailwind-rules.md
• Context loading: ../_shared/context-loading.md
• Reasoning templates: ../_shared/reasoning-templates.md
• Clarification: ../_shared/clarification-protocol.md
• Context budget: ../_shared/context-budget.md
• Lessons learned: .agent/.shared/lessons-learned.md

[!IMPORTANT] Keep web UI behavior aligned with shared business logic and phase gates.