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

0•

Design Tools

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

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

01Integrated testing workflows using React Testing Library, Cypress, or Playwright

02Seamless integration with existing REST or GraphQL backend APIs

03Automated generation of type-safe React components and hooks

04Built-in support for keyboard accessibility and screen-reader standards

05Strict adherence to in-house design systems and component libraries

060 GitHub stars

Use Cases

01Refactoring an existing UI flow to match a new Figma design while maintaining current functionality

02Adding a new dashboard widget that pulls data from an existing analytics endpoint

03Updating a user profile form to include new fields supported by the current backend schema

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add januarfonti/opencode-template-configured frontend-ui-integration

For use in Claude.ai and ChatGPT

Download Skill