# frontend-to-backend-requirements

A skill that helps a frontend developer tell backend what data a screen needs, without dictating the API shape.

- skill · `type=skill` · Claude Code · 278 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/enterprise-communication/frontend-to-backend-requirements
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/frontend-to-backend-requirements

## What it does

The skill turns the backend conversation into a request. You describe what appears on screen, what actions the user can take, and which states need handling. Implementation stays with backend: endpoints, field names and types are not your call.

It runs in steps. First you describe the feature — screen, flow or component, who uses it, what success looks like. Then you list the data to display, the user actions, and the states: empty, loading, error, success. Uncertainties and open questions for backend get their own section.

Everything lands in `.claude/docs/ai/<feature-name>/backend-requirements.md`. Nothing is printed in chat, so if you expect an answer in the conversation, you won't get one. Later you add backend replies to the Discussion Log and the doc becomes the agreed source of truth.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill enterprise-communication/frontend-to-backend-requirements
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill frontend-to-backend-requirements -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/frontend-to-backend-requirements/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/frontend-to-backend-requirements/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/frontend-to-backend-requirements/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/frontend-to-backend-requirements/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates frontend-to-backend-requirements
```

2. **Manually: put the files in place**
- File: `.github/skills/frontend-to-backend-requirements/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/enterprise-communication/frontend-to-backend-requirements
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/frontend-to-backend-requirements/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/enterprise-communication/frontend-to-backend-requirements

## When to use it
- describe data needs for a new screen without naming endpoints
- collect loading, empty and error states in one document
- raise business rules that change what the UI shows
- record open questions for backend before work starts
- keep backend replies and decisions next to the requirements

## Example prompts
- Write backend requirements for the contracts list screen
- What data do I need for the recent contracts dashboard?
- Draft backend requirements for the checkout form

## Similar
- [backend-development](https://affpapa.org/en/nevibecode/skills/backend-development.md) — skill · 2300 installs
- [backend-security-coder](https://affpapa.org/en/nevibecode/skills/backend-security-coder.md) — skill · 1000 installs
- [woocommerce-backend-dev](https://affpapa.org/en/nevibecode/skills/woocommerce-backend-dev.md) — skill · 2300 installs
- [create-a-backend](https://affpapa.org/en/nevibecode/skills/create-a-backend.md) — skill · 651 installs
- [rc-backend](https://affpapa.org/en/nevibecode/skills/rc-backend.md) — skill · 635 installs
- [replica-backend](https://affpapa.org/en/nevibecode/skills/replica-backend.md) — skill · 613 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 224 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md