The page this skill built from examples/fernwork, working in your browser. Opens in a new tab. Also: .
18-second example rendered by this skill from examples/fernwork · 1280×720
What you get
- A self-contained page and a paste-in embed built from one faq.json
- A short-answer column, so the closed list already answers every objection
- Search that narrows as you type and finds text inside answers
- A #link for every answer that opens it and scrolls it into view
- Two layouts: topic groups with a sticky contents rail, or one flat ledger
- FAQPage JSON-LD written from the same text and checked against the page
- Two examples, light and dark, with an 18-second preview recorder
- Open-source licenses for every part it builds on
Good fit
- A pricing page where buyers stall on trials, seats, VAT and refunds before they commit.
- A product page for something physical, where delivery, returns and compatibility questions decide the sale.
- A switching page that has to show, step by step, how a team moves its data across.
Not for
- A help centre with hundreds of articles
- Questions loaded from a CMS at runtime
- A live chat or support widget
- Pages that need more than one FAQ section
About this skill
A questions section for landing and pricing pages that you can read closed. Every question carries its short answer, 28 characters at most, in a ruled column beside it, so a doubtful visitor gets the verdict on every objection by scanning down and opens only what needs detail. Answers have real structure: numbered steps, small tables whose computed cells are checked against their arithmetic, and links to docs. Search narrows the list as you type and shows the matching sentence from inside an answer. Every answer has a #link that opens and scrolls to it. Topic groups get a sticky contents rail, a flat list gets ruled column heads, and the close names real people, a response time and a live status. The FAQPage JSON-LD is written at build time from the same text and checked against the page.
Example request
Build our FAQ section from our real objections: a short answer of 28 characters or less beside every question, structured long answers with steps, tables and doc links, search that narrows as you type, a #link for every answer, a closing contact that names who replies and how fast, and FAQPage JSON-LD written from the same text.
How it works
Your agent
- 1
Collect the real questions
Use their real numbers, times and names.
- 2
Write faq.json
Give each answer an
id: it is the #link (#export), so keep it short and stable. - 3
Build
It lists every problem at once and writes nothing until they're fixed: a short answer over 28 characters, an id used twice (every #link must be unique), a computed cell the arithmetic doesn't give, a response time without a number, a colour pair under its contrast minimum, a table row with the wrong number of cells, a link that isn't
https://,mailto:,tel:,/pathor#id. - 4
Check
It runs at 390, 768, 1024 and 1440 px wide, with reduced motion at 390 and 1440, and with JavaScript off at 390 and 1440.
- 5
Look at it
Open the address it prints on a laptop and a phone.
- 6
Put it on the site
Paste
out/faq-embed.htmlwhere the questions go. - 7
Record a preview (optional)
The video follows a fixed 18-second script: rest on the questions, open
preview.open[0](1.4 s), scroll to the next topic and openpreview.open[1](5 s), close both and typepreview.queryletter by letter (8.2 s), clear it and follow the #link topreview.deepLink(11.2 s), end on the contact (15 s).
- 1
You get
- out/faq-embed.html
- out/index.html
What you need
- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks and the video (the scripts find it; set
CHROME_PATHif they don't). - ffmpeg for the video only (
brew install ffmpeg,winget install ffmpeg,apt install ffmpeg; or setFFMPEG_PATH). - Internet access when the page is opened, for the Google Fonts. Without them, system fonts stand in.
Last checked Nov 8, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
Build says a short answer is too long.
It is a verdict, not a summary: 28 characters. Move the detail into the long answer and keep the answer itself ("Yes, from 10 seats").
Build says a computed cell is wrong.
Either the table or the arithmetic has a mistake; it prints both. Fix whichever is wrong. Rounding is to
decimalsplaces.Check says the JSON-LD differs from the page.
Something changed the page's text after the build (a script, a translation plugin, a hand edit). Edit faq.json and build again rather than editing the HTML.
What’s in the download
- SKILL.md17.1 KB
- examples/
- examples/fernwork/6.01 KB1 file
- examples/orrery/3.71 KB1 file
- kit/
- kit/faq.css18.4 KBthe whole design, scoped to
.fq. Both layouts, both type sets, tablet and phone rules, the phone search bar, reduced motion. - kit/runtime.js16.3 KBthe browser runtime, inlined into every build. Measured open and close, search, #links, copy-link, the current topic, the phone bar, the live status, and the recording clock.
- scripts/
- scripts/kit/
- scripts/kit/build.mjs13.2 KB
- scripts/kit/cdp.mjs4.92 KB
- scripts/kit/check.mjs24.9 KB
- scripts/kit/record.mjs6.08 KB
- scripts/kit/schema.mjs16.2 KBevery field, its limits, the contrast rules and the arithmetic for computed cells; lists every problem at once.
- scripts/kit/serve.mjs2.49 KB
- scripts/build.mjs135 Bfaq.json to
out/index.html(a page holding the section) andout/faq-embed.html(the section to paste in), both with the JSON-LD. - scripts/check.mjs135 Bserves the page and checks it at 390, 768, 1024 and 1440 px, with reduced motion at 390 and 1440, and with JavaScript off at 390 and 1440.
- scripts/chrome.mjs3.63 KB
- scripts/record.mjs137 Bthe preview video, stills and
--moments. - scripts/serve.mjs135 Bserves
out/on localhost to look at. - NOTICE.md1.07 KB
- TESTED.json411 B
18 files · 135 KB · installs to ~/.claude/skills/faq-kit for Claude Code and ~/.agents/skills/faq-kit for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- FAQ section system · page + embed · 1080p preview
- Needs
- Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
- Series
- Page Kits · 29 skills
- Updated
- Nov 9, 2026
- Checked
- Nov 8, 2026: its own commands ran and passed. That is a working check, not a security audit.
Written for
See all 31 agents that read skill folders.
Install guides
For your agent
Generates with
Installed it? Tell others how it went. Reviews come from people who installed this skill.
Write a reviewFAQ
What is a short answer here?
Every question carries the answer itself in 28 characters or less, such as "30 days, no card", set in a ruled column beside it. The build refuses anything longer, so the closed list reads as a list of answers, and the long answer is there for anyone who opens it.
Does it still work with JavaScript off?
Yes. Every question and answer is in the HTML as native details and summary, so they open and close, the contents links scroll, and the FAQPage JSON-LD is written at build time. Only search, the live status and the copy button need the runtime, so they are hidden.
How does it keep the structured data honest?
The JSON-LD is written from the same config and the same text as the page. The check compares every question and answer with what the page shows, character by character, at 390, 768, 1024 and 1440 px, and fails on any difference.
Which agents is FAQ Kit written for?
Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Do I own what I make with it?
Yes. Everything your agent makes with this skill is yours, including for client and commercial work.
What if it doesn’t work for me?
Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.
Credits and licensesWritten by Lookbk
Lookbk wrote this package, including its runtime, build, checks and recorder; it uses no third-party code, and its Google Fonts (Newsreader, Public Sans, JetBrains Mono, Schibsted Grotesk, IBM Plex Mono) are under the SIL Open Font License 1.1. Written by Lookbk, no third-party code.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.