Agent skill · design visual · nexu-io
faq-page
A Frequently Asked Questions (FAQ) page with collapsible accordion sections, search functionality, and category filtering. Use when the brief asks for "FAQ", "help center", "questions", or "support page".
Why this skill is useful
Provides a structured approach to creating an FAQ page with specific HTML and JS requirements that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
FAQ Page Skill Produce a single FAQ page with collapsible accordion sections, search, and category filtering. Workflow 1. Read the active DESIGN.md (injected above). Use the component tokens for interactive elements (accordion headers, search input, category pills). 2. Pick the domain from the brief (e.g., SaaS product, e-commerce, service) and write 12–18 real FAQ entries across 3–4 categories. Edge cases: If the brief provides fewer than 8 FAQs, ask for more content or generate realistic questions based on the domain. For 1–5 FAQs, skip categories and search; show a simple list. For very long answers (>100 words), break into paragraphs or bullet points to maintain readability. 3. Sections, in order: Header — page title ("Frequently Asked Questions" or "Help Center"), optional subtitle (1 sentence explaining what users can find here). Search bar — prominent search input with placeholder text and icon. Functional JS to filter questions in real-time. Category filters — 3–4 pill-style buttons to filter by category (e.g., "Billing", "Account", "Technical", "General"). "All" selected by default. FAQ accordion — collapsible question/answer pairs: Question as clickable header with expand/collapse icon (chevron or plus/minus). Answer hidden by default, expands on click with smooth animation. Each entry has data-category attribute for filtering. Footer CTA — "Still have questions?" section with contact link or support email. 4. Write a single HTML document: <!doctype html> through </html>, CSS and JS inline. Accordion uses semantic HTML (<details> and <summary> for progressive enhancement, or custom JS with proper ARIA attributes). Search filters questions by matching text in question or answer. Category filters show/hide questions based on data-category. Smooth transitions for expand/collapse (max-height or grid-template-rows). data-od-id on header, search, categories, accordion container, footer. 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/faq-page