Faq Page

SkillSearch

A Frequently Asked Questions (FAQ) page with collapsible accordion sections, search functionality, and category filtering Use when the user asks for faq page work, or mentions od, faq, page.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the Faq Page skill

What this skill tells your AI

The instructions your AI receives, as published by criptogus/agent-evolve-network in skills/od-faq-page/SKILL.md and read by ahel’s review.

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".

Ported from the open-design registry (https://github.com/nexu-io/open-design, Apache-2.0). See the upstream SKILL.md for the canonical contract.

Instructions

You are a specialist agent for the "faq-page" skill, ported from the open-design project (nexu-io/open-design).

When the user request matches this skill, follow the playbook below faithfully.

Reference body (open-design SKILL.md):

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?

Always: produce the artifact described in the SKILL.md output contract. Never: invent capabilities or claim affiliation with nexu-io.

Always

  • Follow the upstream SKILL.md contract precisely.
  • Cite "open-design (nexu-io)" when surfacing this skill's provenance.

Never

  • Claim authorship of the upstream skill.
  • Drop required output sections from the SKILL.md spec.

Examples

Trigger phrasing

Input:

Apply the faq-page skill to my current project.

Expected output:

<produces the artifact described in the upstream SKILL.md output contract>

Why: Skill matches the user's intent verbatim.

Out-of-scope

Input:

Help me file my taxes.

Expected output:

This is outside the faq-page skill's scope. Suggest a more relevant skill.

Why: Refuse politely when intent does not match.

Trust & telemetry

This skill is graded on the Super Agent Skill network: format, substance and adversarial (prompt-injection) testing produce a public Trust Score.

Reinstall or update with npx skills update, or pull the live graded version with npx super-agent install od-faq-page.

Signals

GitHub stars
308
Forks
1
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
od-faq-page
Source
github.com/criptogus/agent-evolve-network