How to use the Editorial Service Booking agent skill

What is an agent skill and what does this one make the agent do?

An agent skill is a folder of instructions that an AI agent reads when a task matches the skill's description. The main file, SKILL.md, is the playbook. Once it is installed, the agent can follow it without you pasting the rules into every prompt.

This skill covers website design and flow for appointment-based service businesses. It guides the agent toward a warm, magazine-style look with serif headings, large photos, quiet navigation and a treatment selector that shows duration, price and a booking link. It also plans the booking flow so that selections persist, unavailable slots are handled gracefully, and motion and keyboard accessibility are respected.

• Page structure: header, hero portrait, about, treatments, favorites, locations, booking and footer.
• Visual system: warm ivory backgrounds, near-black sections, hairline rules, minimal radius and one muted accent.
• Accessible treatment selector with tab behaviour, arrow-key movement and a static fallback under reduced motion.
• Booking states to design for, including stale slots, payment failure, retry, reschedule, cancel and success.

Install the editorial-service-booking skill

Download the ZIP from our page and unzip it. You can install the skill in one of two places. For all your projects, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder. Either way the skill folder should contain SKILL.md.

In the Claude apps you can instead upload the skill under Settings → Capabilities → Skills.

• Personal install: ~/.claude/skills/ (available across projects).
• Project install: .claude/skills/ inside your project folder (shared with that project).
• Claude apps: Settings → Capabilities → Skills, then upload the skill.

How do you trigger the skill with a natural request?

You do not need a special command. Describe the business and the job in plain words. The skill's description mentions salons, barbers, spas, wellness studios, clinics, hospitality brands, editorial layouts, treatment selectors and location-aware booking, so requests that use those ideas are the ones most likely to load it. You can also name it directly with $editorial-service-booking, as the project's demo prompts do.

Give the agent the details it needs to replace placeholders: business name, services with durations and prices, professionals, locations and hours. The skill tells the agent to replace every source service, price, person, location, review and claim, so supply real content or mark it clearly as placeholder.

• Example: Use $editorial-service-booking to create an original appointment-based service website for a neighbourhood barber shop with three locations.
• Example: Redesign our spa's website around a calm treatment selector. Our treatments, prices and durations are below.
• Example: Build a booking page for a physiotherapy clinic with an editorial look. Show location, accessibility and availability before booking.

What do you need before you start?

The skill lists no required tools or software. It does not run scripts and does not use the network. It is design and flow guidance in text and HTML form.

Plan for the content and the booking system yourself. The skill does not provide a booking backend, payment system or availability API. It says the booking flow should use server-validated availability, so you will need a real service that confirms slots before the page claims them.

• No listed requirements, scripts or network access.
• Photography you own or have licensed, or clearly marked placeholders.
• Your real services, prices, durations, locations and hours.
• A booking or availability system that your developers connect to the page.

Review the output and check the key requirements

Treat the agent's output as a first draft. The skill includes a validation list you can use as a review checklist. Check that the booking flow works with keyboard and touch on mobile, that a stale slot and a server error are handled, and that there is no layout shift when the treatment changes.

Check accessibility as well: readable contrast, visible focus, alt text, 200% zoom and correct tab order. The skill also asks that every person, place, price, result and review be real, licensed, provided or clearly marked as an internal placeholder.

• Test booking with keyboard only and with touch on a phone.
• Test a stale slot, failed media, a server error, an invalid field and a retry.
• Confirm no layout shift during treatment changes.
• Confirm all people, places, prices, results and reviews are real or marked as placeholders.

Safety notes: scripts, network and fake proof

The skill's listing says it runs no scripts and uses no network access, so installing it does not add code that runs on your machine. The risk lies in the content it helps you produce. The skill explicitly warns against fake availability, reviews, results and practitioner credentials, and against publishing them from templates.

Do not publish example testimonials, outcomes or qualifications that the agent wrote as placeholders. Replace them with verified material or remove them.

• No scripts and no network use are listed for this skill.
• Never publish placeholder reviews, results or credentials as real.
• Never show availability that has not been confirmed by your booking server.

Tips for better results

Give the agent real photography direction and real copy early, so the layout is built around actual content. Ask for one change at a time when refining the design, for example the treatment selector before the footer. Keep the demo files in view: the project includes a demo index.html and PROMPT.md that show the intended quality and behaviour.

• Supply real photos or describe them precisely, including crop and subject.
• Ask for the treatment selector and booking flow as separate passes, then test each.
• Use the demo index.html as a reference for the look and the reduced-motion fallback.
• Ask the agent to mark any missing content as an internal placeholder.