frontend-implementation_skill

Overview

This skill is a Frontend Implementation Workflow Agent that orchestrates end-to-end frontend work when only the client-side needs to be built. It coordinates UI components, state management, API integration, real-time features, testing, optimization, and build/deploy steps. The skill maps work into parallel and sequential phases to deliver production-ready frontend artifacts.

How this skill works

The agent decomposes a feature into phases: component implementation (parallel), integration with APIs and sockets (sequential), optimization and testing (parallel), and build & deploy (sequential). It assigns tasks for UI components, stores, custom hooks, API clients, WebSocket integration, performance tuning, tests, linting, and CI/CD configuration. Outputs are organized into a standardized docs/implementation/<feature>/frontend/ directory with component specs, state design, integration notes, test and performance reports, and build config.

When to use it

• When the project requires frontend-only development (UI, state, integration)
• When multiple frontend artifacts must be produced in parallel (components, stores, hooks)
• When integrating a frontend with existing backend APIs or real-time services
• When you need a predictable deliverable structure for handoff or review
• When automated optimization, testing, and CI/CD are required before deployment

Best practices

• Follow Atomic Design for component organization: atoms → molecules → organisms → templates
• Choose a single state pattern early (Zustand/Redux/Context) and document stores in state-management.md
• Implement API clients with retry/error handling and document endpoints in api-integration.md
• Write unit and integration tests in parallel with components to ensure Phase 3 passes before build
• Enforce linting and accessibility checks; set Lighthouse and bundle-size thresholds to trigger warnings

Example use cases

• Implement a login page with form components, auth store, API client, and tests
• Build a dashboard UI composed of reusable components and centralized state for widgets
• Create a real-time chat interface integrating WebSocket/SSE, message hooks, and performance tuning
• Add a new settings page with responsive design, accessibility validation, and CI/CD-ready build configuration