frontend-ui-integration

Implement React and TypeScript frontend workflows that integrate with existing backend APIs.

Updated Jul 8, 2022

Search Tags:#React #frontend #routing #TypeScript #design-system #implement #UI integration

Ready to run

npx skills add https://github.com/limaon/dotfiles --skill frontend-ui-integration-limaon

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-ui-integration
Source: https://github.com/limaon/dotfiles/tree/main/.config/opencode/skills/frontend-ui-integration
Command: npx skills add https://github.com/limaon/dotfiles --skill frontend-ui-integration-limaon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides implementing or extending a user-facing workflow in a web application, ensuring it integrates with existing backend APIs while adhering to the design system and routing conventions.

Core Features & Use Cases

UI integration: Build or modify frontend flows that consume existing APIs without altering backend contracts.
Design system alignment: Reuse in-house components, styling, and accessibility primitives.
Use Case: When adding a new dashboard widget, implement the frontend UI in React with TypeScript, wire routes, and validate with existing tests.

Quick Start

Use the frontend-ui-integration skill to implement a new dashboard widget that consumes an existing API.

Frequently Asked Questions about frontend-ui-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement a React UI feature that integrates with existing backend APIs?▼

To implement a React UI feature that integrates with existing APIs, build or modify frontend workflows using TypeScript, wire routes, and consume API data while adhering to the project's established design system.

How do I align new frontend components with an existing design system in TypeScript?▼

Align new frontend components by reusing in-house design system primitives, styling, and accessibility features, ensuring strong typing and keyboard navigation are validated through unit and component tests.

What's the best way to add a new dashboard widget that consumes an API in React?▼

The best way to add a dashboard widget is to implement the frontend UI in React with TypeScript, wire the necessary routes, and validate the API integration using the project's established testing tooling.

Do I need TypeScript to build frontend workflows that connect to backend APIs?▼

Yes, TypeScript is required to ensure strong typing when building frontend workflows. It guarantees type safety during UI integration and helps validate component behavior through integration tests.

Does this approach to UI integration support accessibility and keyboard navigation?▼

Yes, this UI integration approach satisfies requirements for accessibility and keyboard navigation by reusing the project's design system primitives and validating interactions through established component tests.

Can I alter backend contracts when wiring new routes for frontend features?▼

No, you cannot alter backend contracts. This approach builds or modifies frontend flows that consume existing APIs without changing the backend, ensuring seamless UI integration within current routing patterns.