What FAQ Page does
The FAQ Page skill provides a structured approach to building a comprehensive FAQ section for various domains such as SaaS products, e-commerce, or services. It allows users to generate a single HTML document featuring collapsible accordion sections for questions and answers, a search bar for quick access, and category filters to enhance user experience. This skill is particularly useful for developers and designers who need to create help centers or support pages efficiently.
To utilize this skill, users start by reading the active DESIGN.md file to understand the component tokens for interactive elements. They then select a domain and draft 12 to 18 relevant FAQ entries, organizing them into 3 to 4 categories. The skill accommodates different scenarios, such as fewer than 8 FAQs, where it simplifies the layout by omitting categories and search functionality. The resulting FAQ page is designed to be user-friendly, featuring smooth animations for expanding answers and ensuring that the layout is mobile-responsive.
The output is a complete HTML document that adheres to semantic standards, including the use of <details> and <summary> tags for accessibility. It supports keyboard navigation and ensures that only one accordion item can be expanded at a time, depending on user preference. With this skill, developers can streamline the creation of FAQ pages, making it easier for end-users to find answers to their questions quickly and effectively.
When to use it
Use this skill when tasked with developing a FAQ, help center, or support page that requires organized information and user-friendly navigation.
When not to use it
This skill may not be suitable for projects requiring highly customized FAQ layouts or advanced interactive features beyond the provided functionality.
What you can build with it
SaaS Help Center
Generate a comprehensive help center for a SaaS product with categorized FAQs to assist users.
E-commerce Support Page
Create a support page for an e-commerce site, helping customers find answers about billing and account issues.
Service-Based FAQ
Develop an FAQ section for a service-based business, providing clear answers to common customer inquiries.
How to install FAQ Page
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/faq-page --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioFAQ 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?
Frequently asked questions about FAQ Page
Similar skills
Markdown to HTML Conversion
Efficiently convert Markdown documents to HTML.
Code Tour
Create structured walkthroughs for codebases.
Acquire Codebase Knowledge
Streamline onboarding with comprehensive codebase documentation.
Documentation & Modernization
Streamline codebase documentation and modernization planning.
Azure Resource Visualizer
Generate architecture diagrams for Azure resources.
CLAUDE.md Improver
Optimize your CLAUDE.md files for better project context.