The page this skill built from examples/brask-moura, working in your browser. Opens in a new tab. Also: .
18.5-second example rendered by this skill from examples/brask-moura · 1280×720
What you get
- A self-contained contact page and a paste-in embed
- 3 to 5 reasons that route each note to a named person or a desk, with 2 to 7 fields per reason
- Reply-by times in the visitor's own time zone, computed from real working hours and holidays
- A 24-hour rota with an even 3-hour ruler, a now line and live status for each person
- Doorstep plans drawn from a few points, with numbered marks matching the arrival steps and a phone crop
- Designed empty, typing, invalid, sending, sent, offline and failed states, a spam trap and an email fallback
- Checks at 390, 768, 1024 and 1440 px and with reduced motion, plus an 18.5-second 1920x1080 preview recorder
- Open-source licenses for every part it builds on
Good fit
- An architecture or design practice with partners in two cities who want each enquiry to reach the right partner directly.
- A hardware or software company whose support team works across time zones and wants to show who is on right now.
- A small firm that wants office directions people can follow at the door instead of an embedded map.
Not for
- Live chat or chatbot widgets: the page deliberately has none
- Large help centres with search, articles and ticket histories
- Interactive street maps with search or turn-by-turn directions: link to a maps app for that
- Forms that need file uploads or payment
About this skill
The contact section of a site, built like a good front desk. Visitors first pick what their note is about, from 3 to 5 reasons that each name who answers and how fast, and the form reshapes itself to that reason: shared fields keep what was typed, the others fade out and in. Each reason promises a reply time worked out from real working hours in each person's own time zone and shown in the visitor's time. Below, a 24-hour rota shows who is at their desk right now, and every office gets a drawn plan of the last stretch to its door, numbered to match the arrival steps and cropped for phones. Every form state is designed, with a spam trap instead of a CAPTCHA and an email fallback.
Example request
A contact section on warm drafting paper: a list of reasons with a redline rule, a slip addressed to a named partner with a reply-by time and a small clock, then a rota of working hours with a red now line and site plans of the way to the door.
How it works
Your agent
- 1
Collect the desk
Do not invent reply times you do not keep.
- 2
Write contact.json
Copy
examples/brask-moura/contact.jsonorexamples/orrin/contact.jsonand replace every value. - 3
Build
It lists every problem at once and writes nothing until they are fixed: lengths, colours and their contrast, hours that do not parse, a reason whose person does not exist, a field key used as two different kinds of field, a door that is not on your building, marks that do not match the steps or sit off the route, a crop that cuts off a mark.
- 4
Check
Fix and build again until every line says ✓.
- 5
Look at it
Open the address it prints.
- 6
Put it on the site
out/contact-embed.htmlis the whole section: a fonts link, one<style>, the<section class="ck">and one<script>. - 7
Record a preview (optional)
Writes
out/preview.mp4(1920×1080, 30 fps, 18.5 s: the desk arrives, the slip morphs topreview.switchToand back, the page moves to the rota and the plans, back up, and the note is sent) andout/poster.pngfrom the first settled stretch.
- 1
You get
- out/contact-embed.html
- out/preview.mp4
- out/poster.png
What you need
- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge for the check and the video (found automatically; set
CHROME_PATHotherwise). - ffmpeg, only for the video (
brew install ffmpeg,winget install ffmpeg,apt install ffmpeg; or setFFMPEG_PATH). - Somewhere for the notes to go: an https address that accepts a JSON POST (your form service or your own endpoint), or nothing, in which case each reason's note opens in the visitor's email app addressed to that reason's email.
Last checked Nov 8, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
"theme: the accent … is 2.6:1, needs 3:1"
The accent carries the now line, the selected rule and the plan route. Darken it on a light page, lighten it on a dark one, and keep
onAccentreadable on it."says there is no form, but this section is a form" (or "24/7", "instant", "chat with us")
The build refuses copy the page cannot keep. Say what it does instead: "No chat window, no bots. A person reads every note."
"mark 3 is 56 units from the route"
Extend the route into the building to where that step happens (the floor, the counter), then put the mark on it.
What’s in the download
- SKILL.md19.1 KB
- examples/
- examples/brask-moura/8.62 KB1 file
- examples/orrin/8.18 KB1 file
- kit/
- kit/contact.css16.8 KBthe section's styles, every class starting with
ck- - kit/runtime.js43.1 KBthe browser runtime (time zones, reply times, rota, plans, the form and its states), no dependencies
- scripts/
- scripts/kit/
- scripts/kit/build.mjs21.5 KB
- scripts/kit/cdp.mjs4.93 KB
- scripts/kit/check.mjs24.0 KB
- scripts/kit/record.mjs7.87 KB
- scripts/kit/schema.mjs22.8 KBevery field, its limits, the hours and plan formats, and the copy rules
- scripts/kit/serve.mjs2.50 KB
- scripts/build.mjs140 Bvalidates contact.json (every problem listed at once) and writes
index.htmlandcontact-embed.html - scripts/check.mjs140 Bopens the built page at 390, 768, 1024 and 1440 px and with reduced motion, and fails on anything listed under Check
- scripts/chrome.mjs3.63 KB
- scripts/record.mjs142 Brecords the page's fixed script to
preview.mp4andposter.png, takes single stills (any state, any reason), and prints the settled stretches - scripts/serve.mjs140 Bserves a built folder on localhost to look at
- NOTICE.md1.36 KB
- TESTED.json427 B
18 files · 185 KB · installs to ~/.claude/skills/contact-kit for Claude Code and ~/.agents/skills/contact-kit for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- page kit · contact section · page + embed · 1080p video
- Needs
- Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
- Series
- Page Kits · 29 skills
- Updated
- Nov 8, 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
How is the reply time worked out?
From the hours and time zone of everyone on the chosen reason. Working hours are counted minute by minute through whoever is in; a working day is a day someone on the reason works, and the reply comes by its close. The result is rounded up to the half hour and shown in the visitor's own time.
What happens when a note cannot be sent?
If the visitor is offline, the note is kept on their device and goes when the connection returns. If the endpoint fails or takes more than 20 seconds, the slip says so and offers the same note as an email to that reason's address. Without an endpoint, every note goes through the visitor's email app.
Why is the map drawn instead of embedded?
An embedded map shows streets, not the door. The plan is drawn from a few points in contact.json: neighbouring buildings, yours, the door, stairs or a gate, and a route with numbered marks that match the written steps. It uses the page's own colours and type, loads nothing, and switches to a squarer crop on phones.
Which agents is Contact Desk 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 with its own runtime and no third-party code; the built pages load Spectral, Albert Sans, Fragment Mono, Geist, Geist Mono, Hanken Grotesk and JetBrains Mono from Google Fonts 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.