AI agent skill · by @ww-w-ai

Phase 6 Ui Integration

Skill for implementing UI and integrating with APIs. Covers frontend-backend integration and state management. Use proactively when user needs to connect frontend with backend. Triggers: UI implementation, API integration, state management, UI 구현, API 연동, 상태 관리, UI実装, API連携, 状態管理, UI实现, API集成, 状态管理, implementación UI, integración API, implémentation UI, intégration API, UI-Implementierung, API-Integration, implementazione UI, integrazione API Do NOT use for: mockup creation, backend-only development

Archived 2026-10-23 · Source updated 2026-05-20 · License: Apache-2.0. Check the original repository for the latest version.

SKILL.md instructions

# Phase 6: UI Integration

> Connect your frontend to the backend

## Key Tasks

### 1. API Client Setup

```typescript
// lib/api/client.ts
const API_BASE = process.env.NEXT_PUBLIC_API_URL;

export async function fetchAPI<T>(
  endpoint: string,
  options?: RequestInit
): Promise<T> {
  const res = await fetch(`${API_BASE}${endpoint}`, {
    headers: {
      'Content-Type': 'application/json',
      ...options?.headers,
    },
    ...options,
  });

  if (!res.ok) {
    throw new Error(`API Error: ${res.status}`);
  }

  return res.json();
}
```

### 2. Data Fetching

```typescript
// Server Component
async function UserList() {
  const users = await fetchAPI<User[]>('/api/users');

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
```

### 3. Form Handling

```typescript
// Client Component with Server Action
'use client';

export function LoginForm() {
  const [pending, startTransition] = useTransition();

  async function handleSubmit(formData: FormData) {
    startTransition(async () => {
      await loginAction(formData);
    });
  }

  return (
    <form action={handleSubmit}>
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <button disabled={pending}>
        {pending ? 'Loading...' : 'Login'}
      </button>
    </form>
  );
}
```

### 4. State Management

- Server State: React Query / SWR
- Client State: Zustand / Jotai
- Form State: React Hook Form

## Integration Checklist

- [ ] API client configured
- [ ] Authentication flow working
- [ ] Error boundaries added
- [ ] Loading states implemented
- [ ] Optimistic updates where needed

## Next Phase

After completion: `/phase-7-seo-security` (Dynamic/Enterprise) or `/phase-9-deployment` (Starter)