Which frameworks are supported?

This skill is optimized for React applications using TypeScript, including standard state management and routing libraries.

How does it handle accessibility?

It ensures all implemented UI components are keyboard accessible and screen-reader friendly according to industry standards.

Can it add new design systems?

It is designed to work within your existing design system and styling conventions rather than introducing new frameworks.

Does this skill handle backend changes?

No, this skill focuses strictly on frontend implementation and requires that backend APIs and data models already exist.

Frontend UI Integration

Name: Frontend UI Integration
Author: julianromli

byjulianromli

•

设计工具

Integrates feature-rich web interfaces with existing backend APIs while adhering to established design systems and TypeScript standards.

This skill empowers Claude to efficiently implement or extend user-facing workflows within web applications. It focuses on seamless integration with existing backend contracts, ensuring that new UI components remain consistent with your design system, routing patterns, and state management libraries. By prioritizing accessibility, strong typing, and automated testing, it streamlines the frontend development process without requiring backend modifications or schema changes.

主要功能

01Automated state handling for loading, error, and success scenarios

02Accessibility-first development following keyboard and screen-reader standards

03Built-in verification using linting, type-checking, and integration tests

0412 GitHub stars

05Strong TypeScript integration for props and API responses

06Seamless UI/UX workflow extension within existing React applications

使用场景

01Adding a new dashboard view that consumes existing analytics endpoints

02Refactoring legacy UI components to use the modern in-house design system

03Extending a user profile form with additional fields backed by current API schemas

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 state handling for loading, error, and success scenarios

02Accessibility-first development following keyboard and screen-reader standards

03Built-in verification using linting, type-checking, and integration tests

0412 GitHub stars

05Strong TypeScript integration for props and API responses

06Seamless UI/UX workflow extension within existing React applications

使用场景

01Adding a new dashboard view that consumes existing analytics endpoints

02Refactoring legacy UI components to use the modern in-house design system

03Extending a user profile form with additional fields backed by current API schemas

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