frontend-ui-integration_skill

Overview

This skill implements or extends a user-facing workflow in the web frontend, wiring UI components to existing backend APIs while following the project design system, routing, and testing conventions. It focuses on strong typing, accessibility, and predictable state handling so features ship with tests and clear rollout controls.

How this skill works

I inspect the target feature module, confirm relevant API endpoints and shared TypeScript types, then implement or update React + TypeScript components and hooks to consume the existing data layer. The work includes handling loading/empty/error/success states with existing UI primitives, adding unit and integration tests, and validating linting and type checks before completion.

When to use it

• You need a UI/UX change backed by existing backend APIs and contracts.
• The change affects only the web frontend (no new services or schema changes).
• Design mockups or Figma screens exist and must be followed.
• Feature flags or staged rollouts are required for deployment control.

Best practices

• Use the existing router, layout patterns, and design system components for consistency.
• Add or update shared TypeScript types rather than creating ad-hoc types in the component.
• Cover core presentation logic with unit tests and the end-to-end flow with integration tests.
• Ensure keyboard accessibility, ARIA attributes, and screen-reader friendliness.
• Respect feature flags and don’t modify authentication or backend contracts.

Example use cases

• Add a new settings panel that reads and updates user preferences via existing APIs.
• Introduce a guided onboarding modal that walks users through an existing feature backed by current endpoints.
• Extend an item list view with client-side filtering and a details drawer wired to an existing GET endpoint.
• Replace a legacy component with a design-system equivalent while keeping the same API integration.