{"id":"a94ddc01-31d2-4602-96a3-cc5ab8f3740e","shortId":"T7bDBA","kind":"skill","title":"faq-page","tagline":"A Frequently Asked Questions (FAQ) page with collapsible accordion sections,\nsearch functionality, and category filtering. Use when the brief asks for\n\"FAQ\", \"help center\", \"questions\", or \"support page\".","description":"# FAQ Page Skill\n\nProduce a single FAQ page with collapsible accordion sections, search, and category filtering.\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). Use the component tokens for\n interactive elements (accordion headers, search input, category pills).\n2. **Pick the domain** from the brief (e.g., SaaS product, e-commerce, service)\n and write 12–18 real FAQ entries across 3–4 categories.\n - **Edge cases**:\n - If the brief provides fewer than 8 FAQs, ask for more content or generate\n realistic questions based on the domain.\n - For 1–5 FAQs, skip categories and search; show a simple list.\n - For very long answers (>100 words), break into paragraphs or bullet points\n to maintain readability.\n3. **Sections**, in order:\n - **Header** — page title (\"Frequently Asked Questions\" or \"Help Center\"),\n optional subtitle (1 sentence explaining what users can find here).\n - **Search bar** — prominent search input with placeholder text and icon.\n Functional JS to filter questions in real-time.\n - **Category filters** — 3–4 pill-style buttons to filter by category\n (e.g., \"Billing\", \"Account\", \"Technical\", \"General\"). \"All\" selected by default.\n - **FAQ accordion** — collapsible question/answer pairs:\n - Question as clickable header with expand/collapse icon (chevron or plus/minus).\n - Answer hidden by default, expands on click with smooth animation.\n - Each entry has `data-category` attribute for filtering.\n - **Footer CTA** — \"Still have questions?\" section with contact link or\n support email.\n4. **Write** a single HTML document:\n - `` through ``, CSS and JS inline.\n - Accordion uses semantic HTML (`

` and `

` for progressive\n enhancement, or custom JS with proper ARIA attributes).\n - Search filters questions by matching text in question or answer.\n - Category filters show/hide questions based on `data-category`.\n - Smooth transitions for expand/collapse (max-height or grid-template-rows).\n - `data-od-id` on header, search, categories, accordion container, footer.\n5. **Self-check**:\n - Questions are specific and realistic (not generic placeholders).\n - Answers are concise (2–4 sentences) but complete.\n - Keyboard navigation works (Tab through questions, Enter to expand).\n - Search is case-insensitive and filters by matching text.\n - Only one accordion item expanded at a time (optional, depends on UX preference).\n - Mobile-friendly (accordion headers are tappable, search is usable).\n\n## Output contract\n\nEmit between `` tags:\n\n```\n\n\n...\n\n```\n\nOne sentence before the artifact, nothing after.\n\n## Example questions by category\n\n**Billing**\n- How do I update my payment method?\n- What payment methods do you accept?\n- Can I get a refund?\n- How do I cancel my subscription?\n\n**Account**\n- How do I reset my password?\n- Can I change my email address?\n- How do I delete my account?\n- What happens to my data after I cancel?\n\n**Technical**\n- What browsers do you support?\n- Is there a mobile app?\n- How do I export my data?\n- What are your API rate limits?\n\n**General**\n- What is [Product Name]?\n- How do I get started?\n- Do you offer customer support?\n- Where can I find your terms of service?","tags":["faq","page","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-faq-page","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/faq-page","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 44905 github stars · SKILL.md body (3,391 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-18T18:50:13.087Z","embedding":null,"createdAt":"2026-05-12T12:50:24.345Z","updatedAt":"2026-05-18T18:50:13.087Z","lastSeenAt":"2026-05-18T18:50:13.087Z","tsv":"'1':49,117,158 '100':132 '12':85 '18':86 '2':69,335 '3':91,143,187 '4':92,188,252,336 '5':118,320 '8':102 'accept':411 'accordion':12,42,63,207,263,317,361,375 'account':199,423,441 'across':90 'activ':52 'address':435 'anim':230 'answer':131,221,287,332 'api':470 'app':460 'aria':276 'artifact':391 'ask':6,23,104,151 'attribut':237,277 'bar':167 'base':112,292 'bill':198,398 'break':134 'brief':22,75,98 'browser':452 'bullet':138 'button':192 'cancel':420,449 'case':95,352 'case-insensit':351 'categori':17,46,67,93,121,185,196,236,288,296,316,397 'center':27,155 'chang':432 'check':323 'chevron':218 'click':227 'clickabl':213 'collaps':11,41,208 'commerc':81 'complet':339 'compon':58 'concis':334 'contact':247 'contain':318 'content':107 'contract':383 'css':259 'cta':241 'custom':272,486 'data':235,295,310,446,466 'data-categori':234,294 'data-od-id':309 'default':205,224 'delet':439 'depend':368 'design.md':53 'document':257 'domain':72,115 'e':80 'e-commerc':79 'e.g':76,197 'edg':94 'element':62 'email':251,434 'emit':384 'enhanc':270 'enter':346 'entri':89,232 'exampl':394 'expand':225,348,363 'expand/collapse':216,300 'explain':160 'export':464 'faq':2,8,25,32,38,88,103,119,206 'faq-pag':1 'fewer':100 'filter':18,47,179,186,194,239,279,289,355 'find':164,491 'footer':240,319 'frequent':5,150 'friend':374 'function':15,176 'general':201,473 'generat':109 'generic':330 'get':414,481 'grid':306 'grid-template-row':305 'happen':443 'header':64,147,214,314,376 'height':303 'help':26,154 'hidden':222 'html':256,266 'icon':175,217 'id':312 'inject':54 'inlin':262 'input':66,170 'insensit':353 'interact':61 'item':362 'js':177,261,273 'keyboard':340 'limit':472 'link':248 'list':127 'long':130 'maintain':141 'match':282,357 'max':302 'max-height':301 'method':405,408 'mobil':373,459 'mobile-friend':372 'name':477 'navig':341 'noth':392 'od':311 'offer':485 'one':360,387 'option':156,367 'order':146 'output':382 'page':3,9,31,33,39,148 'pair':210 'paragraph':136 'password':429 'payment':404,407 'pick':70 'pill':68,190 'pill-styl':189 'placehold':172,331 'plus/minus':220 'point':139 'prefer':371 'produc':35 'product':78,476 'progress':269 'promin':168 'proper':275 'provid':99 'question':7,28,111,152,180,211,244,280,285,291,324,345,395 'question/answer':209 'rate':471 'read':50 'readabl':142 'real':87,183 'real-tim':182 'realist':110,328 'refund':416 'reset':427 'row':308 'saa':77 'search':14,44,65,123,166,169,278,315,349,379 'section':13,43,144,245 'select':203 'self':322 'self-check':321 'semant':265 'sentenc':159,337,388 'servic':82,495 'show':124 'show/hide':290 'simpl':126 'singl':37,255 'skill':34 'skill-faq-page' 'skip':120 'smooth':229,297 'source-nexu-io' 'specif':326 'start':482 'still':242 'style':191 'subscript':422 'subtitl':157 'support':30,250,455,487 'tab':343 'tag':386 'tappabl':378 'technic':200,450 'templat':307 'term':493 'text':173,283,358 'time':184,366 'titl':149 'token':59 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'transit':298 'updat':402 'usabl':381 'use':19,56,264 'user':162 'ux':370 'word':133 'work':342 'workflow':48 'write':84,253","prices":[{"id":"8f7ef4ee-1e7d-4dd4-8ef1-c8cefefb4001","listingId":"a94ddc01-31d2-4602-96a3-cc5ab8f3740e","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-12T12:50:24.345Z"}],"sources":[{"listingId":"a94ddc01-31d2-4602-96a3-cc5ab8f3740e","source":"github","sourceId":"nexu-io/open-design/faq-page","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/faq-page","isPrimary":false,"firstSeenAt":"2026-05-12T12:50:24.345Z","lastSeenAt":"2026-05-18T18:50:13.087Z"}],"details":{"listingId":"a94ddc01-31d2-4602-96a3-cc5ab8f3740e","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"faq-page","github":{"repo":"nexu-io/open-design","stars":44905,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-18T18:43:11Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"567f270c89793d983a9e6c0f1b93af76cab9b96d","skill_md_path":"skills/faq-page/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/faq-page"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"faq-page","description":"A Frequently Asked Questions (FAQ) page with collapsible accordion sections,\nsearch functionality, and category filtering. Use when the brief asks for\n\"FAQ\", \"help center\", \"questions\", or \"support page\"."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/faq-page"},"updatedAt":"2026-05-18T18:50:13.087Z"}}