faq-page
nexu-io/open-design
Collapsible FAQ page with search and category filtering for support content.
What is faq-page?
A single-page FAQ component with accordion sections, real-time search, and category filters. Use when a brief requests an FAQ, help center, Q&A, or support page.
- Collapsible accordion sections for question/answer pairs with smooth expand/collapse animations
- Real-time search filtering across questions and answers (case-insensitive)
- Category pill filters to organize FAQs into 3–4 logical groups
- Semantic HTML with ARIA attributes for keyboard navigation and accessibility
- Mobile-friendly design with tappable accordion headers and responsive layout
- Footer CTA section for additional support contact options
How to install faq-page
npx skills add https://github.com/nexu-io/open-design --skill faq-page- Active DESIGN.md file with component tokens for interactive elements
- Design system tokens for color, typography, layout, and components
- 12–18 FAQ entries or domain context to generate realistic questions
How to use faq-page
- 1.Review the injected DESIGN.md and extract component tokens for accordion headers, search input, and category pills
- 2.Determine the domain from the brief and write or gather 12–18 FAQ entries across 3–4 categories
- 3.Create a single HTML document with header, search bar, category filters, accordion sections, and footer CTA
- 4.Implement JavaScript for real-time search filtering and category-based show/hide functionality
- 5.Test keyboard navigation (Tab through questions, Enter to expand) and mobile responsiveness
- 6.Verify answers are concise (2–4 sentences) and questions are specific and realistic
Use cases
- Building a help center or support page for a SaaS product
- Creating a customer FAQ section for e-commerce or service websites
- Organizing product documentation into searchable Q&A format
- Providing self-service support to reduce support ticket volume
- Displaying domain-specific FAQs (billing, account, technical, general)
- Product managers and support teams building help centers
- Web developers creating customer-facing support pages
- Designers implementing FAQ sections in larger sites
- Customer success teams managing self-service documentation
faq-page FAQ
Ask for more content or generate realistic questions based on the domain. For 1–5 FAQs, skip categories and search; display a simple list instead.
Break answers longer than 100 words into paragraphs or bullet points to maintain readability and scannability.
The skill supports both patterns; choose based on UX preference. Single-item expansion is common for cleaner presentation.
Use semantic `<details>` and `<summary>` elements for progressive enhancement, or custom JS with proper ARIA attributes (role, aria-expanded, aria-controls).
JavaScript filters questions by matching text in both the question and answer fields, case-insensitive, in real-time as the user types.
Full 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.
field-notes-editorial-template
Premium editorial data report template with serif typography, pastel insight cards, and retention charts in a single HTML file.
figma-code-connect-components
Connect Figma design components to code components for automatic design-system synchronization.
figma-create-design-system-rules
Generate project-specific design system rules for Figma-to-code workflows.
figma-create-new-file
Create a new blank Figma Design or FigJam file for design workflows.
figma-generate-design
Build or update Figma screens from code or descriptions using design system components and tokens.
figma-generate-library
Build or update a professional-grade design system library in Figma from a codebase.