Does this skill support backend development?

No, this skill is focused exclusively on frontend UI/UX changes and assumes the backend APIs and contracts are already in place.

Which frameworks are compatible with this skill?

This skill is optimized for React with TypeScript, using common state management libraries like React Query, Redux, or Zustand and existing project routers.

How does it handle accessibility?

It implements required behaviors to ensure all UI changes are keyboard accessible and screen-reader friendly according to standard web accessibility patterns.

Can it create new design systems?

No, this skill is designed to work within your existing design system and styling conventions to ensure visual consistency across your application.

Frontend UI Integration

Name: Frontend UI Integration
Author: januarfonti

byjanuarfonti

Design Tools

Standardizes the implementation of user-facing web features by integrating existing backend APIs with established design systems and testing protocols.

About

This skill streamlines the process of building frontend features within a React and TypeScript environment by ensuring alignment with existing backend contracts and UI design systems. It automates the boilerplate associated with wiring up APIs, managing state with tools like React Query or Zustand, and implementing accessible components while maintaining strict adherence to project-specific routing and styling conventions. It is ideal for developers who need to extend web applications efficiently without altering the underlying infrastructure or authentication logic.

Key Features

Integrated testing workflows using React Testing Library, Cypress, or Playwright
Seamless integration with existing REST or GraphQL backend APIs
Automated generation of type-safe React components and hooks
Built-in support for keyboard accessibility and screen-reader standards
Strict adherence to in-house design systems and component libraries
0 GitHub stars

Use Cases

Refactoring an existing UI flow to match a new Figma design while maintaining current functionality
Adding a new dashboard widget that pulls data from an existing analytics endpoint
Updating a user profile form to include new fields supported by the current backend schema

About

Key Features

Integrated testing workflows using React Testing Library, Cypress, or Playwright
Seamless integration with existing REST or GraphQL backend APIs
Automated generation of type-safe React components and hooks
Built-in support for keyboard accessibility and screen-reader standards
Strict adherence to in-house design systems and component libraries
0 GitHub stars

Use Cases

Refactoring an existing UI flow to match a new Figma design while maintaining current functionality
Adding a new dashboard widget that pulls data from an existing analytics endpoint
Updating a user profile form to include new fields supported by the current backend schema