Faq Page
Generate a desktop FAQ / help-center prototype with accordion, search, and category filters aligned to an active DESIGN.md.
Overview
FAQ Page is an agent skill for the Build phase that prototypes a searchable, filterable FAQ help-center page from DESIGN.md tokens.
Install
npx skills add https://github.com/nexu-io/open-design --skill faq-pageWhat is this skill?
- Single-page FAQ with collapsible accordion sections plus search and category filtering
- Workflow: read DESIGN.md tokens, pick domain, write 12–18 FAQs across 3–4 categories
- Edge cases: 1–5 FAQs skip categories/search; long answers split for readability
- Ordered sections: header, optional hero, search, category pills, FAQ list, contact CTA
- Open-design craft requirements: typography, accessibility-baseline, state-coverage
- 12–18 FAQ entries across 3–4 categories in the default workflow
- craft.requires: typography, accessibility-baseline, state-coverage
Adoption & trust: 774 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your brief says “FAQ” or “help center” but you only have a design system doc and no structured page with real questions, accordions, and filter UX.
Who is it for?
Solo builders using open-design who need a credible support page prototype in one agent session.
Skip if: Headless CMS wiring, multilingual FAQ backends, or mobile-native apps without adapting the desktop HTML prototype.
When should I use this skill?
Brief asks for FAQ, frequently asked questions, help center, support page, or Q&A (including 常见问题 / 帮助中心 triggers).
What do I get? / Deliverables
You get index.html with header, search, category pills, 12–18 categorized FAQ entries in accordions, and optional contact CTA—ready to refine or embed in your app.
- index.html FAQ page with accordion, search, and category filtering
- 12–18 domain-specific FAQ entries unless brief supplies fewer (with simplified layout rules)
Recommended Skills
Journey fit
Canonical shelf is Build because the skill outputs an HTML prototype page—implementation work on the marketing or product site—not discovery or ops monitoring. Frontend subphase matches prototype mode, HTML entry (index.html), and component tokens for accordion, search, and category pills.
How it compares
A DESIGN.md-driven page template—not a markdown doc generator or MCP content API.
Common Questions / FAQ
Who is faq-page for?
Indie builders and designers using nexu-io open-design who need FAQ, help center, or support pages that match an injected DESIGN.md.
When should I use faq-page?
During Build when prototyping desktop support UX, or in Validate when a landing needs a believable FAQ section before you commit to copy in production.
Is faq-page safe to install?
It generates local HTML prototypes; treat repo access like any design skill. Check the Security Audits panel on this Prism page before install.
SKILL.md
READMESKILL.md - Faq Page
# 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. **Self-check**: - Questions are specific and realistic (not generic placeholders). - Answers are concise (2–4 sentences) but complete. - Keyboard navigation works (Tab through questions, Enter to expand). - Search is case-insensitive and filters by matching text. - Only one accordion item expanded at a time (optional, depends on UX preference). - Mobile-friendly (accordion headers are tappable, search is usable). ## Output contract Emit between `<artifact>` tags: ``` <artifact identifier="faq-page" type="text/html" title="FAQ Page"> <!doctype html> <html>...</html> </artifact> ``` One sentence before the artifact, nothing after. ## Example questions by category **Billing** - How do I update my payment method? - What payment methods do you accept? - Can I get a refund? - How do I cancel my subscription? **Account** - How do I reset my password? - Can I change my email address? - How do I delete my account? - What happens to my data after I cancel? **Technical** - What browsers do you support? - Is there a mobile app? - How do I export my data? - What are your API rate limits? **General** - What is [Product Name]? - How do I get started? - Do you offer customer s