Faq Page

Name: Faq Page
Author: nexu-io

nexu-io/open-design

1.7k installs
82k repo stars
Updated July 28, 2026
nexu-io/open-design

faq-page is an agent skill that agent skill for faq-page workflows documented in skill.md.

About

faq-page is an agent skill from nexu-io/open-design that agent skill for faq-page workflows documented in 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-commerc Developers invoke faq-page during operate/infra work for cloud & infrastructure tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Cloud & Infrastructure with operations vertical focus supports repeatable agent-guided delivery.

Produce a single FAQ page with collapsible accordion sections, search, and category filtering.
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.

Faq Page by the numbers

1,736 all-time installs (skills.sh)
+122 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #206 of 1,041 Cloud & Infrastructure skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

At a glance

faq-page capabilities & compatibility

Capabilities: produce a single faq page with collapsible accor · 1. **read the active design.md** (injected above · interactive elements (accordion headers, search · 2. **pick the domain** from the brief (e.g., saa · and write 12–18 real faq entries across 3–4 cate
Use cases: orchestration

From the docs

What faq-page says it does

Produce a single FAQ page with collapsible accordion sections, search, and category filtering.

SKILL.md

1. **Read the active DESIGN.md** (injected above). Use the component tokens for

SKILL.md

interactive elements (accordion headers, search input, category pills).

SKILL.md

npx skills add https://github.com/nexu-io/open-design --skill faq-page

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/faq-page.svg)](https://skillselion.com/skills/nexu-io/open-design/faq-page)

Installs	1.7k
repo stars	★ 82k
Security audit	3 / 3 scanners passed
Last updated	July 28, 2026
Repository	nexu-io/open-design ↗

What it does

Agent skill for faq-page workflows documented in SKILL.md.

Who is it for?

Developers working on cloud & infrastructure during operate tasks.

Skip if: Tasks outside Cloud & Infrastructure scope described in SKILL.md.

When should I use this skill?

Agent skill for faq-page workflows documented in SKILL.md.

What you get

Completed cloud & infrastructure workflow aligned with SKILL.md steps.

index.html FAQ page
Accordion and search components

By the numbers

Design system requires 4 sections: color, typography, layout, components
Craft checklist includes 3 requirements: typography, accessibility-baseline, state-coverage
Lists 8 trigger phrases including FAQ, help center, support page, and Q&A

Files

SKILL.mdMarkdownGitHub ↗

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?

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FAQ - Help Center</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      line-height: 1.6;
      color: #1a1a1a;
      background: #fafafa;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 60px 24px;
    }

    header {
      text-align: center;
      margin-bottom: 48px;
    }

    h1 {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 12px;
      color: #0a0a0a;
    }

    .subtitle {
      font-size: 1.125rem;
      color: #666;
    }

    .search-box {
      position: relative;
      margin-bottom: 32px;
    }

    .search-input {
      width: 100%;
      padding: 16px 48px 16px 20px;
      font-size: 1rem;
      border: 2px solid #e0e0e0;
      border-radius: 12px;
      background: white;
      transition: border-color 0.2s;
    }

    .search-input:focus {
      outline: none;
      border-color: #0066ff;
    }

    .search-icon {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }

    .categories {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 40px;
      justify-content: center;
    }

    .category-btn {
      padding: 10px 20px;
      border: 2px solid #e0e0e0;
      border-radius: 24px;
      background: white;
      color: #666;
      font-size: 0.9375rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .category-btn:hover {
      border-color: #0066ff;
      color: #0066ff;
    }

    .category-btn.active {
      background: #0066ff;
      border-color: #0066ff;
      color: white;
    }

    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .faq-item {
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      overflow: hidden;
      transition: box-shadow 0.2s;
    }

    .faq-item:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .faq-item.hidden {
      display: none;
    }

    .faq-question {
      width: 100%;
      padding: 20px 24px;
      text-align: left;
      font-size: 1.0625rem;
      font-weight: 600;
      color: #0a0a0a;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

    .faq-question:hover {
      color: #0066ff;
    }

    .faq-icon {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      transition: transform 0.3s;
    }

    .faq-item.open .faq-icon {
      transform: rotate(180deg);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }

    .faq-answer-content {
      padding: 0 24px 20px;
      color: #555;
      font-size: 1rem;
      line-height: 1.7;
    }

    .faq-item.open .faq-answer {
      max-height: 500px;
    }

    .footer-cta {
      margin-top: 64px;
      padding: 32px;
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      text-align: center;
    }

    .footer-cta h2 {
      font-size: 1.5rem;
      margin-bottom: 12px;
      color: #0a0a0a;
    }

    .footer-cta p {
      color: #666;
      margin-bottom: 20px;
    }

    .contact-link {
      display: inline-block;
      padding: 12px 32px;
      background: #0066ff;
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-weight: 600;
      transition: background 0.2s;
    }

    .contact-link:hover {
      background: #0052cc;
    }

    .no-results {
      text-align: center;
      padding: 48px 24px;
      color: #999;
      display: none;
    }

    .no-results.show {
      display: block;
    }
  </style>
</head>
<body>
  <div class="container">
    <header data-od-id="header">
      <h1>Frequently Asked Questions</h1>
      <p class="subtitle">Find answers to common questions about our product and services</p>
    </header>

    <div class="search-box" data-od-id="search">
      <input
        type="text"
        class="search-input"
        id="searchInput"
        placeholder="Search for answers..."
        aria-label="Search FAQ"
      >
      <svg class="search-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
        <path d="M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16zM18 18l-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
    </div>

    <div class="categories" data-od-id="categories">
      <button class="category-btn active" data-category="all">All</button>
      <button class="category-btn" data-category="billing">Billing</button>
      <button class="category-btn" data-category="account">Account</button>
      <button class="category-btn" data-category="technical">Technical</button>
      <button class="category-btn" data-category="general">General</button>
    </div>

    <div class="faq-list" data-od-id="faq-list">
      <!-- Billing -->
      <div class="faq-item" data-category="billing">
        <button class="faq-question" aria-expanded="false">
          <span>How do I update my payment method?</span>
          <svg class="faq-icon" viewBox="0 0 20 20" fill="none">
            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <div class="faq-answer">
          <div class="faq-answer-content">
            You can update your payment method in your account settings under the Billing section. Click on "Payment Methods", then "Add New Card" or "Edit" next to your existing card. Changes take effect immediately for future billing cycles.
          </div>
        </div>
      </div>

      <div class="faq-item" data-category="billing">
        <button class="faq-question" aria-expanded="false">
          <span>What payment methods do you accept?</span>
          <svg class="faq-icon" viewBox="0 0 20 20" fill="none">
            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <div class="faq-answer">
          <div class="faq-answer-content">
            We accept all major credit cards (Visa, Mastercard, American Express, Discover), PayPal, and bank transfers for annual plans. All payments are processed securely through Stripe.
          </div>
        </div>
      </div>

      <div class="faq-item" data-category="billing">
        <button class="faq-question" aria-expanded="false">
          <span>Can I get a refund?</span>
          <svg class="faq-icon" viewBox="0 0 20 20" fill="none">
            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <div class="faq-answer">
          <div class="faq-answer-content">
            We offer a 30-day money-back guarantee for all new subscriptions. If you're not satisfied, contact our support team within 30 days of your initial purchase for a full refund. Refunds are processed within 5-7 business days.
          </div>
        </div>
      </div>

      <!-- Account -->
      <div class="faq-item" data-category="account">
        <button class="faq-question" aria-expanded="false">
          <span>How do I reset my password?</span>
          <svg class="faq-icon" viewBox="0 0 20 20" fill="none">
            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <div class="faq-answer">
          <div class="faq-answer-content">
            Click "Forgot Password" on the login page and enter your email address. You'll receive a password reset link within a few minutes. The link expires after 24 hours for security reasons.
          </div>
        </div>
      </div>

      <div class="faq-item" data-category="account">
        <button class="faq-question" aria-expanded="false">
          <span>Can I change my email address?</span>
          <svg class="faq-icon" viewBox="0 0 20 20" fill="none">
            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <div class="faq-answer">
          <div class="faq-answer-content">
            Yes, go to Account Settings and click "Change Email". You'll need to verify your new email address before the change takes effect. Your login credentials will be updated automatically.
          </div>
        </div>
      </div>

      <div class="faq-item" data-category="account">
        <button class="faq-question" aria-expanded="false">
          <span>How do I delete my account?</span>
          <svg class="faq-icon" viewBox="0 0 20 20" fill="none">
            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <div class="faq-answer">
          <div class="faq-answer-content">
            To delete your account, go to Account Settings and scroll to the bottom. Click "Delete Account" and confirm your decision. This action is permanent and cannot be undone. All your data will be permanently deleted within 30 days.
          </div>
        </div>
      </div>

      <!-- Technical -->
      <div class="faq-item" data-category="technical">
        <button class="faq-question" aria-expanded="false">
          <span>What browsers do you support?</span>
          <svg class="faq-icon" viewBox="0 0 20 20" fill="none">
            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <div class="faq-answer">
          <div class="faq-answer-content">
            We support the latest versions of Chrome, Firefox, Safari, and Edge. For the best experience, we recommend keeping your browser up to date. Internet Explorer is not supported.
          </div>
        </div>
      </div>

      <div class="faq-item" data-category="technical">
        <button class="faq-question" aria-expanded="false">
          <span>Is there a mobile app?</span>
          <svg class="faq-icon" viewBox="0 0 20 20" fill="none">
            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <div class="faq-answer">
          <div class="faq-answer-content">
            Yes, we have native apps for both iOS and Android. Download them from the App Store or Google Play. The mobile apps sync seamlessly with your web account.
          </div>
        </div>
      </div>

      <div class="faq-item" data-category="technical">
        <button class="faq-question" aria-expanded="false">
          <span>How do I export my data?</span>
          <svg class="faq-icon" viewBox="0 0 20 20" fill="none">
            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <div class="faq-answer">
          <div class="faq-answer-content">
            Go to Settings > Data & Privacy > Export Data. Choose your preferred format (CSV, JSON, or PDF) and click "Request Export". You'll receive a download link via email within 24 hours.
          </div>
        </div>
      </div>

      <!-- General -->
      <div class="faq-item" data-category="general">
        <button class="faq-question" aria-expanded="false">
          <span>What is your product?</span>
          <svg class="faq-icon" viewBox="0 0 20 20" fill="none">
            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <div class="faq-answer">
          <div class="faq-answer-content">
            We're a comprehensive platform that helps teams collaborate more effectively. Our tools include project management, real-time communication, file sharing, and analytics—all in one place.
          </div>
        </div>
      </div>

      <div class="faq-item" data-category="general">
        <button class="faq-question" aria-expanded="false">
          <span>How do I get started?</span>
          <svg class="faq-icon" viewBox="0 0 20 20" fill="none">
            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <div class="faq-answer">
          <div class="faq-answer-content">
            Sign up for a free account, complete the onboarding tutorial, and invite your team members. Our interactive guide will walk you through the key features. You can also schedule a demo with our team.
          </div>
        </div>
      </div>

      <div class="faq-item" data-category="general">
        <button class="faq-question" aria-expanded="false">
          <span>Do you offer customer support?</span>
          <svg class="faq-icon" viewBox="0 0 20 20" fill="none">
            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <div class="faq-answer">
          <div class="faq-answer-content">
            Yes! We offer 24/7 email support for all users, live chat for paid plans, and phone support for enterprise customers. Average response time is under 2 hours.
          </div>
        </div>
      </div>
    </div>

    <div class="no-results" id="noResults">
      <p>No questions found matching your search.</p>
    </div>

    <div class="footer-cta" data-od-id="footer-cta">
      <h2>Still have questions?</h2>
      <p>Can't find what you're looking for? Our support team is here to help.</p>
      <a href="mailto:support@example.com" class="contact-link">Contact Support</a>
    </div>
  </div>

  <script>
    // Accordion functionality
    const faqItems = document.querySelectorAll('.faq-item');

    faqItems.forEach(item => {
      const question = item.querySelector('.faq-question');

      question.addEventListener('click', () => {
        const isOpen = item.classList.contains('open');

        // Close all items
        faqItems.forEach(i => {
          i.classList.remove('open');
          i.querySelector('.faq-question').setAttribute('aria-expanded', 'false');
        });

        // Open clicked item if it was closed
        if (!isOpen) {
          item.classList.add('open');
          question.setAttribute('aria-expanded', 'true');
        }
      });
    });

    // Search functionality
    const searchInput = document.getElementById('searchInput');
    const noResults = document.getElementById('noResults');

    searchInput.addEventListener('input', (e) => {
      const searchTerm = e.target.value.toLowerCase();
      let visibleCount = 0;

      faqItems.forEach(item => {
        const question = item.querySelector('.faq-question span').textContent.toLowerCase();
        const answer = item.querySelector('.faq-answer-content').textContent.toLowerCase();
        const matchesSearch = question.includes(searchTerm) || answer.includes(searchTerm);
        const matchesCategory = item.dataset.category === currentCategory || currentCategory === 'all';

        if (matchesSearch && matchesCategory) {
          item.classList.remove('hidden');
          visibleCount++;
        } else {
          item.classList.add('hidden');
        }
      });

      noResults.classList.toggle('show', visibleCount === 0);
    });

    // Category filtering
    const categoryBtns = document.querySelectorAll('.category-btn');
    let currentCategory = 'all';

    categoryBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        currentCategory = btn.dataset.category;

        // Update active state
        categoryBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        // Filter items
        const searchTerm = searchInput.value.toLowerCase();
        let visibleCount = 0;

        faqItems.forEach(item => {
          const question = item.querySelector('.faq-question span').textContent.toLowerCase();
          const answer = item.querySelector('.faq-answer-content').textContent.toLowerCase();
          const matchesSearch = !searchTerm || question.includes(searchTerm) || answer.includes(searchTerm);
          const matchesCategory = currentCategory === 'all' || item.dataset.category === currentCategory;

          if (matchesSearch && matchesCategory) {
            item.classList.remove('hidden');
            visibleCount++;
          } else {
            item.classList.add('hidden');
          }
        });

        noResults.classList.toggle('show', visibleCount === 0);
      });
    });
  </script>
</body>
</html>