AutoGineer
Generated banner for Editorial Service Booking
Generated logo for Editorial Service Booking

Editorial Service Booking

Meng ToCommunityCreated by Meng To

  • Skill
  • Guidelines
  • Design and creative
  • MIT
  • No issues found
Download ZIP

From the author

Create or redesign appointment-based service websites for salons, barbers, spas, wellness studios, clinics, and hospitality brands. Use for warm editorial layouts, serif-led identity, documentary portrait crops, calm treatment selectors, location-aware booking, and operational states that remain elegant and trustworthy.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a comprehensive design system and functional blueprint for creating appointment-based websites for service-oriented businesses like salons, clinics, and hospitality brands. It emphasizes an editorial aesthetic—using serif typography, documentary-style photography, and generous whitespace—to build brand trust. Beyond visuals, it outlines strict requirements for accessible treatment selectors and resilient booking flows, ensuring that operational states remain clear and functional even under error conditions.

What it does

  • Defines a cohesive visual language using warm tones, high-contrast typography, and minimal UI elements.
  • Provides a structural layout guide for hero sections, treatment menus, and location information.
  • Outlines accessibility requirements for interactive treatment selectors using semantic HTML.
  • Details the technical requirements for a robust, server-validated booking flow.
  • Sets motion design standards for subtle, professional transitions.
  • Provides a validation checklist to ensure usability, accessibility, and data integrity.

When to use it

  • When designing or redesigning a website for a service-based business requiring appointment scheduling.
  • When you need to balance high-end editorial aesthetics with functional, reliable booking software.
  • When building a booking interface that must remain accessible and performant across devices.
  • When you need to establish trust through authentic imagery and clear, honest information architecture.

Advantages

  • Promotes a premium, trustworthy brand image through intentional design choices.
  • Ensures a consistent user experience from initial browsing to final booking confirmation.
  • Reduces user frustration by prioritizing clear error handling and state persistence.
  • Improves accessibility by mandating semantic controls and keyboard navigation.
  • Prevents common pitfalls like fake availability claims or cluttered, confusing price tables.

Usage examples

“Design a treatment selector for a luxury spa that uses tabs and follows editorial design principles.”
The agent will provide a structure using semantic tablist/tab elements, ensuring the layout remains clean, accessible, and visually aligned with the specified serif-led aesthetic.
“How should I handle booking errors in my salon's appointment flow?”
The agent will outline a strategy for managing failed slots, server errors, and invalid inputs, emphasizing the need to preserve user selections and provide clear, actionable feedback.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/mengto/editorial-service-booking/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip editorial-service-booking.zip -d .agents/skills

Documentation by Meng To

Editorial Service Booking

Make browsing services feel like turning through a quiet lookbook, then carry that confidence into a resilient booking flow.

Establish the Journey

  1. Open with one strong portrait or place image and a short statement of craft.

  2. Build trust with environment, process, and practitioner evidence rather than generic badges.

  3. Let visitors compare treatments in one calm media-and-copy stage.

  4. Show favorites, results, or verified customer proof only when real.

  5. Move into location, professional, time, and confirmation without changing visual language.

Use original or licensed people and place photography. Replace every source service, price, person, location, review, and claim.

Build the Visual System

  • Use warm ivory paper and near-black chapters.

  • Pair an elegant high-contrast serif with compact sans-serif labels.

  • Favor hairline rules, minimal radius, editorial crops, and generous whitespace.

  • Keep uppercase navigation sparse and quiet.

  • Use black for decisive actions; use one muted accent only for selection or status.

  • Avoid glossy cards, glass effects, loud gradients, and beauty-template ornament.

Compose the Page

  • Header: show essential routes, current location, and one booking action.

  • Hero: use one cropped documentary portrait or place image with a large serif statement.

  • Confidence line: allow one slow text loop only when it carries real positioning.

  • About: layer two or three photographs with captions and clear reading order.

  • Treatments: pair a tab list with a reserved media stage, duration, price, and booking link.

  • Favorites: use a dark chapter to show verified popular services or results.

  • Locations: expose address, hours, accessibility, contact, and availability before booking.

  • Booking: keep selected service, professional, location, and time visible through confirmation.

  • Footer: prioritize operational information over marketing filler.

Implement the Treatment Selector

  • Use semantic buttons with tablist, tab, and tabpanel behavior when tabs are appropriate.

  • Support arrow-key movement plus Enter and Space selection.

  • Keep duration, price, description, and action in the DOM.

  • Reserve stage dimensions and preload only the next likely image.

  • Announce the selected treatment without repeating the whole panel.

  • Fall back to an expanded static list under reduced motion.

  • Keep focus and hover cues equivalent; touch must not depend on hover.

Implement the Booking Flow

  • Prefer native form controls and server-validated availability.

  • Persist service, professional, location, and time choices.

  • Never claim a slot before server confirmation.

  • Design loading, empty, disabled, stale slot, invalid details, payment failure, retry, reschedule, cancel, and success states.

  • Return focus to the correct field after an error and announce validation clearly.

  • Preserve selections across Back navigation and recoverable failures.

Motion Defaults

  • Use 160–220ms for controls and 500–760ms for section entrances.

  • Keep the confidence loop slower than 14 seconds and pause it offscreen.

  • Use one layered photo reveal, simple section fades, and short treatment-media swaps.

  • Keep transforms shallow and reserve exact final layout pixels.

  • Render the final state immediately for reduced motion.

Validate

  • Complete booking with keyboard and touch on mobile.

  • Test a stale slot, failed media, server error, invalid field, and retry.

  • Confirm no layout shift during treatment changes.

  • Verify readable contrast, visible focus, alt text, 200% zoom, and correct tab order.

  • Confirm all people, places, prices, results, and reviews are real, licensed, provided, or clearly marked internal placeholders.

Avoid

  • Dense price tables before desire or context exists.

  • Hover-only treatment previews.

  • Fake availability, reviews, results, or practitioner credentials.

  • Auto-advancing carousels, frantic motion, and decorative beauty gradients.

  • Losing booking selections after errors or navigation.

Files

demo/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:,">
  <title>Editorial Service Booking · Skill Demo</title>
  <style>
    :root{--paper:#f1eadf;--ink:#151513;--muted:#766f66;--accent:#8f4438;--line:rgba(21,21,19,.24);font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--paper)}button,a{font:inherit;color:inherit}.shell{width:min(1440px,100%);margin:auto}.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 34px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.14em;text-transform:uppercase}.nav a{text-decoration:none}.links{display:flex;gap:26px}.brand{font-family:Georgia,serif;font-size:24px;font-style:italic;letter-spacing:-.04em;text-transform:none}.book{border-bottom:1px solid;padding-bottom:4px}.hero{display:grid;min-height:490px;grid-template-columns:1fr 1.08fr;border-bottom:1px solid var(--line)}.heroCopy{display:flex;flex-direction:column;justify-content:space-between;padding:42px 34px 30px}.eyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase}.hero h1{max-width:8ch;margin:28px 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(68px,8vw,118px);font-weight:400;line-height:.82;letter-spacing:-.065em}.heroFoot{display:flex;align-items:end;justify-content:space-between;gap:24px}.heroFoot p{max-width:34ch;margin:0;color:var(--muted);font-size:13px;line-height:1.5}.circle{display:grid;width:52px;height:52px;place-items:center;border:1px solid;border-radius:50%;text-decoration:none}.portrait{position:relative;overflow:hidden;border-left:1px solid var(--line);background:linear-gradient(125deg,#20201d 0 33%,#866e5c 33% 61%,#c3a58c 61%)}.portrait:before{position:absolute;inset:0;content:"";background:radial-gradient(ellipse at 61% 31%,#e5b99a 0 10%,transparent 10.5%),radial-gradient(ellipse at 64% 48%,#222 0 18%,transparent 18.5%),linear-gradient(78deg,transparent 52%,rgba(244,222,201,.23) 53% 55%,transparent 56%)}.portraitLabel{position:absolute;right:24px;bottom:22px;color:#fff;font-size:10px;letter-spacing:.13em;text-transform:uppercase}.selector{display:grid;grid-template-columns:.52fr 1fr minmax(280px,.8fr);min-height:270px;border-bottom:1px solid var(--line)}.selectorIntro{padding:28px 34px;border-right:1px solid var(--line)}.selectorIntro h2{margin:12px 0;font-family:Georgia,serif;font-size:30px;font-weight:400}.tabs{display:grid;align-content:center;padding:18px 34px;border-right:1px solid var(--line)}.tabs button{display:flex;align-items:center;justify-content:space-between;border:0;border-top:1px solid var(--line);padding:14px 0;background:transparent;text-align:left;cursor:pointer}.tabs button:last-child{border-bottom:1px solid var(--line)}.tabs button[aria-selected="true"]{color:var(--accent)}.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.panel{display:flex;flex-direction:column;justify-content:space-between;padding:28px 34px}.panel strong{font-family:Georgia,serif;font-size:34px;font-weight:400}.meta{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.panel a{width:max-content;border:1px solid;border-radius:99px;padding:11px 16px;text-decoration:none}@media(max-width:780px){.links{display:none}.hero,.selector{grid-template-columns:1fr}.hero{min-height:auto}.portrait{min-height:430px;border-left:0;border-top:1px solid var(--line)}.selectorIntro,.tabs{border-right:0;border-bottom:1px solid var(--line)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
  </style>
</head>
<body>
  <main class="shell">
    <nav class="nav" aria-label="Demo navigation"><div class="links"><a href="#story">Story</a><a href="#treatments">Treatments</a></div><a class="brand" href="#top">Northline</a><a class="book" href="#treatments">Book a visit</a></nav>
    <section class="hero" id="top"><div class="heroCopy"><span class="eyebrow">Independent grooming studio · Est. 2018</span><h1>Cut with clarity.</h1><div class="heroFoot"><p>Considered cuts, honest advice, and a room designed to slow the day down.</p><a class="circle" href="#treatments" aria-label="Explore treatments">↓</a></div></div><div class="portrait" role="img" aria-label="Abstract editorial portrait composition"><span class="portraitLabel">Quiet craft · Documentary portrait</span></div></section>
    <section class="selector" id="treatments" aria-labelledby="treatments-title"><div class="selectorIntro"><span class="eyebrow">Choose a service</span><h2 id="treatments-title">Treatments</h2><p>One calm stage. Every detail stays visible.</p></div><div class="tabs" role="tablist" aria-label="Treatment options"><button role="tab" aria-selected="true" aria-controls="treatment-panel" data-title="The Essential" data-copy="Consultation, precision cut, wash, and finish." data-duration="50 min" data-price="$72">The Essential <span>01</span></button><button role="tab" aria-selected="false" aria-controls="treatment-panel" data-title="Texture Session" data-copy="A shape-led session for curls, coils, and movement." data-duration="65 min" data-price="$94">Texture Session <span>02</span></button><button role="tab" aria-selected="false" aria-controls="treatment-panel" data-title="Reset Ritual" data-copy="Scalp treatment, cut, warm towel, and finish." data-duration="80 min" data-price="$118">Reset Ritual <span>03</span></button></div><div class="panel" id="treatment-panel" role="tabpanel" aria-live="polite"><div><strong>The Essential</strong><p>Consultation, precision cut, wash, and finish.</p></div><div class="meta"><span>50 min</span><span>$72</span></div><a href="#treatment-panel">Choose this treatment</a></div></section>
    <section id="story" aria-label="Studio story"></section>
  </main>
  <script>
    const tabs=[...document.querySelectorAll('[role="tab"]')];const panel=document.querySelector('[role="tabpanel"]');function selectTab(tab){tabs.forEach(item=>item.setAttribute('aria-selected',String(item===tab)));panel.querySelector('strong').textContent=tab.dataset.title;panel.querySelector('p').textContent=tab.dataset.copy;panel.querySelectorAll('.meta span')[0].textContent=tab.dataset.duration;panel.querySelectorAll('.meta span')[1].textContent=tab.dataset.price}tabs.forEach((tab,index)=>{tab.addEventListener('click',()=>selectTab(tab));tab.addEventListener('keydown',event=>{if(!['ArrowLeft','ArrowRight','ArrowUp','ArrowDown'].includes(event.key))return;event.preventDefault();const step=['ArrowRight','ArrowDown'].includes(event.key)?1:-1;const next=tabs[(index+step+tabs.length)%tabs.length];next.focus();selectTab(next)})});
  </script>
</body>
</html>

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/editorial-service-booking · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To or Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download editorial-service-booking.zip