agentsclimarketplace
Sign in

Faq page

Skill nexu-io/open-design/skills/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".From its SKILL.md

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

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

4.0 KB, 782 tokens by cl100k_base, as published. Nobody here has run it

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?

What ships with it: 1 file

16.6 KB alongside SKILL.md

Gives 0 of the 12 instructions most customer support skills give in 782 tokens

Counted across 123 of the 124 authors here whose files we hold, read 2026-08-07

  • Call RUBE_SEARCH_TOOLS first to get current schemasin 12 of 123, across 4 files
  • Confirm connection status is ACTIVE before running workflowsin 12 of 123, across 4 files
  • Stop and ask for clarification if required inputs are missingin 9 of 123, across 2 files
  • Call RUBE_MANAGE_CONNECTIONS with the helpdesk toolkitin 9 of 123, across 2 files
  • Use both timestamp and ID for cursor navigationin 8 of 123, across 1 file
  • Implement backoff on 429 responsesin 8 of 123, across 1 file
  • Parse response data defensively with fallback patternsin 8 of 123, across 1 file
  • Use this skill only when the task clearly matches the scopein 8 of 123, across 1 file
  • Pass a JSON file as the positional argumentin 7 of 123, across 1 file
  • Specify output format with the --format flagin 7 of 123, across 1 file
  • Run health, churn, and expansion scripts togetherin 7 of 123, across 1 file
  • Verify output files contain expected records before continuingin 7 of 123, across 1 file

Said here and by no other author read

  • Use design tokens for interactive elements
  • Write 12 to 18 realistic FAQ entries across 3-4 categories
  • Include a header with a title and optional subtitle
  • Include a prominent search bar with placeholder text
  • Include pill-style category filters
  • Build an accordion with expand and collapse icons

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.