phase-6-ui-integration

Implement UI pages with a 3-layer API client and centralized token injection.

33|5|Updated Jan 27, 2026
One-click install
npx skills add https://github.com/LowyShin/giip-dev-agent --skill phase-6-ui-integration-lowyshin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: phase-6-ui-integration
Source: https://github.com/LowyShin/giip-dev-agent/tree/main/.agent/skills/phase-6-ui-integration
Command: npx skills add https://github.com/LowyShin/giip-dev-agent --skill phase-6-ui-integration-lowyshin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Phase 6 focuses on implementing actual UI components and wiring them to backend APIs, including state management and a clean API client architecture.

Core Features & Use Cases

  • Page Implementation: Develop each screen with design-system components and ensure visual consistency.
  • State Management: Handle client-side state and API-driven UI updates.
  • API Integration: Connect frontend to backend services using a centralized API client and domain services.
  • Use Case: Build a dashboard that displays real-time data from backend APIs with proper error handling and loading states.

Quick Start

Create a new UI page and connect it to your backend via the centralized API client.

Frequently Asked Questions about phase-6-ui-integration

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

FAQPage Schema
How do I structure a React API client for frontend and backend integration?

A React API client for frontend and backend integration should use a 3-layer architecture: a centralized client for token injection, domain services for data fetching, and standardized error handling to ensure consistent type sharing across UI components.

What is the best way to manage client state when fetching data from APIs in TypeScript?

Managing client state when fetching data from APIs in TypeScript requires centralized domain services that handle API-driven UI updates, ensuring loading states and errors are consistently managed across the frontend application.

How do I implement standardized error handling for API integration in a React frontend?

Standardized error handling for API integration in a React frontend is implemented by enforcing a 3-layer API client structure that centralizes error parsing and token injection, allowing UI components to react consistently to backend failures.

Does this API integration approach work for enterprise-level frontend applications?

Yes, this API integration approach works for enterprise-level frontend applications by applying a scalable 3-layer API client structure, centralized domain services, and consistent type sharing across starter, dynamic, and enterprise contexts.

Why do I need a 3-layer API client architecture for my React UI?

You need a 3-layer API client architecture for your React UI to separate centralized token injection, domain-specific service calls, and standardized error handling, ensuring seamless end-to-end integration between frontend components and backend services.

How to connect a React dashboard to backend APIs with loading and error states?

To connect a React dashboard to backend APIs with loading and error states, implement UI components wired to domain services via a centralized API client, managing client state to reflect real-time data fetching and standardized error handling.