frontend-ui-integration

Implement user-facing web workflows by integrating existing backend APIs.

Updated Dec 9, 2025

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

Ready to run

npx skills add https://github.com/h4v1d/extension-collection-geminicli --skill frontend-ui-integration-h4v1d

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-ui-integration
Source: https://github.com/h4v1d/extension-collection-geminicli/tree/main/frontend-ui-integration
Command: npx skills add https://github.com/h4v1d/extension-collection-geminicli --skill frontend-ui-integration-h4v1d

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables teams to implement or extend a user-facing workflow in a web application by integrating with existing backend APIs, ensuring alignment with design systems, routing, and testing conventions.

Core Features & Use Cases

UI/UX focus: implement frontend changes that rely on existing API contracts without touching backend data models.
API-driven UI: wire up components to existing endpoints, apply strong typing and accessible components.
Use Case: Imagine adding a new user profile flow that calls /api/users to fetch data and navigate via the existing router.

Quick Start

Build and integrate a new UI page that fetches data from the provided API and renders it using shared UI components.

Frequently Asked Questions about frontend-ui-integration

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

FAQPage Schema

How do I integrate frontend UI with existing backend APIs in React?▼

To integrate frontend UI with existing backend APIs in React, wire up components to defined endpoints using strong typing and accessible components. This approach enforces routing conventions and test coverage without altering backend data models or contracts.

What is the best way to build a user-facing workflow using an existing design system?▼

The best way to build a user-facing workflow using an existing design system is to implement frontend changes that rely on predefined API contracts. This ensures alignment with routing and testing conventions while rendering shared UI components.

Can I use TypeScript to wire up components to existing endpoints without touching the backend?▼

Yes, you can use TypeScript to wire up components to existing endpoints without touching the backend. This Skill applies strictly to web UI changes, enforcing strong typing and feature flag adherence while avoiding backend or data model alterations.

How do I add a new user profile flow that fetches data from an API and navigates via the router?▼

To add a new user profile flow that fetches data from an API and navigates via the router, implement the UI page to call the provided endpoint and render it using shared UI components. This follows existing routing and accessibility conventions.

When should I not use API-driven UI integration for web applications?▼

You should not use API-driven UI integration for web applications when the backend contracts or data models are not yet defined. This approach strictly requires existing endpoints and avoids any backend or data model alterations.