Frontend To Backend Requirements
This is for when you're building a UI and need to tell backend what data you need without overstepping into their territory. It writes structured markdown docs that describe what information shows on screen, what actions users can take, and what states you need to handle, but deliberately avoids specifying endpoints, field names, or API structure. The format includes sections for uncertainties and explicit invitations for pushback, which honestly feels like teaching people how to communicate rather than just documenting requirements. Everything goes into `.claude/docs/ai/<feature-name>/backend-requirements.md`. Works best if both sides actually read it and update the discussion log, otherwise you're just writing docs into the void.
- skills.sh installs
- 820
- GitHub stars
- 2.7K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add softaworks/agent-toolkit --skill frontend-to-backend-requirements --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.mdNo 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 Owns | Backend Owns |
|---|---|
| What data is needed | How data is structured |
| What actions exist | Endpoint design |
| UI states to handle | Field names, types |
| User-facing validation | API conventions |
| Display requirements | Performance/caching |
Workflow
Step 1: Describe the Feature
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/softaworks/agent-toolkit
- Categories
- Frontend Development, Backend & APIs, AI & Agent Building
- First seen
- Jun 3, 2026
More from softaworks/agent-toolkit
All 43- Excalidraw815
- Perplexity802
- Web To Markdown780
- Datadog Cli738
- Mermaid Diagrams5.2K
- Humanizer4.5K
- Database Schema Designer4.4K
- Qa Test Planner4.4K
- Writing Clearly And Concisely4.4K
- C4 Architecture4.3K
- Skill Judge4.3K
- Agent Md Refactor4.3K
- Crafting Effective Readmes4.2K
- Session Handoff4.2K
- Commit Work4.2K
- React Dev4.2K
- Marp Slide4.2K
- React Useeffect4.1K
- Codex4.1K
- Professional Communication4.1K
- Command Creator4.1K
- Dependency Updater4.1K
- Meme Factory4K
- Reducing Entropy4K
Recommended
More Frontend Development
pwa-developmentmindrally/skillsProgressive Web App development guidelines covering service workers, caching strategies, offline functionality, and installability800skills.sh installs
component-searchdiodeinc/pcbSearch for and add electronic components and reusable subcircuits to a Zener PCB project. Use when designing a board, module, or subsystem and you need a part p788skills.sh installs
salesforce-component-standardsgithub/awesome-copilotQuality standards for Salesforce Lightning Web Components (LWC), Aura components, and Visualforce pages. Covers SLDS 2 compliance, accessibility (WCAG 2.1 AA), 770skills.sh installs
hyva-cms-componenthyva-themes/hyva-ai-toolsCreate custom Hyvä CMS component. This skill should be used when the user wants to create a new Hyvä CMS component, build a Hyvä component, or needs help with c770skills.sh installs
auth0-angularauth0/agent-skillsUse when adding Auth0 login, logout, route guards, or HTTP interceptors to an Angular application. Integrates @auth0/auth0-angular for SPAs — use even if the us762skills.sh installs
css-nativedylantarre/animation-principlesUse when implementing Disney's 12 animation principles with pure CSS animations and transitions760skills.sh installs