Build React interfaces with ak:frontend-development

Use ak:frontend-development to build or refine a React and TypeScript component, route, or feature with an explicit data contract, loading behavior, error handling, file boundary, and verification evidence. Its bundled patterns focus on Suspense, TanStack Query and Router, MUI v7, feature organization, strict TypeScript, and measured performance work.

Choose ak:frontend-development for React implementation

Use ak:frontend-development when

• The main outcome is a React component, page, route, form, data flow, or frontend performance correction.
• The project already uses, or intentionally adopts, the referenced React, TypeScript, MUI, or TanStack patterns.
• You need implementation rather than only visual direction.

Choose another workflow when

• You need visual concept work, layout direction, or design-system decisions before implementation. Use ak:frontend-design.
• You need framework selection or a non-React framework workflow. Use ak:web-frameworks.
• The task is a broad approved implementation spanning frontend and backend. Use ak:cook and name the relevant specialist guidance.
• You only need an independent review or failure diagnosis. Use ak:code-review or ak:fix.

Run a UI-delivery workflow

Use separate design, implementation, browser verification, and review stages so that visual intent does not silently replace product behavior or accessibility.

Before implementation, hand over:

User outcome and primary journey:
Approved reference or design decision:
Required states and breakpoints:
Accessibility and reduced-motion requirements:
Existing components and tokens to reuse:
Data/API contract:
Acceptance screenshots or observable checks:
Explicit non-goals:

Return to design when the reference omits an important state. Return to implementation when browser evidence fails. Do not patch a screenshot-only symptom when the cause is layout, data, hydration, focus, or state ownership. Deployment and publication remain separate workflows after review.

Prepare the project and stack

Before you start:

• Complete Onboarding, and confirm Engineer Kit is installed for the current runtime and scope.
• Open the project and identify its React, TypeScript, MUI, TanStack Query, router, form, testing, and package-manager versions from source.
• Read the repository’s component, styling, accessibility, API, and test rules.
• Provide the user-visible outcome, states, API contract, responsive boundary, browser support, acceptance criteria, and non-goals.
• State whether dependency installation, API access, browser automation, file generation, screenshots, or publication are allowed.

The bundled references contain application-specific examples such as SuspenseLoader, useMuiSnackbar, apiClient, import aliases, and route formats. Treat them as patterns only when the current project actually provides the same contracts.

See Runtime adapters for component-level differences.

Run the Skill

The declared argument shape is [component or feature]. The Skill defines no flags, named modes, or default project stack.

/ak:frontend-development "Add an order-status filter to the existing React page. Reuse its query keys, router, design tokens, and loading boundary; cover empty, error, keyboard, and mobile states; do not install packages or publish."

/ak:frontend-development "Add an order-status filter to the existing React page. Reuse its query keys, router, design tokens, and loading boundary; cover empty, error, keyboard, and mobile states; do not install packages or publish."

$ak:frontend-development "Add an order-status filter to the existing React page. Reuse its query keys, router, design tokens, and loading boundary; cover empty, error, keyboard, and mobile states; do not install packages or publish."

Observe an evidence-led implementation

The source is a modular pattern library rather than a fixed workflow. Keep an implementation run inspectable:

1. The run verifies the local stack. It reads existing components, route definitions, data hooks, styling primitives, aliases, and repository rules.
2. The run chooses only compatible patterns. Suspense, TanStack Query, TanStack Router, MUI v7, React Hook Form, or Zustand are used only when the project supports them or their adoption is approved.
3. The run defines states and boundaries. Props, data, errors, loading, mutation rollback, responsive behavior, and file ownership stay explicit.
4. The run implements the smallest feature slice. It reuses shared components and public feature APIs instead of copying application-specific examples blindly.
5. The run verifies behavior. It reports the project’s focused typecheck, tests, build or browser evidence and any unverified state.
6. The run reports effects. Changed files, dependencies, API calls, generated artifacts, remaining risks, and publication steps remain visible.

Keep side effects and publication explicit

• The Skill is implementation-capable when the runtime has write and process tools. Its source does not authorize package installation, browser control, provider access, commit, publication, or deployment.
• Installing packages and running dev tools can use the network, execute lifecycle scripts, update lockfiles, create caches, and consume disk.
• Dev servers, typecheckers, bundlers, component tools, and browser tests create processes and can use ports, CPU, memory, and storage.
• API calls, error tracking, analytics, map, media, font, or hosting providers can send project or user data and incur charges. No paid provider is required by the Skill itself.
• Optimistic mutations need an error rollback and cache reconciliation path.

Verify the result

A complete implementation result should provide:

• The user-visible behavior and state matrix implemented.
• Exact changed files and any dependency or generated-file impact.
• Typecheck and focused test commands with results.
• Browser, responsive, accessibility, or performance evidence when requested or required by the project, plus explicit gaps when those checks were unavailable.
• API, cache, error, and rollback behavior for data-changing interactions.
• Confirmation that commit, publication, and deployment were not performed unless separately authorized.

Troubleshoot or continue

Continue with ak:frontend-design for unresolved visual direction or the Engineer Kit overview for coordinated implementation.

Know the current limits

• The references encode one opinionated React application style. They do not prove those aliases, components, routes, or libraries exist in your project.
• The source does not define a complete accessibility, visual-regression, security, or cross-browser workflow; add project-required checks explicitly.
• It defines no deterministic runtime estimate or Skill-specific automated test suite. Duration depends on feature size, project feedback loops, and browser or service access.
• Stable and beta contain identical Skill content and resources for this release pair.