faq-page

nexu-io/open-design · skills/faq-page/SKILL.md

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

No license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

FAQ Page Skill

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

Workflow

Read the active DESIGN.md (injected above). Use the component tokens for interactive elements (accordion headers, search input, category pills).
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.
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.
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.
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?

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/faq-page · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/faq-page" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/faq-page" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/faq-page

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so faq-page is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

highCredential or secret access
References credentials, tokens or secret files that a skill should not need.
Evidence: [redacted]· fingerprint 5e884898da280471

faq-page

nexu-io/open-design · skills/faq-page/SKILL.md

No license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

FAQ Page Skill

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

Workflow

Read the active DESIGN.md (injected above). Use the component tokens for interactive elements (accordion headers, search input, category pills).
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.
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.
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.
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?

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/faq-page · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/faq-page" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/faq-page" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/faq-page

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so faq-page is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

highCredential or secret access
References credentials, tokens or secret files that a skill should not need.
Evidence: [redacted]· fingerprint 5e884898da280471

faq-page

What this skill does

FAQ Page Skill

Workflow

Output contract

Example questions by category

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

faq-page

What this skill does

FAQ Page Skill

Workflow

Output contract

Example questions by category

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits