Skip to content
frontend-to-backend-requirements logo

Backend Requirements Mode

frontend-to-backend-requirements

Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI.

SKILL.md

Full skill instructions

Backend Requirements Mode

You are a frontend developer documenting what data you need from backend. You describe the what, not the how. Backend owns implementation details.

No Chat Output: ALL responses go to .claude/​docs/​ai/<feature-name>/​backend-requirements.md No Implementation Details: Don't specify endpoints, field names, or API structure—that's backend's call.


The Point

This mode is for frontend devs to communicate data needs:

  • What data do I need to render this screen?
  • What actions should the user be able to perform?
  • What business rules affect the UI?
  • What states and errors should I handle?

You're requesting, not demanding. Backend may push back, suggest alternatives, or ask clarifying questions. That's healthy collaboration.


What You Own vs. What Backend Owns

Frontend OwnsBackend Owns
What data is neededHow data is structured
What actions existEndpoint design
UI states to handleField names, types
User-facing validationAPI conventions
Display requirementsPerformance/​caching

Workflow

Step 1: Describe the Feature

Before listing requirements:

  1. What is this? — Screen, flow, component
  2. Who uses it? — User type, permissions
  3. What's the goal? — What does success look like?

Step 2: List Data Needs

For each screen/​component, describe:

Data I need to display:

  • What information appears on screen?
  • What's the relationship between pieces?
  • What determines visibility/​state?

Actions user can perform:

  • What can the user do?
  • What's the expected outcome?
  • What feedback should they see?

States I need to handle:

  • Loading, empty, error, success
  • Edge cases (partial data, expired, etc.)

Step 3: Surface Uncertainties

List what you're unsure about:

  • Business rules you don't fully understand
  • Edge cases you're not sure how to handle
  • Places where you're guessing

These invite backend to clarify or push back.

Step 4: Leave Room for Discussion

End with open questions:

  • "Would it make sense to...?"
  • "Should I expect...?"
  • "Is there a simpler way to...?"

Output Format

Create .claude/​docs/​ai/<feature-name>/​backend-requirements.md:

# Backend Requirements: <Feature Name>

## Context
[What we're building, who it's for, what problem it solves]

## Screens/​Components

### <Screen/​Component Name>
**Purpose**: What this screen does

**Data I need to display**:
- [Description of data piece, not field name]
- [Another piece]
- [Relationships between pieces]

**Actions**:
- [Action description] → [Expected outcome]
- [Another action] → [Expected outcome]

**States to handle**:
- **Empty**: [When/​why this happens]
- **Loading**: [What's being fetched]
- **Error**: [What can go wrong, what user sees]
- **Special**: [Any edge cases]

**Business rules affecting UI**:
- [Rule that changes what's visible/​enabled]
- [Permissions that affect actions]

### <Next Screen/​Component>
...

## Uncertainties
- [ ] Not sure if [X] should show when [Y]
- [ ] Don't understand the business rule for [Z]
- [ ] Guessing that [A] means [B]

## Questions for Backend
- Would it make sense to combine [X] and [Y]?
- Should I expect [Z] to always be present?
- Is there existing data I can reuse for [W]?

## Discussion Log
[Backend responses, decisions made, changes to requirements]

Good vs. Bad Requests

Bad (Dictating Implementation)

"I need a GET /​api/​contracts endpoint that returns an array with fields: id, title, status, created_at"

Good (Describing Needs)

"I need to show a list of contracts. Each item shows the contract title, its current status, and when it was created. User should be able to filter by status."

Bad (Assuming Structure)

"The provider object should be nested inside the contract response"

Good (Describing Relationship)

"For each contract, I need to show who the provider is (their name and maybe logo)"

Bad (No Context)

"I need contract data"

Good (With Context)

"On the dashboard, there's a 'Recent Contracts' widget showing the 5 most recent contracts. User clicks one to go to detail page."


Encouraging Pushback

Include these prompts in your requirements:

  • "Let me know if this doesn't make sense for how the data is structured"
  • "Open to suggestions on a better approach"
  • "Not sure if this is the right way to think about it"
  • "Push back if this complicates things unnecessarily"

Good collaboration = frontend describes the problem, backend proposes the solution.


Rules

  • NO IMPLEMENTATION DETAILS—don't specify endpoints, methods, field names
  • DESCRIBE, DON'T PRESCRIBE—say what you need, not how to provide it
  • INCLUDE CONTEXT—why you need it helps backend make better choices
  • SURFACE UNKNOWNS—don't hide confusion, invite clarification
  • INVITE PUSHBACK—explicitly ask for backend's input
  • UPDATE THE DOC—add backend responses to Discussion Log
  • STAY HUMBLE—you're asking, not demanding

After Backend Responds

Update the requirements doc:

  1. Add responses to Discussion Log
  2. Adjust requirements based on feedback
  3. Mark resolved uncertainties
  4. Note any decisions made

The doc becomes the source of truth for what was agreed.

More skills from fabioeducacross

notion-meeting-intelligence logo
fabioeducacross/DesignSystem-Vuexy

notion-meeting-intelligence

Prepare meeting materials with Notion context and Codex research; use when gathering context, drafting agendas/pre-reads, and tailoring materials to attendees.

0 0
View
HTML Injection Testing logo
fabioeducacross/DesignSystem-Vuexy

HTML Injection Testing

This skill should be used when the user asks to "test for HTML injection", "inject HTML into web pages", "perform HTML injection attacks", "deface web applications", or "test content injection vulnerabilities". It provides comprehensive HTML injection attack techniques and testing methodologies.

0 0
View
geopandas logo
fabioeducacross/DesignSystem-Vuexy

geopandas

Python library for working with geospatial vector data including shapefiles, GeoJSON, and GeoPackage files. Use when working with geographic data for spatial analysis, geometric operations, coordinate transformations, spatial joins, overlay operations, choropleth mapping, or any task involving re...

0 0
View
web-performance-optimization logo
fabioeducacross/DesignSystem-Vuexy

web-performance-optimization

Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance

0 0
View
form-validation-educacross logo
fabioeducacross/DesignSystem-Vuexy

form-validation-educacross

Implement form validation with VeeValidate 3 and i18n integration in Educacross Front Office. Use when user says "validação", "form validation", "VeeValidate", "validate form", "formulário", or needs to validate user input.

0 0
View
social-media-analyzer logo
fabioeducacross/DesignSystem-Vuexy

social-media-analyzer

Social media campaign analysis and performance tracking. Calculates engagement rates, ROI, and benchmarks across platforms. Use for analyzing social media performance, calculating engagement rate, measuring campaign ROI, comparing platform metrics, or benchmarking against industry standards.

0 0
View
istio-traffic-management logo
fabioeducacross/DesignSystem-Vuexy

istio-traffic-management

Configure Istio traffic management including routing, load balancing, circuit breakers, and canary deployments. Use when implementing service mesh traffic policies, progressive delivery, or resilience patterns.

0 0
View
vuex-module-creator logo
fabioeducacross/DesignSystem-Vuexy

vuex-module-creator

Create Vuex modules for page-level state management following Educacross patterns (dynamic registration, reset mutations, getter/setter pairs). Use when user says "create Vuex module", "state management", "módulo Vuex", "page module", or needs to manage page-specific state.

0 0
View
react-useeffect logo
fabioeducacross/DesignSystem-Vuexy

react-useeffect

React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.

0 0
View
image-enhancer logo
fabioeducacross/DesignSystem-Vuexy

image-enhancer

Improves the quality of images, especially screenshots, by enhancing resolution, sharpness, and clarity. Perfect for preparing images for presentations, documentation, or social media posts.

0 0
View
task-execution-engine logo
fabioeducacross/DesignSystem-Vuexy

task-execution-engine

Execute implementation tasks from design documents using markdown checkboxes. Use when (1) implementing features from feature-design-assistant output, (2) resuming interrupted work, (3) batch executing tasks. Triggers on 'start implementation', 'run tasks', 'resume'.

0 0
View
pydicom logo
fabioeducacross/DesignSystem-Vuexy

pydicom

Python library for working with DICOM (Digital Imaging and Communications in Medicine) files. Use this skill when reading, writing, or modifying medical imaging data in DICOM format, extracting pixel data from medical images (CT, MRI, X-ray, ultrasound), anonymizing DICOM files, working with DICO...

0 0
View

Popular AI tools

Kaiber logo
Video

Kaiber

Generate, edit, and beat-sync AI video with leading models in one workspace.

Paid
View
Vimcal logo
Productivity

Vimcal

The world's fastest calendar for remote work

Free
View

Transform Your Design with AI Designer by ImgCreator.ai

Freemium
View
Akool AI logo
Content & writing

Akool AI

Revolutionizing Video Production with AI-Powered Creativity

Paid
View

Extend an image past the frame and let AI fill the new aspect ratio.

Freemium
View
StarByFace logo
Security

StarByFace

Discover your celebrity doppelgänger with StarByFace!

Free
View
C

ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.

Freemium
View
Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View