SkillAgentSearch skills...

faq-page

A Frequently Asked Questions (FAQ) page with collapsible accordion sections, search functionality, and category filtering

GenerateConvertImprove

Install / Use

npx skills add nexu-io/open-design --skill faq-page

Installs into whichever agent you are using.

About this skill
📄

SKILL.md

Installable skill definition

Quality Score

90/100

Category

Design

Supported Platforms

Universal

Our assessment of faq-page

faq-page scores 90/100 on our quality scale, 48th of 133 Design skills we index (top 37%).

Its SKILL.md is 4.0 KB long, split into 4 sections with 1 code example: a solid amount of guidance for an agent.

With 97,896 GitHub stars, it is one of the more widely adopted skills in the catalogue.

Substance
26/30
Structure
12/20
Description
15/15
Adoption
20/20
Freshness
15/15

Maintenance, license and trust

  • The repository was last updated today, so faq-page is actively maintained.
  • It is released under the Apache-2.0 license, a permissive license that allows use, modification and commercial use with attribution.
  • Its trust signals score 100/100, with no cautions. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.

faq-page compared with similar skills

All 4 of these similar skills score higher than faq-page; compare them before choosing.

SkillScoreStarsUpdatedFormat
faq-page (this skill)by nexu-io9097.9ktodaySKILL.md
algorithmic-artby anthropics100177.9k2d agoSKILL.md
pptxby anthropics100177.9k2d agoSKILL.md
designby nextlevelbuilder100130.2k3d agoSKILL.md
ui-ux-pro-maxby nextlevelbuilder100130.2k3d agoSKILL.md

Frequently asked questions

How do I install faq-page?
Run npx skills add nexu-io/open-design --skill faq-page. The install tabs above show the steps for each supported agent.
Which AI agents does faq-page work with?
It is written for Universal, as a SKILL.md file. Other agents that read the same format can often use it too.
Is faq-page safe to use?
It is Apache-2.0-licensed and scores 100/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
Is faq-page still maintained?
The repository was last updated today, so faq-page is actively maintained.

Skill content

View source on GitHub

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

  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 support?
  • Where can I find your terms of service?

Related Skills

algorithmic-art

177.9k

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.

pptx

177.9k

Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an em…

design

130.2k

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG…

ui-ux-pro-max

130.2k

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation.

nexu-io

View profile

View on GitHub
GitHub Stars97.9k
CategoryDesign
Updated15h ago
Forks11.4k
nexu-io/faq-page

Languages

TypeScript

Trust signals

100/100

From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.

No cautions