Will it introduce new styling libraries?

No, the skill is designed to follow your existing in-house design system and styling conventions to maintain visual consistency.

Does it support automated testing?

Yes, the skill includes the creation of unit and integration tests using libraries like React Testing Library, Cypress, or Playwright as configured in your repo.

Which frontend frameworks are supported?

This skill is specifically optimized for React applications using TypeScript and common state management libraries like React Query, Redux, or Zustand.

How does the skill handle accessibility?

The skill enforces keyboard accessibility and screen-reader friendliness, prioritizing these standards even if design references are incomplete.

Can this skill modify my backend services?

No, this skill is strictly for frontend changes and requires existing backend APIs. If schema changes are needed, a separate backend task is required.

Frontend UI Integration

Name: Frontend UI Integration
Author: julianromli

byjulianromli

•

101

•

デザインツール

Implements user-facing workflows and integrates existing backend APIs into React-based web applications while adhering to strict design systems.

The Frontend UI Integration skill enables Claude to efficiently build and extend user-facing features within established web applications. It focuses on bridging the gap between existing backend services and the user interface by implementing React components with strong TypeScript typing, managing complex UI states, and ensuring full compliance with accessibility standards. This skill is particularly valuable for accelerating frontend delivery where backend contracts are already defined, allowing for rapid iteration on UI/UX changes, routing, and state management while maintaining high code quality through automated testing.

主な機能

01Automated handling of loading, error, and success UI states

02Adherence to accessibility (a11y) and keyboard navigation standards

03Strongly typed TypeScript implementation for props and API responses

04Automated unit and integration test generation for new UI flows

05101 GitHub stars

06Seamless integration of existing REST/GraphQL APIs into React components

ユースケース

01Refactoring existing UI components to align with updated design system tokens

02Implementing complex multi-step forms with validation and state persistence

03Adding a new feature module or dashboard view using existing backend endpoints

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add julianromli/opencode-template frontend-ui-integration

For use in Claude.ai and ChatGPT

主な機能

01Automated handling of loading, error, and success UI states

02Adherence to accessibility (a11y) and keyboard navigation standards

03Strongly typed TypeScript implementation for props and API responses

04Automated unit and integration test generation for new UI flows

05101 GitHub stars

06Seamless integration of existing REST/GraphQL APIs into React components

ユースケース

01Refactoring existing UI components to align with updated design system tokens

02Implementing complex multi-step forms with validation and state persistence

03Adding a new feature module or dashboard view using existing backend endpoints

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add julianromli/opencode-template frontend-ui-integration

For use in Claude.ai and ChatGPT