{"id":"356b64c5-0b5c-40f8-9d5e-7750812c1a74","shortId":"z6S5Ct","kind":"skill","title":"frontend-to-backend-requirements","tagline":"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.","description":"# Backend Requirements Mode\n\nYou are a frontend developer documenting what data you need from backend. You describe the **what**, not the **how**. Backend owns implementation details.\n\n> **No Chat Output**: ALL responses go to `.claude/docs/ai/<feature-name>/backend-requirements.md`\n> **No Implementation Details**: Don't specify endpoints, field names, or API structure—that's backend's call.\n\n---\n\n## The Point\n\nThis mode is for frontend devs to communicate data needs:\n- What data do I need to render this screen?\n- What actions should the user be able to perform?\n- What business rules affect the UI?\n- What states and errors should I handle?\n\n**You're requesting, not demanding.** Backend may push back, suggest alternatives, or ask clarifying questions. That's healthy collaboration.\n\n---\n\n## What You Own vs. What Backend Owns\n\n| Frontend Owns | Backend Owns |\n|---------------|--------------|\n| What data is needed | How data is structured |\n| What actions exist | Endpoint design |\n| UI states to handle | Field names, types |\n| User-facing validation | API conventions |\n| Display requirements | Performance/caching |\n\n---\n\n## Workflow\n\n### Step 1: Describe the Feature\n\nBefore listing requirements:\n\n1. **What is this?** — Screen, flow, component\n2. **Who uses it?** — User type, permissions\n3. **What's the goal?** — What does success look like?\n\n### Step 2: List Data Needs\n\nFor each screen/component, describe:\n\n**Data I need to display:**\n- What information appears on screen?\n- What's the relationship between pieces?\n- What determines visibility/state?\n\n**Actions user can perform:**\n- What can the user do?\n- What's the expected outcome?\n- What feedback should they see?\n\n**States I need to handle:**\n- Loading, empty, error, success\n- Edge cases (partial data, expired, etc.)\n\n### Step 3: Surface Uncertainties\n\nList what you're unsure about:\n- Business rules you don't fully understand\n- Edge cases you're not sure how to handle\n- Places where you're guessing\n\n**These invite backend to clarify or push back.**\n\n### Step 4: Leave Room for Discussion\n\nEnd with open questions:\n- \"Would it make sense to...?\"\n- \"Should I expect...?\"\n- \"Is there a simpler way to...?\"\n\n---\n\n## Output Format\n\nCreate `.claude/docs/ai/<feature-name>/backend-requirements.md`:\n\n```markdown\n# Backend Requirements: <Feature Name>\n\n## Context\n[What we're building, who it's for, what problem it solves]\n\n## Screens/Components\n\n### <Screen/Component Name>\n**Purpose**: What this screen does\n\n**Data I need to display**:\n- [Description of data piece, not field name]\n- [Another piece]\n- [Relationships between pieces]\n\n**Actions**:\n- [Action description] → [Expected outcome]\n- [Another action] → [Expected outcome]\n\n**States to handle**:\n- **Empty**: [When/why this happens]\n- **Loading**: [What's being fetched]\n- **Error**: [What can go wrong, what user sees]\n- **Special**: [Any edge cases]\n\n**Business rules affecting UI**:\n- [Rule that changes what's visible/enabled]\n- [Permissions that affect actions]\n\n### <Next Screen/Component>\n...\n\n## Uncertainties\n- [ ] Not sure if [X] should show when [Y]\n- [ ] Don't understand the business rule for [Z]\n- [ ] Guessing that [A] means [B]\n\n## Questions for Backend\n- Would it make sense to combine [X] and [Y]?\n- Should I expect [Z] to always be present?\n- Is there existing data I can reuse for [W]?\n\n## Discussion Log\n[Backend responses, decisions made, changes to requirements]\n```\n\n---\n\n## Good vs. Bad Requests\n\n### Bad (Dictating Implementation)\n> \"I need a GET /api/contracts endpoint that returns an array with fields: id, title, status, created_at\"\n\n### Good (Describing Needs)\n> \"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.\"\n\n### Bad (Assuming Structure)\n> \"The provider object should be nested inside the contract response\"\n\n### Good (Describing Relationship)\n> \"For each contract, I need to show who the provider is (their name and maybe logo)\"\n\n### Bad (No Context)\n> \"I need contract data\"\n\n### Good (With Context)\n> \"On the dashboard, there's a 'Recent Contracts' widget showing the 5 most recent contracts. User clicks one to go to detail page.\"\n\n---\n\n## Encouraging Pushback\n\nInclude these prompts in your requirements:\n\n- \"Let me know if this doesn't make sense for how the data is structured\"\n- \"Open to suggestions on a better approach\"\n- \"Not sure if this is the right way to think about it\"\n- \"Push back if this complicates things unnecessarily\"\n\n**Good collaboration = frontend describes the problem, backend proposes the solution.**\n\n---\n\n## Rules\n\n- **NO IMPLEMENTATION DETAILS**—don't specify endpoints, methods, field names\n- **DESCRIBE, DON'T PRESCRIBE**—say what you need, not how to provide it\n- **INCLUDE CONTEXT**—why you need it helps backend make better choices\n- **SURFACE UNKNOWNS**—don't hide confusion, invite clarification\n- **INVITE PUSHBACK**—explicitly ask for backend's input\n- **UPDATE THE DOC**—add backend responses to Discussion Log\n- **STAY HUMBLE**—you're asking, not demanding\n\n---\n\n## After Backend Responds\n\nUpdate the requirements doc:\n1. Add responses to Discussion Log\n2. Adjust requirements based on feedback\n3. Mark resolved uncertainties\n4. Note any decisions made\n\nThe doc becomes the source of truth for what was agreed.","tags":["frontend","backend","requirements","agent","toolkit","softaworks","agent-skills","automation","claude","claude-code","coding-agent","development"],"capabilities":["skill","source-softaworks","skill-frontend-to-backend-requirements","topic-agent-skills","topic-automation","topic-claude","topic-claude-code","topic-coding-agent","topic-development"],"categories":["agent-toolkit"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/softaworks/agent-toolkit/frontend-to-backend-requirements","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add softaworks/agent-toolkit","source_repo":"https://github.com/softaworks/agent-toolkit","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 1689 github stars · SKILL.md body (5,336 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-03T00:52:49.407Z","embedding":null,"createdAt":"2026-04-18T21:54:31.970Z","updatedAt":"2026-05-03T00:52:49.407Z","lastSeenAt":"2026-05-03T00:52:49.407Z","tsv":"'/api/contracts':519 '/backend-requirements.md':77,359 '1':199,206,763 '2':213,231,769 '3':220,293,775 '4':332,779 '5':618 'abl':122,560 'action':117,177,258,401,402,407,447 'add':743,764 'adjust':770 'affect':128,436,446 'agre':794 'altern':148 'alway':487 'anoth':396,406 'api':19,33,88,192 'appear':246 'approach':659 'array':524 'ask':150,735,753 'assum':566 'b':469 'back':146,330,673 'backend':4,11,22,26,43,57,65,92,143,162,166,325,361,472,501,685,720,737,744,757 'bad':510,512,565,597 'base':772 'becom':786 'better':658,722 'build':367 'busi':126,302,434,461 'call':94 'case':287,310,433 'chang':440,505 'chat':70 'choic':723 'clarif':731 'clarifi':151,327 'claude/docs/ai':76,358 'click':623 'collabor':156,680 'combin':478 'communic':18,104 'complic':676 'compon':212 'confus':729 'context':363,599,606,714 'contract':542,547,576,583,602,614,621 'convent':193 'creat':357,530,556 'current':550 'dashboard':609 'data':8,29,38,53,105,108,169,173,233,239,289,384,391,493,603,650 'decis':503,782 'demand':142,755 'describ':37,59,200,238,533,579,682,700 'descript':389,403 'design':180 'detail':68,80,628,692 'determin':256 'dev':102 'develop':12,50 'dictat':513 'discuss':336,499,747,767 'display':194,243,388 'doc':742,762,785 'document':6,51 'doesn':643 'edg':286,309,432 'empti':283,413 'encourag':630 'end':337 'endpoint':84,179,520,696 'error':134,284,422 'etc':291 'exist':178,492 'expect':270,348,404,408,484 'expir':290 'explicit':734 'face':190 'featur':202 'feedback':273,774 'fetch':421 'field':85,185,394,526,698 'filter':562 'flow':211 'format':356 'frontend':2,7,15,49,101,164,681 'frontend-to-backend-requir':1 'fulli':307 'get':518 'go':74,425,626 'goal':224 'good':508,532,578,604,679 'guess':322,465 'handl':137,184,281,317,412 'happen':416 'healthi':155 'help':719 'hide':728 'humbl':750 'id':527 'implement':67,79,514,691 'includ':632,713 'inform':245 'input':739 'insid':574 'invit':324,730,732 'item':544 'know':640 'leav':333 'let':638 'like':229 'list':204,232,296,540 'load':282,417 'log':500,748,768 'logo':596 'look':228 'made':504,783 'make':343,475,645,721 'mark':776 'markdown':360 'may':144 'mayb':595 'mean':468 'method':697 'mode':45,98 'name':86,186,378,395,593,699 'need':9,16,32,39,55,106,111,171,234,241,279,386,516,534,536,585,601,707,717 'nest':573 'note':780 'object':570 'one':624 'open':339,653 'outcom':271,405,409 'output':71,355 'own':66,163,165,167 'page':629 'partial':288 'perform':124,261 'performance/caching':196 'permiss':219,444 'piec':254,392,397,400 'place':318 'point':96 'prescrib':703 'present':489 'problem':373,684 'prompt':634 'propos':686 'provid':569,590,711 'purpos':379 'push':145,329,672 'pushback':631,733 'question':152,340,470 're':139,299,312,321,366,752 'recent':613,620 'relationship':252,398,580 'render':113 'request':140,511 'requir':5,20,27,34,44,195,205,362,507,637,761,771 'resolv':777 'respond':758 'respons':73,502,577,745,765 'return':522 'reus':496 'right':666 'room':334 'rule':127,303,435,438,462,689 'say':25,704 'screen':115,210,248,382 'screen/component':237,377 'screens/components':376 'see':276,429 'sens':344,476,646 'show':454,538,545,587,616 'simpler':352 'skill' 'skill-frontend-to-backend-requirements' 'solut':688 'solv':375 'sourc':788 'source-softaworks' 'special':430 'specifi':83,695 'state':132,182,277,410 'status':529,551,564 'stay':749 'step':198,230,292,331 'structur':89,175,567,652 'success':227,285 'suggest':147,655 'sure':314,450,661 'surfac':294,724 'thing':677 'think':669 'titl':528,548 'topic-agent-skills' 'topic-automation' 'topic-claude' 'topic-claude-code' 'topic-coding-agent' 'topic-development' 'truth':790 'type':187,218 'ui':42,130,181,437 'uncertainti':295,448,778 'understand':308,459 'unknown':725 'unnecessarili':678 'unsur':300 'updat':740,759 'use':13,215 'user':24,120,189,217,259,265,428,557,622 'user-fac':188 'valid':191 'visibility/state':257 'visible/enabled':443 'vs':160,509 'w':498 'way':353,667 'when/why':414 'widget':615 'workflow':197 'would':341,473 'wrong':426 'x':452,479 'y':456,481 'z':464,485","prices":[{"id":"0de9f1f4-af16-4379-adad-a1666fb98f21","listingId":"356b64c5-0b5c-40f8-9d5e-7750812c1a74","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"softaworks","category":"agent-toolkit","install_from":"skills.sh"},"createdAt":"2026-04-18T21:54:31.970Z"}],"sources":[{"listingId":"356b64c5-0b5c-40f8-9d5e-7750812c1a74","source":"github","sourceId":"softaworks/agent-toolkit/frontend-to-backend-requirements","sourceUrl":"https://github.com/softaworks/agent-toolkit/tree/main/skills/frontend-to-backend-requirements","isPrimary":false,"firstSeenAt":"2026-04-18T21:54:31.970Z","lastSeenAt":"2026-05-03T00:52:49.407Z"}],"details":{"listingId":"356b64c5-0b5c-40f8-9d5e-7750812c1a74","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"softaworks","slug":"frontend-to-backend-requirements","github":{"repo":"softaworks/agent-toolkit","stars":1689,"topics":["agent-skills","ai","automation","claude","claude-code","coding-agent","development"],"license":"mit","html_url":"https://github.com/softaworks/agent-toolkit","pushed_at":"2026-03-05T16:46:24Z","description":"A curated collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities across development, documentation, planning, and professional workflows.","skill_md_sha":"09352d3b900ef551bce8c4a5df80eb9b386091c6","skill_md_path":"skills/frontend-to-backend-requirements/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/softaworks/agent-toolkit/tree/main/skills/frontend-to-backend-requirements"},"layout":"multi","source":"github","category":"agent-toolkit","frontmatter":{"name":"frontend-to-backend-requirements","description":"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."},"skills_sh_url":"https://skills.sh/softaworks/agent-toolkit/frontend-to-backend-requirements"},"updatedAt":"2026-05-03T00:52:49.407Z"}}