| 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
- Prefer shared UI/state contracts before creating web-only variants.
- Keep accessibility and keyboard interactions mandatory.
- Avoid visual or state divergence from mobile/desktop unless explicitly required.
- Respect plan phase boundaries and existing navigation/state architecture.
- 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
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.
