> ## Documentation Index
> Fetch the complete documentation index at: https://opencals.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# v0

> Attach the Opencals agent skills in v0 from skills.sh, add OPENCALS_API_KEY, and v0 builds a Next.js booking site on the Opencals SDK with live availability and Stripe checkout.

v0 supports [Agent Skills](/docs/ai-agents/overview), so it uses the same two Opencals
skills as Claude Code and Cursor. It generates a standard Next.js app on
`@opencals/storefront-sdk`, which you can keep developing anywhere.

<Steps>
  <Step title="Create a storefront key">
    In the Opencals dashboard open **Settings → API Keys** and create a key
    (`sfk_…`). Leave allowed origins empty: the SDK runs in server code, which
    sends no `Origin` header.
  </Step>

  <Step title="Attach the skills">
    In the v0 prompt bar open the skills menu (type `/` in the composer) and add
    the Opencals skills from skills.sh:

    ```text theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
    letsopencals/skills
    ```

    Attach both **opencals-build-booking-site** and **opencals-storefront-api**,
    and save them to your personal or team scope.
  </Step>

  <Step title="Add the environment variable">
    v0 asks for missing environment variables above the composer, or add them to
    the project yourself:

    | Variable           | Value                                                 |
    | ------------------ | ----------------------------------------------------- |
    | `OPENCALS_API_KEY` | Your `sfk_…` key (required)                           |
    | `OPENCALS_API_URL` | `https://api.opencals.com` (optional, default)        |
    | `AUTH_SECRET`      | Random string, only if the site adds customer sign-in |
  </Step>

  <Step title="Describe the business">
    ```text theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
    Build a booking website for Ridge Padel, a six-court padel club in Valencia.
    Use the Opencals skills. Players pick a date and see every court against
    time in one grid, then choose 60 or 90 minutes. Coached group sessions are
    bookable separately, with spots left shown. Dark, sporty, one electric-lime
    accent. Pages: home, book a court, coaching, checkout, confirmation.
    ```
  </Step>
</Steps>

## Other tools, same skills

<CodeGroup>
  ```bash skills CLI theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
  npx skills add letsopencals/skills
  ```

  ```text Claude Code theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
  /plugin marketplace add letsopencals/skills
  /plugin install opencals@opencals
  ```
</CodeGroup>

## Check before publishing

* Slot times from the API are **UTC**. If the picker shows raw UTC, tell v0:
  "slot times are UTC, show them in the store's timezone".
* Book end to end with Stripe's test card `4242 4242 4242 4242` and confirm the
  booking appears in the dashboard.
* Publish to Vercel, then switch the store to production to take real payments.

## Related

* [opencals-build-booking-site skill](/docs/ai-agents/build-booking-site-skill) ·
  [opencals-storefront-api skill](/docs/ai-agents/storefront-api-skill)
* [Lovable](/docs/ai-agents/lovable) · [Base44](/docs/ai-agents/base44)