---
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 both files at build/CI, then import locally:

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

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

Both files must sit in the same folder: `foundation-tailwind.css` starts with `@import "./foundation.css"`, so the palette resolves even if you only import the Tailwind file. Import both anyway — it is explicit, and bundlers dedupe the repeated import.

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.

## 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
```