How to install faq-page
npx skills add https://github.com/nexu-io/open-design --skill faq-pageFull instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: faq-page description: | 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". triggers:
- "faq"
- "FAQ"
- "frequently asked questions"
- "help center"
- "support page"
- "Q&A"
- "常见问题"
- "帮助中心" od: mode: prototype platform: desktop scenario: support preview: type: html entry: index.html design_system: requires: true sections: [color, typography, layout, components] craft: requires: [typography, accessibility-baseline, state-coverage]
FAQ Page Skill
Produce a single FAQ page with collapsible accordion sections, search, and category filtering.
Workflow
- Read the active DESIGN.md (injected above). Use the component tokens for interactive elements (accordion headers, search input, category pills).
- 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.
- Edge cases:
- 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-categoryattribute for filtering.
- Footer CTA — "Still have questions?" section with contact link or support email.
- 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-idon header, search, categories, accordion container, footer.
- 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 support?
- Where can I find your terms of service?
Related skills
More from nexu-io/open-design and the wider catalog.
ui-ux-pro-max
|
web-design-guidelines
|
frontend-design
|
design-brief
|
pptx-html-fidelity-audit
Audit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with strict footer-rail + cursor-flow layout discipline. Use this skill whenever the user has a .pptx that was generated from an HTML slide deck and asks to compare/audit/verify/fix the export — including phrases like "compare ppt with html", "fidelity audit", "fix the pptx", "ppt is cut off", "footer overlap", "italic missing in pptx", "re-export the deck", "pptx-html-fidelity-audit", or any case where a python-pptx → HTML round-trip needs verification or repair. Also trigger when the user shows you a deck.html and a deck.pptx side by side and is debugging visual differences.
hatch-pet
Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.