# Frontend Data Consumer

> Ingests backend API contracts and scaffolds high-quality, typed React/Vue components (Data Tables, Detail Cards, Forms) using a specific design system (like Tailwind or Shadcn/UI). Use when a user wants to build a UI for their backend API or data platform.

- **Type:** Skill
- **Install:** `agentstack add skill-teckedd-code2save-ai-build-tools-frontend-data-consumer`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [teckedd-code2save](https://agentstack.voostack.com/s/teckedd-code2save)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [teckedd-code2save](https://github.com/teckedd-code2save)
- **Source:** https://github.com/teckedd-code2save/ai-build-tools/tree/main/skills/frontend-data-consumer
- **Website:** https://teckedd-code2save.github.io/ai-build-tools/

## Install

```sh
agentstack add skill-teckedd-code2save-ai-build-tools-frontend-data-consumer
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Frontend Data Consumer

Automatically convert backend API contracts, database schemas, or ORM models into fully functional, strongly-typed frontend components. This skill is the perfect companion to the `forge` backend generator.

## 🎯 When to Use
- When the backend has been scaffolded and the user wants to start building the frontend features.
- When you need to generate a React or Vue component that reads or writes to a specific API endpoint.
- When generating admin dashboards, data tables, or forms based on database tables.
- Works perfectly alongside the `frontend-design-review` skill to refine the generated UI.

## 🛠️ Step-by-Step Workflow

### 1. Analyze the Backend Contracts
1. Locate the backend API routers/controllers, DTOs, or ORM schemas (e.g., Prisma schema, SQLAlchemy models).
2. Understand the exact shape of the data returned by the `GET` endpoints.
3. Understand the required payloads for the `POST`/`PUT`/`PATCH` endpoints.

### 2. Scaffold Frontend API Hooks/Services
Once the data shape is known, generate the data-fetching layer in the frontend using modern libraries (e.g., React Query, SWR, or RTK Query for React; Vue Query for Vue).

#### Example (React Query):
```typescript
// hooks/useUsers.ts
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { User, CreateUserDto } from '../types/api';

export const useUsers = () => {
  return useQuery({
    queryKey: ['users'],
    queryFn: async () => {
      const response = await fetch('/api/users');
      if (!response.ok) throw new Error('Failed to fetch users');
      return response.json();
    },
  });
};

export const useCreateUser = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async (newUser: CreateUserDto) => {
      const response = await fetch('/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newUser),
      });
      if (!response.ok) throw new Error('Failed to create user');
      return response.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
  });
};
```

### 3. Generate UI Components
Based on the API contracts, scaffold the necessary UI components. Always use the project's preferred styling solution (TailwindCSS, CSS Modules, Styled Components, Shadcn/UI, Material UI).

- **Data Tables:** Map array responses to robust data tables (with pagination and sorting if supported by the backend).
- **Forms:** Generate creation/edit forms using a library like `react-hook-form` paired with `zod` validation that matches the backend rules exactly.
- **Detail Views:** Generate read-only detail cards for individual records.

### 4. Implement Loading & Error States
Never return a component that crashes when data is fetching or fails.
- Always handle the `isLoading` or `isPending` state with skeletons or spinners.
- Always handle the `isError` state with a friendly error message or fallback UI.

### 5. Finalize UI Contracts (No Hardcoding)
Adhere strictly to this rule: **Never hardcode static arrays representing business entities.** The components must *always* consume the generated API hooks. If the backend endpoint doesn't exist yet, the hook should query a real endpoint path even if it currently 404s, so the wiring is ready to go.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [teckedd-code2save](https://github.com/teckedd-code2save)
- **Source:** [teckedd-code2save/ai-build-tools](https://github.com/teckedd-code2save/ai-build-tools)
- **License:** MIT
- **Homepage:** https://teckedd-code2save.github.io/ai-build-tools/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-teckedd-code2save-ai-build-tools-frontend-data-consumer
- Seller: https://agentstack.voostack.com/s/teckedd-code2save
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.