---
name: clubready-tokens
description: Applies ClubReady design tokens in product apps — pin the CDN, vendor foundation CSS, use semantic colour variables and Tailwind token classes, never hardcode hex or parse Figma JSON. Use when styling UI, adding colour, Flowbite, Tailwind brand classes, or ClubReady tokens.
---

# ClubReady tokens (product apps)

Applies published ClubReady colour tokens in a product app. Colour is authored in Figma and served as CSS from the design-tokens CDN. This skill does not edit the tokens repo.

Copy-paste snippets: https://design-tokens.clubready.com/engineering/

## Pin a version prefix

Use `https://design-tokens.clubready.com/production/v1.7/` (or the app’s existing pin if it already pins a later `v1.x`).

`/production/latest/` moves with each GitHub Release. Shipped apps pin a version prefix, not latest. `/staging/` is QA only.

In this repository, publish the next unused `v1.x` tag, currently `v1.8` or
later. `v1.7` remains an immutable app pin until a newer version is adopted.

## Vendor CSS for Tailwind

Vite and webpack cannot `@import` a remote URL. Curl the one file at build/CI, then import it locally:

```sh
BASE=https://design-tokens.clubready.com/production/v1.7
curl -fsSL $BASE/foundation-tailwind.css -o src/tokens/foundation-tailwind.css
```

```css
@import "tailwindcss";
@import "./tokens/foundation-tailwind.css";
```

`foundation-tailwind.css` contains every colour variable from `foundation.css` plus the Tailwind `@theme`; new apps import only this file. Apps that already import `foundation.css` and then `foundation-tailwind.css` keep working; do not rewrite them unless asked (keep `foundation.css` first). Pins up to `v1.7` predate this: their `foundation-tailwind.css` opens with `@import "./foundation.css"`, so also curl `foundation.css` into the same folder.

Vanilla / ASP / runtime CSS can link the pinned file:

```html
<link rel="stylesheet" href="https://design-tokens.clubready.com/production/v1.7/foundation.css">
```

## Use semantic colour

- CSS: `var(--text-heading)`, `var(--bg-clubready)`, `var(--border-base)`.
- Tailwind: token classes from the vendored theme (`bg-clubready-500`, …) or arbitrary values that reference semantic variables (`bg-[var(--bg-clubready)]`).
- Dark mode: `.dark` (Tailwind/Flowbite) or `data-theme="dark"`. Light is the default.
- Spacing, radius, and type stay stock Tailwind (`p-4`, `rounded-xl`, `text-sm`) so Flowbite sizes stay correct.

## Buttons

`foundation-tailwind.css` ships the Figma `Button L` set as utilities (pins after `v1.7`). Combine one size and one colour; do not restyle them with ad-hoc colour classes:

```html
<button type="button" class="btn-sm btn-brand">Save</button>
<button type="button" class="btn-sm-icon btn-ghost" aria-label="Close"><svg>…</svg></button>
```

- Sizes: `btn-xs`, `btn-sm`, `btn-l` (28 / 40 / 48 px); icon-only `btn-xs-icon`, `btn-sm-icon`, `btn-l-icon`.
- Colours: `btn-brand`, `btn-secondary`, `btn-tertiary`, `btn-ghost`, `btn-success`, `btn-danger`. Hover, focus and `disabled` are built in.

## Avatars, inputs, dropdowns

Also in `foundation-tailwind.css` (from the release after the Button one), generated from the Figma `Avatar`, `Input field` and `Dropdown` sets:

```html
<span class="avatar-lg"><img src="…" alt="Alex"><span class="avatar-dot avatar-dot-online" role="img" aria-label="online"></span></span>
<span class="avatar-base avatar-placeholder">AR</span>
<div class="avatar-group-base"><span class="avatar-base"><img src="…" alt=""></span><span class="avatar-base avatar-counter">+10</span></div>

<input class="input-base input-default" placeholder="Email">
<div class="input-base input-danger"><svg>…</svg><input aria-label="Search"></div>

<div class="dropdown" role="menu">
  <button class="dropdown-item"><svg>…</svg>Settings<span class="dropdown-meta">(4)</span></button>
  <button class="dropdown-item dropdown-item-danger">Sign out</button>
</div>
```

- Avatar sizes: `avatar-xs`, `avatar-sm`, `avatar-base`, `avatar-lg`, `avatar-xl`, `avatar-2xl`, `avatar-3xl`, `avatar-4xl`, `avatar-5xl`. Status `avatar-dot-online|offline|alternative`; corner buttons `avatar-edit`, `avatar-remove`; groups `avatar-group-sm|base|lg`.
- Input sizes `input-sm|base|lg|xl`; colours `input-default|success|danger`. Focus, `readonly` and `disabled` are built in, on a bare `<input>` or a wrapper `<div>`.
- Dropdown: `dropdown`, `dropdown-item` (hover and `disabled` built in), `dropdown-item-danger`, `dropdown-meta`.

## Do not

- Hardcode new hex (or any one-off colour) in app CSS or components.
- Parse `tokens/*.json` or any Figma export.
- Remote-`@import` foundation CSS from the bundler.
- Point shipped apps at `/production/latest/` or `/staging/`.

## Wrong or missing colour

Change colour in the tokens repo (Figma → staging gallery check → GitHub Release). Do not hotfix a colour in the product app.

## Install this skill

```sh
mkdir -p .cursor/skills/clubready-tokens
curl -fsSL https://design-tokens.clubready.com/skills/clubready-tokens/SKILL.md \
  -o .cursor/skills/clubready-tokens/SKILL.md
```