Skip to content
cccskills
FreePublished on GitHub

booker

Build a public booking flow that guides people from choosing a date and time slot to entering attendee details and viewing confirmation. It also covers rescheduling, keeping selections in the URL and app state, and responsive layouts.

OriginalShow the original description

Public booking flow — the state machine, animations, and URL/app-state sync.

BuilderIO/agent-native7,527 stars(GitHub 7,527 + cccskills 0)

Run score Not tested

See how to install

Good for

  • Building a multi-step appointment booking flow
  • Adding rescheduling from an existing booking
  • Preserving selected dates and times across refreshes
  • Designing a keyboard-accessible booking dialog

Files included (1)

  • SKILL.md1.6 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Booker

Stages

  1. pick-date — month grid shows days with availability
  2. pick-slot — available slots on the selected day
  3. fill-form — attendee form (name, email, custom fields)
  4. success — confirmation with add-to-calendar buttons

Plus reschedule mode — prefilled from existing booking uid.

Animations

Use motion (motion/react) AnimatePresence with fadeInLeft variants. The outer container animates its width across stages: narrow (calendar only) → wider (calendar + slots) → widest (form).

Timezone + 12/24h

  • Detect browser timezone at mount; let user override via dropdown.
  • Persist choice to localStorage key scheduling.timezone.
  • 12/24h toggle near slot column; persist to user settings.

URL + application-state sync

Selected date, slot, timezone, and duration are mirrored to URL query params AND application_state.booker-state so:

  • Page refresh preserves selection.
  • Agent can read the user's current pick.

Copy-link affordance

Every event-type row has a "copy link" button. On click, write to clipboard and toast "Copied!" with Sonner. Works on mobile Safari too.

Accessibility

  • Month grid is ARIA grid + gridcell with arrow-key nav.
  • Slot buttons are keyboard-focusable, with aria-pressed.
  • Focus returns to trigger on modal close.
  • Toast content announced via aria-live=polite.

Mobile

< 768px: stack vertically. Calendar full-width, slot list below, form slides in as full-screen sheet.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

a2a-assets

FreeSummary

Generate, refine, export, and place brand images or videos from an Assets library into another app. The skill covers choosing a library, handling image batches and video runs, and updating selected assets after feedback.

  • Generate brand images for slides or another app
  • Refine an existing asset after feedback
  • Create and export a video asset
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

account-health

FreeSummary

Prepare a customer account health, renewal, or contract usage readout. Verify the account identity, use approved metric definitions, compare contracted capacity with actual usage, and trace findings to sources, time windows, and known gaps.

  • Preparing a named customer's account health review
  • Comparing contracted seats or capacity with usage
  • Gathering adoption signals before a renewal or QBR
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

actions

FreeSummary

Create focused app actions that agents can call as tools and frontend code can use through client hooks. Use them to add provider integrations or fetch UI data, with validated inputs and structured results.

  • Adding a new app operation
  • Connecting an external provider API
  • Fetching data for a frontend view
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

adding-a-feature

FreeSummary

Use this checklist when adding a feature or integration to an agent-native app. It covers the user interface, agent-callable actions, instructions, and app-state sync so both the user and agent can work with the capability consistently.

  • Planning a new feature across UI and agent actions
  • Checking that agent changes appear in the UI
  • Documenting actions and feature state for the agent
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

adhoc-analysis

FreeSummary

Investigate complex questions by combining data from multiple sources, then summarize patterns, metrics, and evidence in a clear report. Save requested analyses as dashboards with instructions for future refreshes.

  • Comparing CRM deals with call records
  • Investigating customer health across systems
  • Saving a repeatable performance analysis
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

admin-surfaces

FreeSummary

Use the Analytics admin surfaces to inspect and change workspace feature flags, review dashboard ownership and usage activity, or browse and edit databases connected from other agent-native apps. The skill guides administrators to the relevant view and actions.

  • Review dashboard owners, views, and edits
  • Change a workspace feature flag for an app
  • Browse or edit a connected app database
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

See all skills by BuilderIO

Report a problem with this skill