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".
Security Assessment
About faq-page
The faq-page skill is a self-contained UI generator within Open Design that produces a single, complete FAQ or help-center page with collapsible accordion sections, real-time search, and category filtering. It solves the recurring need to hand-build support pages: given a brief mentioning "FAQ", "help center", "questions", or a "support page" (with triggers also covering Chinese terms like 常见问题 and 帮助中心), it generates a polished, accessible page ready to ship as a single HTML document with inline CSS and JS.
Unlike the other entries in this batch, this skill contains a real, detailed workflow rather than an upstream pointer. It instructs the agent to read the active DESIGN.md design system, pick a domain from the brief, and write 12 to 18 realistic FAQ entries across 3 to 4 categories, with defined edge cases (simplifying to a plain list for fewer than 5 FAQs, splitting very long answers). The output structure is prescribed: a header, a functional search bar, pill-style category filters defaulting to "All", an accordion of question/answer pairs using semantic details/summary or ARIA-annotated custom JS, and a footer call-to-action. A self-check step enforces keyboard navigation, case-insensitive search, mobile friendliness, and accessibility. The result is emitted between artifact tags as one HTML file.
The target users are designers, developers, and product teams who need a support or FAQ page quickly, especially those working within a design-system-driven prototyping flow. It is well suited to SaaS, ecommerce, and service-product briefs where a clean, filterable, accessible FAQ page is required.
FAQ
What does this skill produce?
A single self-contained HTML FAQ or help-center page with collapsible accordion sections, real-time search, and category filtering, with CSS and JS inline.
How many FAQ entries does it generate?
It targets 12 to 18 realistic entries across 3 to 4 categories, but simplifies to a plain list for 1 to 5 FAQs and asks for more content if the brief provides fewer than 8.
Does it require a design system?
Yes. The workflow reads an active DESIGN.md for color, typography, layout, and component tokens used on accordion headers, the search input, and category pills.
What accessibility features are built in?
Keyboard navigation (Tab through questions, Enter to expand), semantic details/summary or ARIA attributes, case-insensitive search, and mobile-friendly tappable headers.
How is the output delivered?
As a single HTML document emitted between artifact tags, with one sentence of text before the artifact and nothing after.
Install faq-page
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
nexu-io/open-design