SKILL.md
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?