{"owner":"creativetimofficial","repo":"ui","hasSkills":true,"totalSkillsCount":9,"totalTokensCount":11221,"categories":["anthropic-skill"],"hasMcp":false,"mcpConfig":null,"found":["skills/creative-tim-ui/rules/brand-philosophy.md","skills/README.md","skills/creative-tim-ui/SKILL.md","skills/creative-tim-ui/AGENTS.md","skills/creative-tim-ui/rules/component-patterns.md","skills/creative-tim-ui/rules/pro-api-key.md","skills/creative-tim-ui/rules/tailwind-rules.md","skills/creative-tim-ui/rules/hydration-safety.md","skills/creative-tim-ui/rules/design-brand.md"],"skills":{"skills/creative-tim-ui/rules/brand-philosophy.md":"# Creative Tim Design Philosophy\n\nThis is not a style guide. It's the thinking behind every decision — what to build, what to cut, and why.\n\nOver a decade, Creative Tim has shipped 300+ open source UI dashboards, templates, and tools used by 2.8 million developers worldwide. That scale of use across that many products leaves no room for guesswork. Every principle here has been tested against real projects, real teams, and real feedback — not theory.\n\n---\n\n## The 95% Rule — Solve the Common Case Exceptionally Well\n\nEvery product Creative Tim ships starts with the same question: what do developers actually need? The answer, across hundreds of products and categories, is consistently the same core set of elements — buttons, tables, cards, sidebars, charts, forms, modals, notifications.\n\nThat's the 95%. The remaining 5% is Kanban boards, drag-and-drop, custom file uploaders, timeline components, WYSIWYG editors — powerful, but rare.\n\n**The rule:** build the 95% so well that no one feels the lack of the 5%.\n\nFor agents generating code: do not reach for complex solutions to solve simple problems. A developer looking at a block should not find themselves unwrapping three layers of abstraction to change a label. The common case should be obvious, direct, and complete.\n\n```tsx\n// WRONG — solves a hypothetical future problem\n }\n/>\n\n// RIGHT — solves the actual problem in front of you\n\n ...\n \n {items.map((item) => (\n \n {item.name}\n {item.status}\n \n ))}\n \n
\n```\n\n---\n\n## The \"Light\" Principle — A Block Is Done When There Is Nothing Left to Remove\n\nAcross Creative Tim's product line, \"light\" is a recurring word — not because the products lack capability, but because every addition is interrogated. Each plugin, prop, and wrapper adds CSS, JavaScript, and cognitive weight. Most are cut.\n\nThis is the hardest design discipline: not building things you know how to build.\n\n**What it means in practice:**\n\n- No feature flags or configuration props for things that can just be changed in code\n- No helper components that are only used once\n- No animation on elements that don't need to communicate state\n- No extra wrapper `div`s that exist only to satisfy a mental model\n- No icons that repeat information already conveyed by text\n- No empty states, loading states, or error states unless the block actually fetches data\n\nA block should look complete the moment a developer drops it in. Not because it handles every edge case, but because it clearly handles the right ones.\n\n```tsx\n// WRONG — wrapping for the sake of wrapping\n\n \n \n ...\n \n \n\n\n// RIGHT — as flat as the problem allows\n...\n```\n\n---\n\n## Understand the Problem Before Rendering\n\nThe first question is always **what problem does this solve for the person looking at the screen?** Not what looks good in isolation. Not what demonstrates technical capability.\n\nA pricing table exists to reduce friction in a purchase decision. A dashboard exists to surface the one number a person needs to act on. A form exists to collect information with the least possible resistance.\n\nIf the purpose of a block is not clear, the block is not clear.\n\n---\n\n## Standing on Foundations — Never Build What Already Exists Well\n\nCreative Tim's history is building *on top of* the best available foundation rather than beside it. Bootstrap → Material Design → shadcn/ui. Each transition kept what worked and added only what was missing.\n\nThe same applies to individual blocks. shadcn/ui's `Table`, `Card`, `Button`, `Badge`, `Dialog` are well-designed, accessible, and maintained. Do not rebuild them. Do not wrap them unnecessarily. Do not replicate their functionality in custom components.\n\nThe Creative Tim contribution is the **composition** — how these primitives are assembled into something useful for real work. That is where the judgment lives, not in the primitives themselves.\n\n```tsx\n// WRONG — reimplementing what shadcn already solved\nfunction CustomButton({ variant, children }) {\n const styles = variant === 'primary' ? 'bg-orange-500 text-white' : 'bg-gray-100'\n return \n}\n\n// RIGHT — extend the foundation\nimport { Button } from \"@/registry/creative-tim/ui/button\"\n\n```\n\n---\n\n## Real Use, Not Demo Use\n\nThe benchmark for every block is whether a real team would ship it in a production app. Not \"does this look impressive in a screenshot?\" but \"would this hold up under real conditions, used by real people under time pressure?\"\n\n**Concretely:** avoid visual complexity that doesn't carry information. A gradient on a card header that doesn't indicate anything is decoration. A status badge that turns red when something is wrong is communication. Only the second one belongs.\n\n```tsx\n// WRONG — decoration that doesn't communicate\n\n Users\n\n\n// RIGHT — surface that lets the content speak\n\n Users\n\n```\n\n---\n\n## Summary — The Questions to Ask\n\nBefore generating or modifying any block, run through these:\n\n1. **Is this in the 95%?** Does this element appear in most real dashboards/UIs, or is it a rare specialization?\n2. **What can be removed?** If the block works without it, it probably should.\n3. **What is the user trying to do?** Not \"what does this block contain\" but \"what decision does it help someone make?\"\n4. **Am I building on the foundation or beside it?** Use shadcn/ui primitives. Compose, don't reimplement.\n5. **Would this hold up in production?** Not in a demo. In a real app, used by real people under time pressure.\n","skills/README.md":"# Creative Tim UI — Agent Skills\n\nReusable skills for AI coding agents. Compatible with Claude Code, Cursor, Cline, GitHub Copilot, Windsurf, and 40+ other agents via the [skills CLI](https://skills.sh).\n\n## Install\n\n```bash\nnpx skills add creativetimofficial/ui\n```\n\nInstall globally (available in all your projects):\n\n```bash\nnpx skills add creativetimofficial/ui -g\n```\n\nInstall for a specific agent only:\n\n```bash\nnpx skills add creativetimofficial/ui --agent claude-code\nnpx skills add creativetimofficial/ui --agent cursor\n```\n\n## Available Skills\n\n| Skill | Description |\n|-------|-------------|\n| [creative-tim-ui](./creative-tim-ui/) | Block library assistant — design philosophy, install commands, PRO API key, design rules |\n\n## What the Skill Does\n\nOnce installed, your AI agent knows how to:\n\n- Discover and install any of the 390+ blocks via `npx @creative-tim/ui@latest add `\n- Follow Creative Tim's design philosophy — minimalism, the 95% rule, deliberate restraint\n- Apply the correct design rules (brand colors, typography scale, Tailwind v4 constraints)\n- Set up PRO block access with `CREATIVE_TIM_UI_API_KEY`\n- Compose shadcn/ui primitives correctly without reimplementing them\n\nBrowse blocks: https://www.creative-tim.com/ui\nSkill page: https://skills.sh/creativetimofficial/ui/creative-tim-ui\n","skills/creative-tim-ui/SKILL.md":"---\nname: creative-tim-ui\ndescription: Creative Tim UI block library assistant. Use when adding, generating, or modifying UI blocks/components/pages from creative-tim.com/ui. Covers design philosophy (minimalism, the 95% rule, research-first), block discovery, both CLI install methods, PRO API key setup, and Creative Tim design rules (orange brand, shadcn/ui base, Tailwind v4). Generates blocks that are deliberate and restrained, not maximal.\nlicense: MIT\nmetadata:\n author: creative-tim\n version: \"1.0.0\"\n---\n\n# Creative Tim UI\n\nA comprehensive block library built on top of [shadcn/ui](https://ui.shadcn.com), with 390+ production-ready blocks across 40+ categories. All blocks are React + Tailwind CSS, compatible with Next.js (App Router), Remix, and Vite.\n\nBrowse the full library: **https://www.creative-tim.com/ui**\nAI-readable index: **https://www.creative-tim.com/ui/llms.txt**\n\n## Install This Skill\n\n```bash\n# Install via skills CLI (recommended)\nnpx skills add creativetimofficial/ui\n\n# Install globally (available in all projects)\nnpx skills add creativetimofficial/ui -g\n\n# Or install to a specific agent only\nnpx skills add creativetimofficial/ui --agent claude-code\n```\n\nSkill page: **https://skills.sh/creativetimofficial/ui/creative-tim-ui**\n\n## Design Philosophy\n\nAcross 300+ products and categories, Creative Tim has applied the same discipline: identify what developers actually need, build that exceptionally well, and cut everything else. That restraint is the core of the library.\n\nWhen generating or modifying blocks, follow these principles:\n\n**The 95% Rule** — build the common case exceptionally well. Don't add configuration, abstraction, or flexibility for problems that rarely exist. A developer should be able to read a block and immediately understand what it does.\n\n**The \"Light\" Principle** — a block is finished when there is nothing left to remove, not when there is nothing left to add. Question every wrapper div, every prop, every animation, every icon. If the block works without it, it probably should.\n\n**Research before rendering** — ask what the person looking at this screen is trying to *do*. A dashboard surfaces the number someone needs to act on. A form collects information with the least possible resistance. Design toward the purpose, not toward the surface.\n\n**Build on foundations** — shadcn/ui primitives (`Card`, `Table`, `Button`, `Badge`) are well-designed and maintained. Compose them; don't reimplement them. The Creative Tim contribution is in the composition and the judgment, not in the primitives.\n\n**Real use, not demo use** — the standard is: would a real team ship this in a production app? Avoid visual complexity that doesn't carry information. Communication beats decoration every time.\n\nFull detail with code examples: `rules/brand-philosophy.md`\n\n---\n\n## When to Apply\n\nUse this skill when:\n- Installing or customising a Creative Tim UI block in a project\n- Generating new blocks that should match Creative Tim's design system\n- Reviewing generated UI code for brand/style compliance\n- Setting up PRO API key access for premium blocks\n- Onboarding a new project to use the Creative Tim UI library\n\n## Block Categories\n\n| Category | Slug | Description |\n|----------|------|-------------|\n| AI Agents | `ai-agents` | Chat interfaces, activity feeds, tool use, transcription |\n| Pages | `pages` | Full-page agent management layouts |\n| Account | `account` | Profile, settings, billing management |\n| Authentication | `authentication` | Login, register, 2FA flows |\n| Hero | `hero` | Landing page hero sections |\n| Pricing | `pricing` | Pricing tables and billing plans |\n| Charts | `charts` | Data visualisation |\n| KPI | `kpi` | Metric cards and dashboards |\n| Stats | `stats` | Statistics sections |\n| Tables | `table` | Data tables with sorting/filtering |\n| Ecommerce | `ecommerce` | Product listings, carts, checkout |\n| Blog | `blog` | Article lists, post layouts |\n| Testimonials | `testimonials` | Social proof sections |\n| ... | | [Full list at /ui/llms.txt] |\n\n## Installing Blocks\n\nTwo methods are fully supported — choose whichever fits your setup.\n\n### Option 1 — Creative Tim CLI (recommended)\n\n```bash\nnpx @creative-tim/ui@latest add \n```\n\nInitialize a new project first (auto-detects Next.js / Vite / Remix / Astro):\n```bash\nnpx @creative-tim/ui@latest init\n```\n\nExamples:\n```bash\nnpx @creative-tim/ui@latest add hero-01\nnpx @creative-tim/ui@latest add ai-agent-activity-01\nnpx @creative-tim/ui@latest add agent-management-list-01\n```\n\nThe package also ships named binaries (`creative-tim-ui`, `creative-tim`) — same commands:\n```bash\nnpx creative-tim-ui add hero-01\nnpx creative-tim add hero-01\n```\n\n### Option 2 — shadcn CLI (full URL)\n\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/.json\n```\n\nExample:\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/ai-agent-activity-01.json\n```\n\nBoth methods copy the component source into your project and install all required shadcn/ui primitives (Button, Card, Badge, etc.) automatically.\n\n## PRO Blocks (API Key)\n\nSome blocks are marked **PRO** and require a Creative Tim API key. You can get a free key at **https://www.creative-tim.com/ui**.\n\n### Setup\n\nAdd the key to your environment:\n```bash\n# .env.local\nCREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx\n```\n\nPass the key when using either CLI:\n```bash\n# Creative Tim CLI\nnpx @creative-tim/ui@latest add pro-block-name --api-key $CREATIVE_TIM_UI_API_KEY\n\n# shadcn CLI — set Authorization header via registry config\n```\n\nOr set it globally via the Creative Tim CLI config:\n```bash\nnpx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx\n```\n\nAfter setting the key, PRO blocks install identically to free blocks.\n\n## Design Rules\n\nSee individual rule files for full detail. Quick summary:\n\n### Brand Colors\n- **Primary accent: orange** (`orange-500` / `orange-600`) — Creative Tim's brand color\n- Never use `violet`, `purple`, or `indigo` as accent colors — these signal AI-generated defaults\n- Neutral surfaces: `slate`, `gray`, `zinc`\n- Status: `emerald` (success), `amber` (warning), `red` (error), `blue` (info)\n\n### Typography\n- **`text-sm`** for all readable body content — labels, descriptions, table cells, list items\n- `text-xs` only for: avatar initials, `font-mono` timestamps, badge pills (status/priority), sidebar group headers (uppercase + tracking-wider), tiny h-6/h-7 action buttons\n- Never use `text-[10px]`, `text-[11px]`, or any arbitrary font-size values\n\n### Tailwind v4 — No Arbitrary Values\n- Use the numeric scale for spacing/sizing: `h-8`, `w-12`, `gap-3`, `p-4` — never `h-[32px]`\n- Use standard fractions for widths: `max-w-sm`, `max-w-2xl`, `w-1/2` — never `max-w-[85%]`\n- Responsive breakpoints only: `sm:`, `md:`, `lg:`, `xl:` — never `[@media(min-width:640px)]:`\n\n### Component Patterns\n- Prefer `Card > CardHeader + CardContent` for content grouping\n- KPI / stat cards: `CardContent className=\"px-4 py-0\"` (py-0, not default py-6)\n- Use `ScrollArea` for any list that can overflow\n- Sidebar navigation: 64 (`w-64`), border-r, `bg-muted/30`\n- Avoid inline `style={{}}` — always use Tailwind classes\n\n### Hydration Safety\n- Never use `new Date()`, `Date.now()`, or `toLocaleTimeString()` in `useState` initializers\n- Use static/hardcoded strings for SSR-safe initial state; switch to live values inside `useEffect` / `setInterval`\n\n## Full Design Guide\n\nFor the complete rules with code examples: `AGENTS.md`\n\nIndividual rules:\n```\nrules/install-blocks.md — CLI install walkthrough\nrules/pro-api-key.md — PRO key setup and auth\nrules/design-brand.md — Brand colors and identity\nrules/tailwind-rules.md — Tailwind v4 coding constraints\nrules/component-patterns.md — Preferred component patterns\nrules/hydration-safety.md — SSR/CSR hydration rules\n```\n\n## Deploying This Skill\n\nThis skill lives in the repo at `.claude/skills/creative-tim-ui/`. Anyone can install it in their own Claude Code setup by running:\n\n```bash\nclaude skill install github.com/creativetimofficial/ui .claude/skills/creative-tim-ui\n```\n\nOr by cloning and symlinking manually:\n```bash\n# Clone or copy the skills directory into your project\ncp -r path/to/ui-repo/.claude/skills/creative-tim-ui .claude/skills/creative-tim-ui\n```\n\nOnce installed the skill is available as `/creative-tim-ui` in any Claude Code session inside that project.\n","skills/creative-tim-ui/AGENTS.md":"# Creative Tim UI — Design & Usage Guide\n\n**Version 1.0.0**\nCreative Tim\nMarch 2026\n\n> **Note:**\n> This document is primarily for AI agents and LLMs generating, reviewing, or modifying\n> UI code that uses the Creative Tim UI block library. Guidance is optimised for\n> automation and consistency. Humans may also find it useful as a reference.\n\n---\n\n## Abstract\n\nCreative Tim UI is a block library of 390+ React + Tailwind CSS components built on shadcn/ui.\nThis guide covers the design philosophy behind every block, installation patterns, brand identity\nrules, Tailwind v4 constraints, and component conventions so AI-generated code stays consistent\nwith the library — not just visually, but in the decisions it makes.\n\n---\n\n## Table of Contents\n\n0. [Design Philosophy](#0-design-philosophy)\n1. [Installing Blocks](#1-installing-blocks)\n2. [PRO Blocks & API Key](#2-pro-blocks--api-key)\n3. [Brand Identity](#3-brand-identity)\n4. [Typography Rules](#4-typography-rules)\n5. [Tailwind v4 Constraints](#5-tailwind-v4-constraints)\n6. [Component Patterns](#6-component-patterns)\n7. [Hydration Safety](#7-hydration-safety)\n8. [Block Authoring Guide](#8-block-authoring-guide)\n\n---\n\n## 0. Design Philosophy\n\nAcross 300+ products and categories, Creative Tim has applied the same discipline: identify what developers actually need, build that exceptionally well, and cut everything else.\n\nThat discipline — research first, build only what's necessary, remove rather than add — is the foundation of every block in this library.\n\n**The five principles:**\n\n### 0.1 The 95% Rule\n\nBuild the common case exceptionally well. Do not reach for complex solutions to simple problems. A developer dropping in a block should not unwrap three layers of abstraction to change a label.\n\n### 0.2 The \"Light\" Principle\n\nA block is done not when there's nothing left to add, but when there's nothing left to remove. No feature flags for things that can be changed in code. No helper components used only once. No animations on elements that don't need to communicate state. No extra wrappers that exist only to satisfy a mental model.\n\n### 0.3 Research Before Rendering\n\nThe first question is always: what problem does this solve for the person looking at the screen? Not what looks good in isolation. A pricing table reduces friction in a purchase decision. A dashboard surfaces the one number a person needs to act on. If the purpose isn't clear, the block isn't clear.\n\n### 0.4 Standing on Foundations\n\nshadcn/ui's `Table`, `Card`, `Button`, `Badge`, `Dialog` are well-designed, accessible, and maintained. Do not rebuild them. Do not wrap them unnecessarily. The Creative Tim contribution is the **composition** — how primitives are assembled into something useful for real work.\n\n### 0.5 Real Use, Not Demo Use\n\nThe standard is: would a real team ship this to solve a real problem? Avoid visual complexity that doesn't carry information. A status badge that turns red when something is wrong is communication. A gradient that doesn't indicate anything is decoration. Only the first belongs.\n\nFull detail with code examples: `rules/brand-philosophy.md`\n\n---\n\n---\n\n## 1. Installing Blocks\n\n### 1.1 Creative Tim CLI\n\nThe preferred method. Installs the block and all shadcn/ui primitive dependencies automatically.\n\n```bash\n# Initialize project (auto-detects Next.js / Vite / Remix / Astro)\nnpx @creative-tim/ui@latest init\n\n# Add a block\nnpx @creative-tim/ui@latest add \n```\n\n**Package:** `@creative-tim/ui` (v0.4.x+)\n**Binaries:** `creative-tim-ui`, `creative-tim` (aliases for the same CLI)\n\n```bash\n# All of these are equivalent:\nnpx @creative-tim/ui@latest add hero-01\nnpx creative-tim-ui add hero-01\nnpx creative-tim add hero-01\n```\n\n**Examples:**\n```bash\nnpx @creative-tim/ui@latest add hero-01\nnpx @creative-tim/ui@latest add ai-agent-activity-01\nnpx @creative-tim/ui@latest add agent-management-list-01\nnpx @creative-tim/ui@latest add pricing-01\n```\n\nThe CLI copies the component into `components/ui/` (or your configured components directory) and runs `npx shadcn@latest add` for each dependency.\n\n### 1.2 shadcn CLI (Full URL)\n\nUse this when you prefer the shadcn workflow or when integrating with shadcn's registry tooling.\n\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/.json\n```\n\n**Examples:**\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/testimonials-03.json\n```\n\n### 1.3 Block Discovery\n\nBrowse all blocks:\n- Website: https://www.creative-tim.com/ui\n- AI index: https://www.creative-tim.com/ui/llms.txt (grouped by category, machine-readable)\n\nIndividual block JSON (for programmatic access):\n```\nhttps://www.creative-tim.com/ui/r/.json\n```\n\n---\n\n## 2. PRO Blocks & API Key\n\nPRO blocks require a `Creative-Tim-Api-Key` header when fetching the block JSON. Obtain a key at https://www.creative-tim.com/ui.\n\n### 2.1 Environment Setup\n\n```bash\n# .env.local (never commit this)\nCREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx\n```\n\n### 2.2 CLI Install with Key\n\n```bash\nnpx @creative-tim/ui@latest add --api-key $CREATIVE_TIM_UI_API_KEY\n```\n\n### 2.3 Global Login (persists across sessions)\n\n```bash\nnpx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx\n```\n\nAfter login, all `add` commands automatically include the key — no `--api-key` flag needed.\n\n### 2.4 Detecting PRO Blocks\n\nPRO blocks are marked on the website. In the registry JSON they include `\"pro\": true`. Free-tier blocks have no `pro` field.\n\n---\n\n## 3. Brand Identity\n\n### 3.1 Primary Accent — Orange\n\n**Rule:** Use `orange` as the primary brand accent for interactive elements, icons, CTAs, and highlights.\n\n```tsx\n// CORRECT — orange accent\n
\n \n
\nJD\nOpenClaw\n```\n\n```tsx\n// WRONG — violet/purple signals AI-generated defaults, not Creative Tim\n
...
\n...\n```\n\n**Why:** Purple/violet is the default accent in many AI coding tools. Any block using it looks auto-generated and inconsistent with the library.\n\n### 3.2 Status Colors\n\n| State | Color |\n|-------|-------|\n| Active / Success | `emerald` |\n| Warning / Pending | `amber` |\n| Error / Stopped | `red` |\n| Info / In-Progress | `blue` |\n| Neutral / Inactive | `slate` |\n\n### 3.3 Surface Colors\n\n- Card backgrounds: `bg-background` (default card) or `bg-muted/30` (subtle areas like sidebars)\n- Borders: use `border` (theme token) — never hardcode `border-gray-200`\n- Text hierarchy: `text-foreground` (primary), `text-muted-foreground` (secondary)\n\n---\n\n## 4. Typography Rules\n\n### 4.1 `text-sm` for Readable Content\n\n**Rule:** Use `text-sm` for all body text that users need to read.\n\n```tsx\n// CORRECT\n{agent.name}\n

{description}

\n{agent.lastActive}\n```\n\n```tsx\n// WRONG — text-xs for readable body content is too small\n{agent.name}\n

{description}

\n```\n\n### 4.2 `text-xs` Only for Tiny/Supplementary Elements\n\n`text-xs` is acceptable for:\n- Avatar initials (`AvatarFallback`)\n- `font-mono` timestamps and IDs\n- Badge/pill labels (priority, status)\n- Sidebar group headers (`uppercase tracking-wider`)\n- Action buttons with h-6 or h-7 (`className=\"h-6 px-2 text-xs\"`)\n\n### 4.3 Never Use Arbitrary Font Sizes\n\n```tsx\n// WRONG\n...\n

...

\n
...
\n```\n\n---\n\n## 5. Tailwind v4 Constraints\n\n### 5.1 No Arbitrary Values\n\nTailwind v4 uses a continuous numeric scale. Arbitrary bracket values are not allowed.\n\n```tsx\n// WRONG — arbitrary values\n
\n
\n
\n```\n\n```tsx\n// CORRECT — use the numeric scale\n
// h-96 = 384px, w-72 = 288px\n
// 384px — close enough, or max-w-xs / max-w-md\n
// gap-3.5 = 14px, p-4 = 16px\n```\n\n### 5.2 Numeric Scale Reference\n\n```\nh-6 = 24px h-8 = 32px h-10 = 40px\nh-12 = 48px h-16 = 64px h-20 = 80px\nh-24 = 96px h-32 = 128px h-48 = 192px\nh-64 = 256px h-80 = 320px h-96 = 384px\n\ngap-1 = 4px gap-2 = 8px gap-3 = 12px\ngap-4 = 16px gap-5 = 20px gap-6 = 24px\n\np-2 = 8px p-3 = 12px p-4 = 16px\np-5 = 20px p-6 = 24px\n```\n\n### 5.3 Use Semantic Width Utilities\n\n```tsx\n// CORRECT\n
// 384px\n
// 448px\n
// 512px\n
// 576px\n
// 672px\n
// sidebar = 256px\n
// kanban column = 288px\n```\n\n### 5.4 Responsive Breakpoints Only\n\n```tsx\n// CORRECT\n
\n\n// WRONG — custom media query\n
\n```\n\n---\n\n## 6. Component Patterns\n\n### 6.1 Card Structure\n\nUse `Card > CardHeader + CardContent` for content grouping.\n\n```tsx\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\n\n\n \n Section Title\n \n \n {/* content */}\n \n\n```\n\n### 6.2 KPI / Stat Cards — py-0\n\nKPI cards use `py-0` on CardContent to let the parent padding control vertical rhythm.\n\n```tsx\n// CORRECT\n\n \n

Total Agents

\n

42

\n \n\n\n// WRONG — default py causes too much padding in stat grids\n\n \n```\n\n### 6.3 Sidebar Navigation\n\nStandard sidebar width is `w-64` (256px), with `bg-muted/30 border-r`.\n\n```tsx\n\n```\n\n### 6.4 ScrollArea for Overflow\n\nAny list that may overflow its container must use `ScrollArea`.\n\n```tsx\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\n\n\n
\n {items.map((item) => )}\n
\n\n```\n\n### 6.5 Badge Variants\n\n```tsx\n// Status badge (with dot)\n
\n \n Active\n
\n\n// Type badge\n\n OpenClaw\n\n```\n\n### 6.6 Avoid Inline Styles\n\n```tsx\n// WRONG\n
\n\n// CORRECT\n
\n```\n\n---\n\n## 7. Hydration Safety\n\n### 7.1 Never Use Date in useState Initializer\n\n`new Date()`, `Date.now()`, and `toLocaleTimeString()` return different values on the server vs. the client, causing React hydration errors.\n\n```tsx\n// WRONG — causes \"Hydration failed\" error\nconst [events, setEvents] = useState(() => [\n { id: \"1\", timestamp: new Date().toLocaleTimeString() },\n])\n\n// WRONG — locale-dependent\nconst [time, setTime] = useState(new Date().toLocaleTimeString())\n```\n\n```tsx\n// CORRECT — static strings for initial SSR state\nconst INITIAL_TIMESTAMPS = [\"10:30:00\", \"10:30:04\", \"10:30:08\"]\n\nconst [events, setEvents] = useState(() =>\n INITIAL_DATA.slice(0, 3).map((e, i) => ({\n ...e,\n id: `init-${i}`,\n timestamp: INITIAL_TIMESTAMPS[i],\n }))\n)\n\n// Live timestamps only inside useEffect / setInterval (client-only)\nfunction nowTimeString() {\n const d = new Date()\n return [d.getHours(), d.getMinutes(), d.getSeconds()]\n .map((n) => String(n).padStart(2, \"0\"))\n .join(\":\")\n}\n\nuseEffect(() => {\n const interval = setInterval(() => {\n setEvents((prev) => [\n ...prev,\n { id: `evt-${Date.now()}`, timestamp: nowTimeString(), ... }\n ])\n }, 2000)\n return () => clearInterval(interval)\n}, [])\n```\n\n### 7.2 suppressHydrationWarning for Intentional Mismatches\n\nIf a mismatch is truly intentional (e.g. a live clock that intentionally differs):\n```tsx\n\n```\n\n---\n\n## 8. Block Authoring Guide\n\n### 8.1 File Structure\n\nEvery block consists of two files:\n1. `registry/creative-tim/blocks/.tsx` — the component\n2. `registry/creative-tim/blocks//page.tsx` — the page wrapper\n\nThe page wrapper simply renders the block:\n```tsx\nimport BlockName from \"@/registry/creative-tim/blocks/\"\nexport default function Page() {\n return \n}\n```\n\n### 8.2 Registry Entry\n\nAdd to `registry/registry-blocks.ts`:\n```ts\n{\n name: \"my-block-01\",\n type: \"registry:block\",\n categories: [\"my-category\"],\n meta: {\n isFree: true,\n label: \"My Block\",\n createdAt: \"2026-03-14\",\n },\n registryDependencies: [\"button\", \"card\", \"badge\"], // SHORT NAMES ONLY\n files: [\n {\n path: \"registry/creative-tim/blocks/my-block-01.tsx\",\n type: \"registry:component\",\n },\n {\n path: \"registry/creative-tim/blocks/my-block-01/page.tsx\",\n type: \"registry:page\",\n target: \"app/blocks/my-block-01/page.tsx\",\n },\n ],\n}\n```\n\n**IMPORTANT:** `registryDependencies` must use **short names** (`\"button\"`, `\"card\"`, `\"badge\"`) — never full URLs.\n\n### 8.3 After Adding Blocks\n\nRebuild the registry:\n```bash\npnpm --filter www registry:build\n```\n\nThis regenerates `public/r/*.json`, `__index__.tsx`, and `__blocks__.json` (which powers `llms.txt`).\n\n### 8.4 Import Paths in Blocks\n\nUse the registry alias, not relative paths:\n```tsx\nimport { Button } from \"@/registry/creative-tim/ui/button\"\nimport { Card, CardContent } from \"@/registry/creative-tim/ui/card\"\n```\n\n### 8.5 Block Checklist\n\nBefore submitting a new block:\n- [ ] No `violet` or `purple` colors — use `orange` for brand accent\n- [ ] All readable text uses `text-sm` minimum\n- [ ] No arbitrary Tailwind values (`[10px]`, `[85%]`, etc.)\n- [ ] KPI/stat `CardContent` uses `px-4 py-0`\n- [ ] No `new Date()` in `useState` initializers\n- [ ] No inline `style={{}}` attributes\n- [ ] `registryDependencies` uses short names\n- [ ] `registry:build` completes without errors\n","skills/creative-tim-ui/rules/component-patterns.md":"# Component Patterns\n\n## Card Structure\n\nStandard grouping pattern: `Card > CardHeader + CardContent`.\n\n```tsx\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\n\n\n \n Section Title\n \n \n {/* content */}\n \n\n```\n\n## KPI / Stat Cards — Use py-0\n\nStat grid cards use `py-0` so vertical rhythm is controlled by the parent grid, not the card itself.\n\n```tsx\n// CORRECT\n\n \n
\n

Active Agents

\n

4

\n \n\n\n// WRONG — default py-6 causes excessive padding in stat grids\n\n \n```\n\n## Sidebar Navigation\n\nWidth: `w-64` (256px). Background: `bg-muted/30`. Right border: `border-r`.\n\n```tsx\n\n```\n\n## ScrollArea for Overflow\n\nAny list that can overflow must use `ScrollArea` (not `overflow-y-auto` directly).\n\n```tsx\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\n\n\n
\n {items.map((item) => )}\n
\n\n```\n\n## Status Badge with Dot\n\n```tsx\n
\n \n Active\n
\n```\n\n## Avatar Fallback Colors\n\nUse orange tones for user/agent avatars:\n```tsx\n\n JD\n\n```\n\n## Action Buttons in Tables\n\nSmall ghost buttons for row actions:\n```tsx\n\n```\n","skills/creative-tim-ui/rules/pro-api-key.md":"# PRO Blocks & API Key Setup\n\n## Summary\n\nPRO blocks require a Creative Tim API key. Get yours at https://www.creative-tim.com/ui/dashboard → **API Keys** section.\n\nAPI key format: `pk_live_` prefix (e.g. `pk_live_a09e7677...`)\n\n## Authentication Methods\n\n### Method 1 — Environment Variable (recommended for development)\n\n```bash\n# macOS/Linux\nexport CREATIVE_TIM_UI_API_KEY=pk_live_your_key\n\n# Inline (one-off)\nCREATIVE_TIM_UI_API_KEY=pk_live_your_key npx @creative-tim/ui@latest add \n\n# .env.local (Next.js / Vite) — never commit this file\nCREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx\n```\n\nThen install normally — the CLI picks up the env var automatically:\n```bash\nnpx @creative-tim/ui@latest add \n```\n\nOr pass it explicitly:\n```bash\nnpx @creative-tim/ui@latest add --api-key $CREATIVE_TIM_UI_API_KEY\n```\n\n### Method 2 — components.json (recommended for teams / CI/CD)\n\nAdd a `registries` entry to `components.json`:\n\n```json\n{\n \"registries\": {\n \"@creative-tim\": {\n \"url\": \"https://www.creative-tim.com/ui/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${CREATIVE_TIM_UI_API_KEY}\"\n }\n }\n }\n}\n```\n\nTeam members each set `CREATIVE_TIM_UI_API_KEY` in their own shell / CI secrets.\n\n### Method 3 — shadcn CLI\n\nThe same `components.json` config above works with the shadcn CLI:\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/.json\n```\n\n## Detecting PRO Blocks\n\nPRO blocks are marked on the website. In registry JSON they include `\"pro\": true`.\n","skills/creative-tim-ui/rules/tailwind-rules.md":"# Tailwind v4 Rules\n\n## No Arbitrary Values\n\nThe project uses Tailwind v4 with a continuous numeric scale. Never use bracket arbitrary values.\n\n### Wrong\n\n```tsx\n
\n
\n
\n```\n\n### Correct\n\n```tsx\n
// h-96=384px, w-72=288px\n
// gap-3.5=14px, p-4=16px\n
\n```\n\n## Numeric Scale Reference\n\n### Height / Width\n```\nh-4 = 16px h-5 = 20px h-6 = 24px h-7 = 28px\nh-8 = 32px h-9 = 36px h-10 = 40px h-11 = 44px\nh-12 = 48px h-14 = 56px h-16 = 64px h-20 = 80px\nh-24 = 96px h-32 = 128px h-40 = 160px h-48 = 192px\nh-56 = 224px h-64 = 256px h-72 = 288px h-80 = 320px\nh-96 = 384px\n```\n\n### Spacing (gap / padding / margin)\n```\n0.5=2px 1=4px 1.5=6px 2=8px 2.5=10px 3=12px 3.5=14px\n4=16px 5=20px 6=24px 7=28px 8=32px 9=36px 10=40px\n12=48px 14=56px 16=64px\n```\n\n### Max Width Semantic Utilities\n```\nmax-w-xs = 320px max-w-sm = 384px\nmax-w-md = 448px max-w-lg = 512px\nmax-w-xl = 576px max-w-2xl = 672px\nmax-w-3xl = 768px max-w-4xl = 896px\nmax-w-5xl = 1024px max-w-6xl = 1152px\nmax-w-7xl = 1280px\n```\n\n## Typography Scale\n\n```\ntext-xs = 12px (avatar initials, badge pills, mono timestamps, tiny buttons)\ntext-sm = 14px (body text, table cells, descriptions — DEFAULT)\ntext-base = 16px (larger body, card titles)\ntext-lg = 18px (section headings)\ntext-xl = 20px (page headings)\ntext-2xl = 24px (stat values, hero text)\n```\n\n**Rule:** `text-sm` is the minimum for readable content. Use `text-xs` only for tiny decorative elements.\n\n## Responsive Breakpoints\n\nUse only standard Tailwind breakpoints:\n```\nsm: 640px md: 768px lg: 1024px xl: 1280px 2xl: 1536px\n```\n\nNever use custom media query syntax.\n","skills/creative-tim-ui/rules/hydration-safety.md":"# Hydration Safety Rules\n\n## Never Use Date in useState Initializer\n\n`new Date()`, `Date.now()`, and `toLocaleTimeString()` produce different values on the server vs. the client, causing React to throw a hydration mismatch error.\n\n### Wrong\n\n```tsx\n// Hydration error: server timestamp != client timestamp\nconst [events, setEvents] = useState(() => [\n { id: \"1\", timestamp: new Date().toLocaleTimeString() },\n])\n\nconst [time, setTime] = useState(new Date().toLocaleTimeString())\n\nconst [id, setId] = useState(() => Date.now().toString())\n```\n\n### Correct\n\nUse static/hardcoded strings for SSR-safe initial state. Move live values inside `useEffect` or `setInterval`.\n\n```tsx\n// Static initial timestamps — identical on server and client\nconst INITIAL_TIMESTAMPS = [\"10:30:00\", \"10:30:04\", \"10:30:08\"]\n\nconst [events, setEvents] = useState(() =>\n SEED_DATA.slice(0, 3).map((item, i) => ({\n ...item,\n id: `init-${i}`,\n timestamp: INITIAL_TIMESTAMPS[i],\n }))\n)\n\n// Pure function, safe to call client-side only\nfunction nowTimeString() {\n const d = new Date()\n return [d.getHours(), d.getMinutes(), d.getSeconds()]\n .map((n) => String(n).padStart(2, \"0\"))\n .join(\":\")\n}\n\n// Live updates only in useEffect (never runs on server)\nuseEffect(() => {\n const interval = setInterval(() => {\n setEvents((prev) => [\n ...prev.slice(-49),\n {\n id: `evt-${Date.now()}`,\n timestamp: nowTimeString(),\n // ...rest of event\n },\n ])\n }, 2000)\n return () => clearInterval(interval)\n}, [])\n```\n\n## Locale-Dependent Formatting\n\n`toLocaleString()`, `toLocaleDateString()`, `toLocaleTimeString()` are locale-dependent — the server locale may differ from the browser locale.\n\n```tsx\n// WRONG — locale mismatch\n{new Date(item.createdAt).toLocaleTimeString()}\n\n// CORRECT — use fixed format string or static value\n{item.createdAt} // pre-formatted string, e.g. \"2 hours ago\"\n```\n\n## suppressHydrationWarning\n\nOnly use `suppressHydrationWarning` when the mismatch is **intentional** (e.g. a live clock that is always slightly different):\n\n```tsx\n\n```\n\nDo not use it to silence bugs — fix the root cause instead.\n","skills/creative-tim-ui/rules/design-brand.md":"# Brand & Design Identity Rules\n\n## Primary Accent — Orange\n\nCreative Tim's brand color is **orange**. Always use orange for primary accents, interactive elements, CTAs, and logo marks.\n\n### Correct\n\n```tsx\n// Logo / app icon\n
\n \n
\n\n// Avatar fallback\nJD\n\n// Type badge\nOpenClaw\n\n// Active nav item accent\n\n```\n\n### Wrong\n\n```tsx\n// DO NOT use violet or purple — signals AI-generated defaults\n
\n\n\n```\n\n**Why:** Purple/violet is the default accent in many AI coding tools. Blocks using these colors look auto-generated and break visual consistency with the Creative Tim brand.\n\n## Status Color System\n\n| State | Tailwind Color |\n|-------|---------------|\n| Active / Success | `emerald` |\n| Warning / In-Review / Paused | `amber` |\n| Error / Stopped / Critical | `red` |\n| Info / In-Progress | `blue` |\n| Neutral / Backlog | `slate` |\n\n## Surface & Border Conventions\n\n- **Sidebar / subtle backgrounds:** `bg-muted/30`\n- **Card backgrounds:** default `bg-background` (Card component handles this)\n- **Borders:** use `border` theme token — never `border-gray-200` or hardcoded colors\n- **Text:** `text-foreground` (primary), `text-muted-foreground` (secondary/captions)\n\n## Do Not Use Inline Styles\n\n```tsx\n// WRONG\n
\n\n// CORRECT\n
\n```\n"},"files":{"skills/creative-tim-ui/rules/brand-philosophy.md":"# Creative Tim Design Philosophy\n\nThis is not a style guide. It's the thinking behind every decision — what to build, what to cut, and why.\n\nOver a decade, Creative Tim has shipped 300+ open source UI dashboards, templates, and tools used by 2.8 million developers worldwide. That scale of use across that many products leaves no room for guesswork. Every principle here has been tested against real projects, real teams, and real feedback — not theory.\n\n---\n\n## The 95% Rule — Solve the Common Case Exceptionally Well\n\nEvery product Creative Tim ships starts with the same question: what do developers actually need? The answer, across hundreds of products and categories, is consistently the same core set of elements — buttons, tables, cards, sidebars, charts, forms, modals, notifications.\n\nThat's the 95%. The remaining 5% is Kanban boards, drag-and-drop, custom file uploaders, timeline components, WYSIWYG editors — powerful, but rare.\n\n**The rule:** build the 95% so well that no one feels the lack of the 5%.\n\nFor agents generating code: do not reach for complex solutions to solve simple problems. A developer looking at a block should not find themselves unwrapping three layers of abstraction to change a label. The common case should be obvious, direct, and complete.\n\n```tsx\n// WRONG — solves a hypothetical future problem\n }\n/>\n\n// RIGHT — solves the actual problem in front of you\n\n ...\n \n {items.map((item) => (\n \n {item.name}\n {item.status}\n \n ))}\n \n
\n```\n\n---\n\n## The \"Light\" Principle — A Block Is Done When There Is Nothing Left to Remove\n\nAcross Creative Tim's product line, \"light\" is a recurring word — not because the products lack capability, but because every addition is interrogated. Each plugin, prop, and wrapper adds CSS, JavaScript, and cognitive weight. Most are cut.\n\nThis is the hardest design discipline: not building things you know how to build.\n\n**What it means in practice:**\n\n- No feature flags or configuration props for things that can just be changed in code\n- No helper components that are only used once\n- No animation on elements that don't need to communicate state\n- No extra wrapper `div`s that exist only to satisfy a mental model\n- No icons that repeat information already conveyed by text\n- No empty states, loading states, or error states unless the block actually fetches data\n\nA block should look complete the moment a developer drops it in. Not because it handles every edge case, but because it clearly handles the right ones.\n\n```tsx\n// WRONG — wrapping for the sake of wrapping\n\n \n \n ...\n \n \n\n\n// RIGHT — as flat as the problem allows\n...\n```\n\n---\n\n## Understand the Problem Before Rendering\n\nThe first question is always **what problem does this solve for the person looking at the screen?** Not what looks good in isolation. Not what demonstrates technical capability.\n\nA pricing table exists to reduce friction in a purchase decision. A dashboard exists to surface the one number a person needs to act on. A form exists to collect information with the least possible resistance.\n\nIf the purpose of a block is not clear, the block is not clear.\n\n---\n\n## Standing on Foundations — Never Build What Already Exists Well\n\nCreative Tim's history is building *on top of* the best available foundation rather than beside it. Bootstrap → Material Design → shadcn/ui. Each transition kept what worked and added only what was missing.\n\nThe same applies to individual blocks. shadcn/ui's `Table`, `Card`, `Button`, `Badge`, `Dialog` are well-designed, accessible, and maintained. Do not rebuild them. Do not wrap them unnecessarily. Do not replicate their functionality in custom components.\n\nThe Creative Tim contribution is the **composition** — how these primitives are assembled into something useful for real work. That is where the judgment lives, not in the primitives themselves.\n\n```tsx\n// WRONG — reimplementing what shadcn already solved\nfunction CustomButton({ variant, children }) {\n const styles = variant === 'primary' ? 'bg-orange-500 text-white' : 'bg-gray-100'\n return \n}\n\n// RIGHT — extend the foundation\nimport { Button } from \"@/registry/creative-tim/ui/button\"\n\n```\n\n---\n\n## Real Use, Not Demo Use\n\nThe benchmark for every block is whether a real team would ship it in a production app. Not \"does this look impressive in a screenshot?\" but \"would this hold up under real conditions, used by real people under time pressure?\"\n\n**Concretely:** avoid visual complexity that doesn't carry information. A gradient on a card header that doesn't indicate anything is decoration. A status badge that turns red when something is wrong is communication. Only the second one belongs.\n\n```tsx\n// WRONG — decoration that doesn't communicate\n\n Users\n\n\n// RIGHT — surface that lets the content speak\n\n Users\n\n```\n\n---\n\n## Summary — The Questions to Ask\n\nBefore generating or modifying any block, run through these:\n\n1. **Is this in the 95%?** Does this element appear in most real dashboards/UIs, or is it a rare specialization?\n2. **What can be removed?** If the block works without it, it probably should.\n3. **What is the user trying to do?** Not \"what does this block contain\" but \"what decision does it help someone make?\"\n4. **Am I building on the foundation or beside it?** Use shadcn/ui primitives. Compose, don't reimplement.\n5. **Would this hold up in production?** Not in a demo. In a real app, used by real people under time pressure.\n","skills/README.md":"# Creative Tim UI — Agent Skills\n\nReusable skills for AI coding agents. Compatible with Claude Code, Cursor, Cline, GitHub Copilot, Windsurf, and 40+ other agents via the [skills CLI](https://skills.sh).\n\n## Install\n\n```bash\nnpx skills add creativetimofficial/ui\n```\n\nInstall globally (available in all your projects):\n\n```bash\nnpx skills add creativetimofficial/ui -g\n```\n\nInstall for a specific agent only:\n\n```bash\nnpx skills add creativetimofficial/ui --agent claude-code\nnpx skills add creativetimofficial/ui --agent cursor\n```\n\n## Available Skills\n\n| Skill | Description |\n|-------|-------------|\n| [creative-tim-ui](./creative-tim-ui/) | Block library assistant — design philosophy, install commands, PRO API key, design rules |\n\n## What the Skill Does\n\nOnce installed, your AI agent knows how to:\n\n- Discover and install any of the 390+ blocks via `npx @creative-tim/ui@latest add `\n- Follow Creative Tim's design philosophy — minimalism, the 95% rule, deliberate restraint\n- Apply the correct design rules (brand colors, typography scale, Tailwind v4 constraints)\n- Set up PRO block access with `CREATIVE_TIM_UI_API_KEY`\n- Compose shadcn/ui primitives correctly without reimplementing them\n\nBrowse blocks: https://www.creative-tim.com/ui\nSkill page: https://skills.sh/creativetimofficial/ui/creative-tim-ui\n","skills/creative-tim-ui/SKILL.md":"---\nname: creative-tim-ui\ndescription: Creative Tim UI block library assistant. Use when adding, generating, or modifying UI blocks/components/pages from creative-tim.com/ui. Covers design philosophy (minimalism, the 95% rule, research-first), block discovery, both CLI install methods, PRO API key setup, and Creative Tim design rules (orange brand, shadcn/ui base, Tailwind v4). Generates blocks that are deliberate and restrained, not maximal.\nlicense: MIT\nmetadata:\n author: creative-tim\n version: \"1.0.0\"\n---\n\n# Creative Tim UI\n\nA comprehensive block library built on top of [shadcn/ui](https://ui.shadcn.com), with 390+ production-ready blocks across 40+ categories. All blocks are React + Tailwind CSS, compatible with Next.js (App Router), Remix, and Vite.\n\nBrowse the full library: **https://www.creative-tim.com/ui**\nAI-readable index: **https://www.creative-tim.com/ui/llms.txt**\n\n## Install This Skill\n\n```bash\n# Install via skills CLI (recommended)\nnpx skills add creativetimofficial/ui\n\n# Install globally (available in all projects)\nnpx skills add creativetimofficial/ui -g\n\n# Or install to a specific agent only\nnpx skills add creativetimofficial/ui --agent claude-code\n```\n\nSkill page: **https://skills.sh/creativetimofficial/ui/creative-tim-ui**\n\n## Design Philosophy\n\nAcross 300+ products and categories, Creative Tim has applied the same discipline: identify what developers actually need, build that exceptionally well, and cut everything else. That restraint is the core of the library.\n\nWhen generating or modifying blocks, follow these principles:\n\n**The 95% Rule** — build the common case exceptionally well. Don't add configuration, abstraction, or flexibility for problems that rarely exist. A developer should be able to read a block and immediately understand what it does.\n\n**The \"Light\" Principle** — a block is finished when there is nothing left to remove, not when there is nothing left to add. Question every wrapper div, every prop, every animation, every icon. If the block works without it, it probably should.\n\n**Research before rendering** — ask what the person looking at this screen is trying to *do*. A dashboard surfaces the number someone needs to act on. A form collects information with the least possible resistance. Design toward the purpose, not toward the surface.\n\n**Build on foundations** — shadcn/ui primitives (`Card`, `Table`, `Button`, `Badge`) are well-designed and maintained. Compose them; don't reimplement them. The Creative Tim contribution is in the composition and the judgment, not in the primitives.\n\n**Real use, not demo use** — the standard is: would a real team ship this in a production app? Avoid visual complexity that doesn't carry information. Communication beats decoration every time.\n\nFull detail with code examples: `rules/brand-philosophy.md`\n\n---\n\n## When to Apply\n\nUse this skill when:\n- Installing or customising a Creative Tim UI block in a project\n- Generating new blocks that should match Creative Tim's design system\n- Reviewing generated UI code for brand/style compliance\n- Setting up PRO API key access for premium blocks\n- Onboarding a new project to use the Creative Tim UI library\n\n## Block Categories\n\n| Category | Slug | Description |\n|----------|------|-------------|\n| AI Agents | `ai-agents` | Chat interfaces, activity feeds, tool use, transcription |\n| Pages | `pages` | Full-page agent management layouts |\n| Account | `account` | Profile, settings, billing management |\n| Authentication | `authentication` | Login, register, 2FA flows |\n| Hero | `hero` | Landing page hero sections |\n| Pricing | `pricing` | Pricing tables and billing plans |\n| Charts | `charts` | Data visualisation |\n| KPI | `kpi` | Metric cards and dashboards |\n| Stats | `stats` | Statistics sections |\n| Tables | `table` | Data tables with sorting/filtering |\n| Ecommerce | `ecommerce` | Product listings, carts, checkout |\n| Blog | `blog` | Article lists, post layouts |\n| Testimonials | `testimonials` | Social proof sections |\n| ... | | [Full list at /ui/llms.txt] |\n\n## Installing Blocks\n\nTwo methods are fully supported — choose whichever fits your setup.\n\n### Option 1 — Creative Tim CLI (recommended)\n\n```bash\nnpx @creative-tim/ui@latest add \n```\n\nInitialize a new project first (auto-detects Next.js / Vite / Remix / Astro):\n```bash\nnpx @creative-tim/ui@latest init\n```\n\nExamples:\n```bash\nnpx @creative-tim/ui@latest add hero-01\nnpx @creative-tim/ui@latest add ai-agent-activity-01\nnpx @creative-tim/ui@latest add agent-management-list-01\n```\n\nThe package also ships named binaries (`creative-tim-ui`, `creative-tim`) — same commands:\n```bash\nnpx creative-tim-ui add hero-01\nnpx creative-tim add hero-01\n```\n\n### Option 2 — shadcn CLI (full URL)\n\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/.json\n```\n\nExample:\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/ai-agent-activity-01.json\n```\n\nBoth methods copy the component source into your project and install all required shadcn/ui primitives (Button, Card, Badge, etc.) automatically.\n\n## PRO Blocks (API Key)\n\nSome blocks are marked **PRO** and require a Creative Tim API key. You can get a free key at **https://www.creative-tim.com/ui**.\n\n### Setup\n\nAdd the key to your environment:\n```bash\n# .env.local\nCREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx\n```\n\nPass the key when using either CLI:\n```bash\n# Creative Tim CLI\nnpx @creative-tim/ui@latest add pro-block-name --api-key $CREATIVE_TIM_UI_API_KEY\n\n# shadcn CLI — set Authorization header via registry config\n```\n\nOr set it globally via the Creative Tim CLI config:\n```bash\nnpx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx\n```\n\nAfter setting the key, PRO blocks install identically to free blocks.\n\n## Design Rules\n\nSee individual rule files for full detail. Quick summary:\n\n### Brand Colors\n- **Primary accent: orange** (`orange-500` / `orange-600`) — Creative Tim's brand color\n- Never use `violet`, `purple`, or `indigo` as accent colors — these signal AI-generated defaults\n- Neutral surfaces: `slate`, `gray`, `zinc`\n- Status: `emerald` (success), `amber` (warning), `red` (error), `blue` (info)\n\n### Typography\n- **`text-sm`** for all readable body content — labels, descriptions, table cells, list items\n- `text-xs` only for: avatar initials, `font-mono` timestamps, badge pills (status/priority), sidebar group headers (uppercase + tracking-wider), tiny h-6/h-7 action buttons\n- Never use `text-[10px]`, `text-[11px]`, or any arbitrary font-size values\n\n### Tailwind v4 — No Arbitrary Values\n- Use the numeric scale for spacing/sizing: `h-8`, `w-12`, `gap-3`, `p-4` — never `h-[32px]`\n- Use standard fractions for widths: `max-w-sm`, `max-w-2xl`, `w-1/2` — never `max-w-[85%]`\n- Responsive breakpoints only: `sm:`, `md:`, `lg:`, `xl:` — never `[@media(min-width:640px)]:`\n\n### Component Patterns\n- Prefer `Card > CardHeader + CardContent` for content grouping\n- KPI / stat cards: `CardContent className=\"px-4 py-0\"` (py-0, not default py-6)\n- Use `ScrollArea` for any list that can overflow\n- Sidebar navigation: 64 (`w-64`), border-r, `bg-muted/30`\n- Avoid inline `style={{}}` — always use Tailwind classes\n\n### Hydration Safety\n- Never use `new Date()`, `Date.now()`, or `toLocaleTimeString()` in `useState` initializers\n- Use static/hardcoded strings for SSR-safe initial state; switch to live values inside `useEffect` / `setInterval`\n\n## Full Design Guide\n\nFor the complete rules with code examples: `AGENTS.md`\n\nIndividual rules:\n```\nrules/install-blocks.md — CLI install walkthrough\nrules/pro-api-key.md — PRO key setup and auth\nrules/design-brand.md — Brand colors and identity\nrules/tailwind-rules.md — Tailwind v4 coding constraints\nrules/component-patterns.md — Preferred component patterns\nrules/hydration-safety.md — SSR/CSR hydration rules\n```\n\n## Deploying This Skill\n\nThis skill lives in the repo at `.claude/skills/creative-tim-ui/`. Anyone can install it in their own Claude Code setup by running:\n\n```bash\nclaude skill install github.com/creativetimofficial/ui .claude/skills/creative-tim-ui\n```\n\nOr by cloning and symlinking manually:\n```bash\n# Clone or copy the skills directory into your project\ncp -r path/to/ui-repo/.claude/skills/creative-tim-ui .claude/skills/creative-tim-ui\n```\n\nOnce installed the skill is available as `/creative-tim-ui` in any Claude Code session inside that project.\n","skills/creative-tim-ui/AGENTS.md":"# Creative Tim UI — Design & Usage Guide\n\n**Version 1.0.0**\nCreative Tim\nMarch 2026\n\n> **Note:**\n> This document is primarily for AI agents and LLMs generating, reviewing, or modifying\n> UI code that uses the Creative Tim UI block library. Guidance is optimised for\n> automation and consistency. Humans may also find it useful as a reference.\n\n---\n\n## Abstract\n\nCreative Tim UI is a block library of 390+ React + Tailwind CSS components built on shadcn/ui.\nThis guide covers the design philosophy behind every block, installation patterns, brand identity\nrules, Tailwind v4 constraints, and component conventions so AI-generated code stays consistent\nwith the library — not just visually, but in the decisions it makes.\n\n---\n\n## Table of Contents\n\n0. [Design Philosophy](#0-design-philosophy)\n1. [Installing Blocks](#1-installing-blocks)\n2. [PRO Blocks & API Key](#2-pro-blocks--api-key)\n3. [Brand Identity](#3-brand-identity)\n4. [Typography Rules](#4-typography-rules)\n5. [Tailwind v4 Constraints](#5-tailwind-v4-constraints)\n6. [Component Patterns](#6-component-patterns)\n7. [Hydration Safety](#7-hydration-safety)\n8. [Block Authoring Guide](#8-block-authoring-guide)\n\n---\n\n## 0. Design Philosophy\n\nAcross 300+ products and categories, Creative Tim has applied the same discipline: identify what developers actually need, build that exceptionally well, and cut everything else.\n\nThat discipline — research first, build only what's necessary, remove rather than add — is the foundation of every block in this library.\n\n**The five principles:**\n\n### 0.1 The 95% Rule\n\nBuild the common case exceptionally well. Do not reach for complex solutions to simple problems. A developer dropping in a block should not unwrap three layers of abstraction to change a label.\n\n### 0.2 The \"Light\" Principle\n\nA block is done not when there's nothing left to add, but when there's nothing left to remove. No feature flags for things that can be changed in code. No helper components used only once. No animations on elements that don't need to communicate state. No extra wrappers that exist only to satisfy a mental model.\n\n### 0.3 Research Before Rendering\n\nThe first question is always: what problem does this solve for the person looking at the screen? Not what looks good in isolation. A pricing table reduces friction in a purchase decision. A dashboard surfaces the one number a person needs to act on. If the purpose isn't clear, the block isn't clear.\n\n### 0.4 Standing on Foundations\n\nshadcn/ui's `Table`, `Card`, `Button`, `Badge`, `Dialog` are well-designed, accessible, and maintained. Do not rebuild them. Do not wrap them unnecessarily. The Creative Tim contribution is the **composition** — how primitives are assembled into something useful for real work.\n\n### 0.5 Real Use, Not Demo Use\n\nThe standard is: would a real team ship this to solve a real problem? Avoid visual complexity that doesn't carry information. A status badge that turns red when something is wrong is communication. A gradient that doesn't indicate anything is decoration. Only the first belongs.\n\nFull detail with code examples: `rules/brand-philosophy.md`\n\n---\n\n---\n\n## 1. Installing Blocks\n\n### 1.1 Creative Tim CLI\n\nThe preferred method. Installs the block and all shadcn/ui primitive dependencies automatically.\n\n```bash\n# Initialize project (auto-detects Next.js / Vite / Remix / Astro)\nnpx @creative-tim/ui@latest init\n\n# Add a block\nnpx @creative-tim/ui@latest add \n```\n\n**Package:** `@creative-tim/ui` (v0.4.x+)\n**Binaries:** `creative-tim-ui`, `creative-tim` (aliases for the same CLI)\n\n```bash\n# All of these are equivalent:\nnpx @creative-tim/ui@latest add hero-01\nnpx creative-tim-ui add hero-01\nnpx creative-tim add hero-01\n```\n\n**Examples:**\n```bash\nnpx @creative-tim/ui@latest add hero-01\nnpx @creative-tim/ui@latest add ai-agent-activity-01\nnpx @creative-tim/ui@latest add agent-management-list-01\nnpx @creative-tim/ui@latest add pricing-01\n```\n\nThe CLI copies the component into `components/ui/` (or your configured components directory) and runs `npx shadcn@latest add` for each dependency.\n\n### 1.2 shadcn CLI (Full URL)\n\nUse this when you prefer the shadcn workflow or when integrating with shadcn's registry tooling.\n\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/.json\n```\n\n**Examples:**\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/testimonials-03.json\n```\n\n### 1.3 Block Discovery\n\nBrowse all blocks:\n- Website: https://www.creative-tim.com/ui\n- AI index: https://www.creative-tim.com/ui/llms.txt (grouped by category, machine-readable)\n\nIndividual block JSON (for programmatic access):\n```\nhttps://www.creative-tim.com/ui/r/.json\n```\n\n---\n\n## 2. PRO Blocks & API Key\n\nPRO blocks require a `Creative-Tim-Api-Key` header when fetching the block JSON. Obtain a key at https://www.creative-tim.com/ui.\n\n### 2.1 Environment Setup\n\n```bash\n# .env.local (never commit this)\nCREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx\n```\n\n### 2.2 CLI Install with Key\n\n```bash\nnpx @creative-tim/ui@latest add --api-key $CREATIVE_TIM_UI_API_KEY\n```\n\n### 2.3 Global Login (persists across sessions)\n\n```bash\nnpx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx\n```\n\nAfter login, all `add` commands automatically include the key — no `--api-key` flag needed.\n\n### 2.4 Detecting PRO Blocks\n\nPRO blocks are marked on the website. In the registry JSON they include `\"pro\": true`. Free-tier blocks have no `pro` field.\n\n---\n\n## 3. Brand Identity\n\n### 3.1 Primary Accent — Orange\n\n**Rule:** Use `orange` as the primary brand accent for interactive elements, icons, CTAs, and highlights.\n\n```tsx\n// CORRECT — orange accent\n
\n \n
\nJD\nOpenClaw\n```\n\n```tsx\n// WRONG — violet/purple signals AI-generated defaults, not Creative Tim\n
...
\n...\n```\n\n**Why:** Purple/violet is the default accent in many AI coding tools. Any block using it looks auto-generated and inconsistent with the library.\n\n### 3.2 Status Colors\n\n| State | Color |\n|-------|-------|\n| Active / Success | `emerald` |\n| Warning / Pending | `amber` |\n| Error / Stopped | `red` |\n| Info / In-Progress | `blue` |\n| Neutral / Inactive | `slate` |\n\n### 3.3 Surface Colors\n\n- Card backgrounds: `bg-background` (default card) or `bg-muted/30` (subtle areas like sidebars)\n- Borders: use `border` (theme token) — never hardcode `border-gray-200`\n- Text hierarchy: `text-foreground` (primary), `text-muted-foreground` (secondary)\n\n---\n\n## 4. Typography Rules\n\n### 4.1 `text-sm` for Readable Content\n\n**Rule:** Use `text-sm` for all body text that users need to read.\n\n```tsx\n// CORRECT\n{agent.name}\n

{description}

\n{agent.lastActive}\n```\n\n```tsx\n// WRONG — text-xs for readable body content is too small\n{agent.name}\n

{description}

\n```\n\n### 4.2 `text-xs` Only for Tiny/Supplementary Elements\n\n`text-xs` is acceptable for:\n- Avatar initials (`AvatarFallback`)\n- `font-mono` timestamps and IDs\n- Badge/pill labels (priority, status)\n- Sidebar group headers (`uppercase tracking-wider`)\n- Action buttons with h-6 or h-7 (`className=\"h-6 px-2 text-xs\"`)\n\n### 4.3 Never Use Arbitrary Font Sizes\n\n```tsx\n// WRONG\n...\n

...

\n
...
\n```\n\n---\n\n## 5. Tailwind v4 Constraints\n\n### 5.1 No Arbitrary Values\n\nTailwind v4 uses a continuous numeric scale. Arbitrary bracket values are not allowed.\n\n```tsx\n// WRONG — arbitrary values\n
\n
\n
\n```\n\n```tsx\n// CORRECT — use the numeric scale\n
// h-96 = 384px, w-72 = 288px\n
// 384px — close enough, or max-w-xs / max-w-md\n
// gap-3.5 = 14px, p-4 = 16px\n```\n\n### 5.2 Numeric Scale Reference\n\n```\nh-6 = 24px h-8 = 32px h-10 = 40px\nh-12 = 48px h-16 = 64px h-20 = 80px\nh-24 = 96px h-32 = 128px h-48 = 192px\nh-64 = 256px h-80 = 320px h-96 = 384px\n\ngap-1 = 4px gap-2 = 8px gap-3 = 12px\ngap-4 = 16px gap-5 = 20px gap-6 = 24px\n\np-2 = 8px p-3 = 12px p-4 = 16px\np-5 = 20px p-6 = 24px\n```\n\n### 5.3 Use Semantic Width Utilities\n\n```tsx\n// CORRECT\n
// 384px\n
// 448px\n
// 512px\n
// 576px\n
// 672px\n
// sidebar = 256px\n
// kanban column = 288px\n```\n\n### 5.4 Responsive Breakpoints Only\n\n```tsx\n// CORRECT\n
\n\n// WRONG — custom media query\n
\n```\n\n---\n\n## 6. Component Patterns\n\n### 6.1 Card Structure\n\nUse `Card > CardHeader + CardContent` for content grouping.\n\n```tsx\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\n\n\n \n Section Title\n \n \n {/* content */}\n \n\n```\n\n### 6.2 KPI / Stat Cards — py-0\n\nKPI cards use `py-0` on CardContent to let the parent padding control vertical rhythm.\n\n```tsx\n// CORRECT\n\n \n

Total Agents

\n

42

\n \n\n\n// WRONG — default py causes too much padding in stat grids\n\n \n```\n\n### 6.3 Sidebar Navigation\n\nStandard sidebar width is `w-64` (256px), with `bg-muted/30 border-r`.\n\n```tsx\n\n```\n\n### 6.4 ScrollArea for Overflow\n\nAny list that may overflow its container must use `ScrollArea`.\n\n```tsx\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\n\n\n
\n {items.map((item) => )}\n
\n\n```\n\n### 6.5 Badge Variants\n\n```tsx\n// Status badge (with dot)\n
\n \n Active\n
\n\n// Type badge\n\n OpenClaw\n\n```\n\n### 6.6 Avoid Inline Styles\n\n```tsx\n// WRONG\n
\n\n// CORRECT\n
\n```\n\n---\n\n## 7. Hydration Safety\n\n### 7.1 Never Use Date in useState Initializer\n\n`new Date()`, `Date.now()`, and `toLocaleTimeString()` return different values on the server vs. the client, causing React hydration errors.\n\n```tsx\n// WRONG — causes \"Hydration failed\" error\nconst [events, setEvents] = useState(() => [\n { id: \"1\", timestamp: new Date().toLocaleTimeString() },\n])\n\n// WRONG — locale-dependent\nconst [time, setTime] = useState(new Date().toLocaleTimeString())\n```\n\n```tsx\n// CORRECT — static strings for initial SSR state\nconst INITIAL_TIMESTAMPS = [\"10:30:00\", \"10:30:04\", \"10:30:08\"]\n\nconst [events, setEvents] = useState(() =>\n INITIAL_DATA.slice(0, 3).map((e, i) => ({\n ...e,\n id: `init-${i}`,\n timestamp: INITIAL_TIMESTAMPS[i],\n }))\n)\n\n// Live timestamps only inside useEffect / setInterval (client-only)\nfunction nowTimeString() {\n const d = new Date()\n return [d.getHours(), d.getMinutes(), d.getSeconds()]\n .map((n) => String(n).padStart(2, \"0\"))\n .join(\":\")\n}\n\nuseEffect(() => {\n const interval = setInterval(() => {\n setEvents((prev) => [\n ...prev,\n { id: `evt-${Date.now()}`, timestamp: nowTimeString(), ... }\n ])\n }, 2000)\n return () => clearInterval(interval)\n}, [])\n```\n\n### 7.2 suppressHydrationWarning for Intentional Mismatches\n\nIf a mismatch is truly intentional (e.g. a live clock that intentionally differs):\n```tsx\n\n```\n\n---\n\n## 8. Block Authoring Guide\n\n### 8.1 File Structure\n\nEvery block consists of two files:\n1. `registry/creative-tim/blocks/.tsx` — the component\n2. `registry/creative-tim/blocks//page.tsx` — the page wrapper\n\nThe page wrapper simply renders the block:\n```tsx\nimport BlockName from \"@/registry/creative-tim/blocks/\"\nexport default function Page() {\n return \n}\n```\n\n### 8.2 Registry Entry\n\nAdd to `registry/registry-blocks.ts`:\n```ts\n{\n name: \"my-block-01\",\n type: \"registry:block\",\n categories: [\"my-category\"],\n meta: {\n isFree: true,\n label: \"My Block\",\n createdAt: \"2026-03-14\",\n },\n registryDependencies: [\"button\", \"card\", \"badge\"], // SHORT NAMES ONLY\n files: [\n {\n path: \"registry/creative-tim/blocks/my-block-01.tsx\",\n type: \"registry:component\",\n },\n {\n path: \"registry/creative-tim/blocks/my-block-01/page.tsx\",\n type: \"registry:page\",\n target: \"app/blocks/my-block-01/page.tsx\",\n },\n ],\n}\n```\n\n**IMPORTANT:** `registryDependencies` must use **short names** (`\"button\"`, `\"card\"`, `\"badge\"`) — never full URLs.\n\n### 8.3 After Adding Blocks\n\nRebuild the registry:\n```bash\npnpm --filter www registry:build\n```\n\nThis regenerates `public/r/*.json`, `__index__.tsx`, and `__blocks__.json` (which powers `llms.txt`).\n\n### 8.4 Import Paths in Blocks\n\nUse the registry alias, not relative paths:\n```tsx\nimport { Button } from \"@/registry/creative-tim/ui/button\"\nimport { Card, CardContent } from \"@/registry/creative-tim/ui/card\"\n```\n\n### 8.5 Block Checklist\n\nBefore submitting a new block:\n- [ ] No `violet` or `purple` colors — use `orange` for brand accent\n- [ ] All readable text uses `text-sm` minimum\n- [ ] No arbitrary Tailwind values (`[10px]`, `[85%]`, etc.)\n- [ ] KPI/stat `CardContent` uses `px-4 py-0`\n- [ ] No `new Date()` in `useState` initializers\n- [ ] No inline `style={{}}` attributes\n- [ ] `registryDependencies` uses short names\n- [ ] `registry:build` completes without errors\n","skills/creative-tim-ui/rules/component-patterns.md":"# Component Patterns\n\n## Card Structure\n\nStandard grouping pattern: `Card > CardHeader + CardContent`.\n\n```tsx\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\n\n\n \n Section Title\n \n \n {/* content */}\n \n\n```\n\n## KPI / Stat Cards — Use py-0\n\nStat grid cards use `py-0` so vertical rhythm is controlled by the parent grid, not the card itself.\n\n```tsx\n// CORRECT\n\n \n
\n

Active Agents

\n

4

\n \n\n\n// WRONG — default py-6 causes excessive padding in stat grids\n\n \n```\n\n## Sidebar Navigation\n\nWidth: `w-64` (256px). Background: `bg-muted/30`. Right border: `border-r`.\n\n```tsx\n\n```\n\n## ScrollArea for Overflow\n\nAny list that can overflow must use `ScrollArea` (not `overflow-y-auto` directly).\n\n```tsx\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\n\n\n
\n {items.map((item) => )}\n
\n\n```\n\n## Status Badge with Dot\n\n```tsx\n
\n \n Active\n
\n```\n\n## Avatar Fallback Colors\n\nUse orange tones for user/agent avatars:\n```tsx\n\n JD\n\n```\n\n## Action Buttons in Tables\n\nSmall ghost buttons for row actions:\n```tsx\n\n```\n","skills/creative-tim-ui/rules/pro-api-key.md":"# PRO Blocks & API Key Setup\n\n## Summary\n\nPRO blocks require a Creative Tim API key. Get yours at https://www.creative-tim.com/ui/dashboard → **API Keys** section.\n\nAPI key format: `pk_live_` prefix (e.g. `pk_live_a09e7677...`)\n\n## Authentication Methods\n\n### Method 1 — Environment Variable (recommended for development)\n\n```bash\n# macOS/Linux\nexport CREATIVE_TIM_UI_API_KEY=pk_live_your_key\n\n# Inline (one-off)\nCREATIVE_TIM_UI_API_KEY=pk_live_your_key npx @creative-tim/ui@latest add \n\n# .env.local (Next.js / Vite) — never commit this file\nCREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx\n```\n\nThen install normally — the CLI picks up the env var automatically:\n```bash\nnpx @creative-tim/ui@latest add \n```\n\nOr pass it explicitly:\n```bash\nnpx @creative-tim/ui@latest add --api-key $CREATIVE_TIM_UI_API_KEY\n```\n\n### Method 2 — components.json (recommended for teams / CI/CD)\n\nAdd a `registries` entry to `components.json`:\n\n```json\n{\n \"registries\": {\n \"@creative-tim\": {\n \"url\": \"https://www.creative-tim.com/ui/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${CREATIVE_TIM_UI_API_KEY}\"\n }\n }\n }\n}\n```\n\nTeam members each set `CREATIVE_TIM_UI_API_KEY` in their own shell / CI secrets.\n\n### Method 3 — shadcn CLI\n\nThe same `components.json` config above works with the shadcn CLI:\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/.json\n```\n\n## Detecting PRO Blocks\n\nPRO blocks are marked on the website. In registry JSON they include `\"pro\": true`.\n","skills/creative-tim-ui/rules/tailwind-rules.md":"# Tailwind v4 Rules\n\n## No Arbitrary Values\n\nThe project uses Tailwind v4 with a continuous numeric scale. Never use bracket arbitrary values.\n\n### Wrong\n\n```tsx\n
\n
\n
\n```\n\n### Correct\n\n```tsx\n
// h-96=384px, w-72=288px\n
// gap-3.5=14px, p-4=16px\n
\n```\n\n## Numeric Scale Reference\n\n### Height / Width\n```\nh-4 = 16px h-5 = 20px h-6 = 24px h-7 = 28px\nh-8 = 32px h-9 = 36px h-10 = 40px h-11 = 44px\nh-12 = 48px h-14 = 56px h-16 = 64px h-20 = 80px\nh-24 = 96px h-32 = 128px h-40 = 160px h-48 = 192px\nh-56 = 224px h-64 = 256px h-72 = 288px h-80 = 320px\nh-96 = 384px\n```\n\n### Spacing (gap / padding / margin)\n```\n0.5=2px 1=4px 1.5=6px 2=8px 2.5=10px 3=12px 3.5=14px\n4=16px 5=20px 6=24px 7=28px 8=32px 9=36px 10=40px\n12=48px 14=56px 16=64px\n```\n\n### Max Width Semantic Utilities\n```\nmax-w-xs = 320px max-w-sm = 384px\nmax-w-md = 448px max-w-lg = 512px\nmax-w-xl = 576px max-w-2xl = 672px\nmax-w-3xl = 768px max-w-4xl = 896px\nmax-w-5xl = 1024px max-w-6xl = 1152px\nmax-w-7xl = 1280px\n```\n\n## Typography Scale\n\n```\ntext-xs = 12px (avatar initials, badge pills, mono timestamps, tiny buttons)\ntext-sm = 14px (body text, table cells, descriptions — DEFAULT)\ntext-base = 16px (larger body, card titles)\ntext-lg = 18px (section headings)\ntext-xl = 20px (page headings)\ntext-2xl = 24px (stat values, hero text)\n```\n\n**Rule:** `text-sm` is the minimum for readable content. Use `text-xs` only for tiny decorative elements.\n\n## Responsive Breakpoints\n\nUse only standard Tailwind breakpoints:\n```\nsm: 640px md: 768px lg: 1024px xl: 1280px 2xl: 1536px\n```\n\nNever use custom media query syntax.\n","skills/creative-tim-ui/rules/hydration-safety.md":"# Hydration Safety Rules\n\n## Never Use Date in useState Initializer\n\n`new Date()`, `Date.now()`, and `toLocaleTimeString()` produce different values on the server vs. the client, causing React to throw a hydration mismatch error.\n\n### Wrong\n\n```tsx\n// Hydration error: server timestamp != client timestamp\nconst [events, setEvents] = useState(() => [\n { id: \"1\", timestamp: new Date().toLocaleTimeString() },\n])\n\nconst [time, setTime] = useState(new Date().toLocaleTimeString())\n\nconst [id, setId] = useState(() => Date.now().toString())\n```\n\n### Correct\n\nUse static/hardcoded strings for SSR-safe initial state. Move live values inside `useEffect` or `setInterval`.\n\n```tsx\n// Static initial timestamps — identical on server and client\nconst INITIAL_TIMESTAMPS = [\"10:30:00\", \"10:30:04\", \"10:30:08\"]\n\nconst [events, setEvents] = useState(() =>\n SEED_DATA.slice(0, 3).map((item, i) => ({\n ...item,\n id: `init-${i}`,\n timestamp: INITIAL_TIMESTAMPS[i],\n }))\n)\n\n// Pure function, safe to call client-side only\nfunction nowTimeString() {\n const d = new Date()\n return [d.getHours(), d.getMinutes(), d.getSeconds()]\n .map((n) => String(n).padStart(2, \"0\"))\n .join(\":\")\n}\n\n// Live updates only in useEffect (never runs on server)\nuseEffect(() => {\n const interval = setInterval(() => {\n setEvents((prev) => [\n ...prev.slice(-49),\n {\n id: `evt-${Date.now()}`,\n timestamp: nowTimeString(),\n // ...rest of event\n },\n ])\n }, 2000)\n return () => clearInterval(interval)\n}, [])\n```\n\n## Locale-Dependent Formatting\n\n`toLocaleString()`, `toLocaleDateString()`, `toLocaleTimeString()` are locale-dependent — the server locale may differ from the browser locale.\n\n```tsx\n// WRONG — locale mismatch\n{new Date(item.createdAt).toLocaleTimeString()}\n\n// CORRECT — use fixed format string or static value\n{item.createdAt} // pre-formatted string, e.g. \"2 hours ago\"\n```\n\n## suppressHydrationWarning\n\nOnly use `suppressHydrationWarning` when the mismatch is **intentional** (e.g. a live clock that is always slightly different):\n\n```tsx\n\n```\n\nDo not use it to silence bugs — fix the root cause instead.\n","skills/creative-tim-ui/rules/design-brand.md":"# Brand & Design Identity Rules\n\n## Primary Accent — Orange\n\nCreative Tim's brand color is **orange**. Always use orange for primary accents, interactive elements, CTAs, and logo marks.\n\n### Correct\n\n```tsx\n// Logo / app icon\n
\n \n
\n\n// Avatar fallback\nJD\n\n// Type badge\nOpenClaw\n\n// Active nav item accent\n\n```\n\n### Wrong\n\n```tsx\n// DO NOT use violet or purple — signals AI-generated defaults\n
\n\n\n```\n\n**Why:** Purple/violet is the default accent in many AI coding tools. Blocks using these colors look auto-generated and break visual consistency with the Creative Tim brand.\n\n## Status Color System\n\n| State | Tailwind Color |\n|-------|---------------|\n| Active / Success | `emerald` |\n| Warning / In-Review / Paused | `amber` |\n| Error / Stopped / Critical | `red` |\n| Info / In-Progress | `blue` |\n| Neutral / Backlog | `slate` |\n\n## Surface & Border Conventions\n\n- **Sidebar / subtle backgrounds:** `bg-muted/30`\n- **Card backgrounds:** default `bg-background` (Card component handles this)\n- **Borders:** use `border` theme token — never `border-gray-200` or hardcoded colors\n- **Text:** `text-foreground` (primary), `text-muted-foreground` (secondary/captions)\n\n## Do Not Use Inline Styles\n\n```tsx\n// WRONG\n
\n\n// CORRECT\n
\n```\n"},"items":[{"name":"AGENTS.md","path":"skills/creative-tim-ui/AGENTS.md","rawUrl":"https://raw.githubusercontent.com/creativetimofficial/ui/HEAD/skills/creative-tim-ui/AGENTS.md","title":"Creative-tim-ui Skill","category":"anthropic-skill","format":"markdown","content":"# Creative Tim UI — Design & Usage Guide\n\n**Version 1.0.0**\nCreative Tim\nMarch 2026\n\n> **Note:**\n> This document is primarily for AI agents and LLMs generating, reviewing, or modifying\n> UI code that uses the Creative Tim UI block library. Guidance is optimised for\n> automation and consistency. Humans may also find it useful as a reference.\n\n---\n\n## Abstract\n\nCreative Tim UI is a block library of 390+ React + Tailwind CSS components built on shadcn/ui.\nThis guide covers the design philosophy behind every block, installation patterns, brand identity\nrules, Tailwind v4 constraints, and component conventions so AI-generated code stays consistent\nwith the library — not just visually, but in the decisions it makes.\n\n---\n\n## Table of Contents\n\n0. [Design Philosophy](#0-design-philosophy)\n1. [Installing Blocks](#1-installing-blocks)\n2. [PRO Blocks & API Key](#2-pro-blocks--api-key)\n3. [Brand Identity](#3-brand-identity)\n4. [Typography Rules](#4-typography-rules)\n5. [Tailwind v4 Constraints](#5-tailwind-v4-constraints)\n6. [Component Patterns](#6-component-patterns)\n7. [Hydration Safety](#7-hydration-safety)\n8. [Block Authoring Guide](#8-block-authoring-guide)\n\n---\n\n## 0. Design Philosophy\n\nAcross 300+ products and categories, Creative Tim has applied the same discipline: identify what developers actually need, build that exceptionally well, and cut everything else.\n\nThat discipline — research first, build only what's necessary, remove rather than add — is the foundation of every block in this library.\n\n**The five principles:**\n\n### 0.1 The 95% Rule\n\nBuild the common case exceptionally well. Do not reach for complex solutions to simple problems. A developer dropping in a block should not unwrap three layers of abstraction to change a label.\n\n### 0.2 The \"Light\" Principle\n\nA block is done not when there's nothing left to add, but when there's nothing left to remove. No feature flags for things that can be changed in code. No helper components used only once. No animations on elements that don't need to communicate state. No extra wrappers that exist only to satisfy a mental model.\n\n### 0.3 Research Before Rendering\n\nThe first question is always: what problem does this solve for the person looking at the screen? Not what looks good in isolation. A pricing table reduces friction in a purchase decision. A dashboard surfaces the one number a person needs to act on. If the purpose isn't clear, the block isn't clear.\n\n### 0.4 Standing on Foundations\n\nshadcn/ui's `Table`, `Card`, `Button`, `Badge`, `Dialog` are well-designed, accessible, and maintained. Do not rebuild them. Do not wrap them unnecessarily. The Creative Tim contribution is the **composition** — how primitives are assembled into something useful for real work.\n\n### 0.5 Real Use, Not Demo Use\n\nThe standard is: would a real team ship this to solve a real problem? Avoid visual complexity that doesn't carry information. A status badge that turns red when something is wrong is communication. A gradient that doesn't indicate anything is decoration. Only the first belongs.\n\nFull detail with code examples: `rules/brand-philosophy.md`\n\n---\n\n---\n\n## 1. Installing Blocks\n\n### 1.1 Creative Tim CLI\n\nThe preferred method. Installs the block and all shadcn/ui primitive dependencies automatically.\n\n```bash\n# Initialize project (auto-detects Next.js / Vite / Remix / Astro)\nnpx @creative-tim/ui@latest init\n\n# Add a block\nnpx @creative-tim/ui@latest add \n```\n\n**Package:** `@creative-tim/ui` (v0.4.x+)\n**Binaries:** `creative-tim-ui`, `creative-tim` (aliases for the same CLI)\n\n```bash\n# All of these are equivalent:\nnpx @creative-tim/ui@latest add hero-01\nnpx creative-tim-ui add hero-01\nnpx creative-tim add hero-01\n```\n\n**Examples:**\n```bash\nnpx @creative-tim/ui@latest add hero-01\nnpx @creative-tim/ui@latest add ai-agent-activity-01\nnpx @creative-tim/ui@latest add agent-management-list-01\nnpx @creative-tim/ui@latest add pricing-01\n```\n\nThe CLI copies the component into `components/ui/` (or your configured components directory) and runs `npx shadcn@latest add` for each dependency.\n\n### 1.2 shadcn CLI (Full URL)\n\nUse this when you prefer the shadcn workflow or when integrating with shadcn's registry tooling.\n\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/.json\n```\n\n**Examples:**\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/testimonials-03.json\n```\n\n### 1.3 Block Discovery\n\nBrowse all blocks:\n- Website: https://www.creative-tim.com/ui\n- AI index: https://www.creative-tim.com/ui/llms.txt (grouped by category, machine-readable)\n\nIndividual block JSON (for programmatic access):\n```\nhttps://www.creative-tim.com/ui/r/.json\n```\n\n---\n\n## 2. PRO Blocks & API Key\n\nPRO blocks require a `Creative-Tim-Api-Key` header when fetching the block JSON. Obtain a key at https://www.creative-tim.com/ui.\n\n### 2.1 Environment Setup\n\n```bash\n# .env.local (never commit this)\nCREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx\n```\n\n### 2.2 CLI Install with Key\n\n```bash\nnpx @creative-tim/ui@latest add --api-key $CREATIVE_TIM_UI_API_KEY\n```\n\n### 2.3 Global Login (persists across sessions)\n\n```bash\nnpx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx\n```\n\nAfter login, all `add` commands automatically include the key — no `--api-key` flag needed.\n\n### 2.4 Detecting PRO Blocks\n\nPRO blocks are marked on the website. In the registry JSON they include `\"pro\": true`. Free-tier blocks have no `pro` field.\n\n---\n\n## 3. Brand Identity\n\n### 3.1 Primary Accent — Orange\n\n**Rule:** Use `orange` as the primary brand accent for interactive elements, icons, CTAs, and highlights.\n\n```tsx\n// CORRECT — orange accent\n
\n \n
\nJD\nOpenClaw\n```\n\n```tsx\n// WRONG — violet/purple signals AI-generated defaults, not Creative Tim\n
...
\n...\n```\n\n**Why:** Purple/violet is the default accent in many AI coding tools. Any block using it looks auto-generated and inconsistent with the library.\n\n### 3.2 Status Colors\n\n| State | Color |\n|-------|-------|\n| Active / Success | `emerald` |\n| Warning / Pending | `amber` |\n| Error / Stopped | `red` |\n| Info / In-Progress | `blue` |\n| Neutral / Inactive | `slate` |\n\n### 3.3 Surface Colors\n\n- Card backgrounds: `bg-background` (default card) or `bg-muted/30` (subtle areas like sidebars)\n- Borders: use `border` (theme token) — never hardcode `border-gray-200`\n- Text hierarchy: `text-foreground` (primary), `text-muted-foreground` (secondary)\n\n---\n\n## 4. Typography Rules\n\n### 4.1 `text-sm` for Readable Content\n\n**Rule:** Use `text-sm` for all body text that users need to read.\n\n```tsx\n// CORRECT\n{agent.name}\n

{description}

\n{agent.lastActive}\n```\n\n```tsx\n// WRONG — text-xs for readable body content is too small\n{agent.name}\n

{description}

\n```\n\n### 4.2 `text-xs` Only for Tiny/Supplementary Elements\n\n`text-xs` is acceptable for:\n- Avatar initials (`AvatarFallback`)\n- `font-mono` timestamps and IDs\n- Badge/pill labels (priority, status)\n- Sidebar group headers (`uppercase tracking-wider`)\n- Action buttons with h-6 or h-7 (`className=\"h-6 px-2 text-xs\"`)\n\n### 4.3 Never Use Arbitrary Font Sizes\n\n```tsx\n// WRONG\n...\n

...

\n
...
\n```\n\n---\n\n## 5. Tailwind v4 Constraints\n\n### 5.1 No Arbitrary Values\n\nTailwind v4 uses a continuous numeric scale. Arbitrary bracket values are not allowed.\n\n```tsx\n// WRONG — arbitrary values\n
\n
\n
\n```\n\n```tsx\n// CORRECT — use the numeric scale\n
// h-96 = 384px, w-72 = 288px\n
// 384px — close enough, or max-w-xs / max-w-md\n
// gap-3.5 = 14px, p-4 = 16px\n```\n\n### 5.2 Numeric Scale Reference\n\n```\nh-6 = 24px h-8 = 32px h-10 = 40px\nh-12 = 48px h-16 = 64px h-20 = 80px\nh-24 = 96px h-32 = 128px h-48 = 192px\nh-64 = 256px h-80 = 320px h-96 = 384px\n\ngap-1 = 4px gap-2 = 8px gap-3 = 12px\ngap-4 = 16px gap-5 = 20px gap-6 = 24px\n\np-2 = 8px p-3 = 12px p-4 = 16px\np-5 = 20px p-6 = 24px\n```\n\n### 5.3 Use Semantic Width Utilities\n\n```tsx\n// CORRECT\n
// 384px\n
// 448px\n
// 512px\n
// 576px\n
// 672px\n
// sidebar = 256px\n
// kanban column = 288px\n```\n\n### 5.4 Responsive Breakpoints Only\n\n```tsx\n// CORRECT\n
\n\n// WRONG — custom media query\n
\n```\n\n---\n\n## 6. Component Patterns\n\n### 6.1 Card Structure\n\nUse `Card > CardHeader + CardContent` for content grouping.\n\n```tsx\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\n\n\n \n Section Title\n \n \n {/* content */}\n \n\n```\n\n### 6.2 KPI / Stat Cards — py-0\n\nKPI cards use `py-0` on CardContent to let the parent padding control vertical rhythm.\n\n```tsx\n// CORRECT\n\n \n

Total Agents

\n

42

\n \n\n\n// WRONG — default py causes too much padding in stat grids\n\n \n```\n\n### 6.3 Sidebar Navigation\n\nStandard sidebar width is `w-64` (256px), with `bg-muted/30 border-r`.\n\n```tsx\n\n```\n\n### 6.4 ScrollArea for Overflow\n\nAny list that may overflow its container must use `ScrollArea`.\n\n```tsx\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\n\n\n
\n {items.map((item) => )}\n
\n\n```\n\n### 6.5 Badge Variants\n\n```tsx\n// Status badge (with dot)\n
\n \n Active\n
\n\n// Type badge\n\n OpenClaw\n\n```\n\n### 6.6 Avoid Inline Styles\n\n```tsx\n// WRONG\n
\n\n// CORRECT\n
\n```\n\n---\n\n## 7. Hydration Safety\n\n### 7.1 Never Use Date in useState Initializer\n\n`new Date()`, `Date.now()`, and `toLocaleTimeString()` return different values on the server vs. the client, causing React hydration errors.\n\n```tsx\n// WRONG — causes \"Hydration failed\" error\nconst [events, setEvents] = useState(() => [\n { id: \"1\", timestamp: new Date().toLocaleTimeString() },\n])\n\n// WRONG — locale-dependent\nconst [time, setTime] = useState(new Date().toLocaleTimeString())\n```\n\n```tsx\n// CORRECT — static strings for initial SSR state\nconst INITIAL_TIMESTAMPS = [\"10:30:00\", \"10:30:04\", \"10:30:08\"]\n\nconst [events, setEvents] = useState(() =>\n INITIAL_DATA.slice(0, 3).map((e, i) => ({\n ...e,\n id: `init-${i}`,\n timestamp: INITIAL_TIMESTAMPS[i],\n }))\n)\n\n// Live timestamps only inside useEffect / setInterval (client-only)\nfunction nowTimeString() {\n const d = new Date()\n return [d.getHours(), d.getMinutes(), d.getSeconds()]\n .map((n) => String(n).padStart(2, \"0\"))\n .join(\":\")\n}\n\nuseEffect(() => {\n const interval = setInterval(() => {\n setEvents((prev) => [\n ...prev,\n { id: `evt-${Date.now()}`, timestamp: nowTimeString(), ... }\n ])\n }, 2000)\n return () => clearInterval(interval)\n}, [])\n```\n\n### 7.2 suppressHydrationWarning for Intentional Mismatches\n\nIf a mismatch is truly intentional (e.g. a live clock that intentionally differs):\n```tsx\n\n```\n\n---\n\n## 8. Block Authoring Guide\n\n### 8.1 File Structure\n\nEvery block consists of two files:\n1. `registry/creative-tim/blocks/.tsx` — the component\n2. `registry/creative-tim/blocks//page.tsx` — the page wrapper\n\nThe page wrapper simply renders the block:\n```tsx\nimport BlockName from \"@/registry/creative-tim/blocks/\"\nexport default function Page() {\n return \n}\n```\n\n### 8.2 Registry Entry\n\nAdd to `registry/registry-blocks.ts`:\n```ts\n{\n name: \"my-block-01\",\n type: \"registry:block\",\n categories: [\"my-category\"],\n meta: {\n isFree: true,\n label: \"My Block\",\n createdAt: \"2026-03-14\",\n },\n registryDependencies: [\"button\", \"card\", \"badge\"], // SHORT NAMES ONLY\n files: [\n {\n path: \"registry/creative-tim/blocks/my-block-01.tsx\",\n type: \"registry:component\",\n },\n {\n path: \"registry/creative-tim/blocks/my-block-01/page.tsx\",\n type: \"registry:page\",\n target: \"app/blocks/my-block-01/page.tsx\",\n },\n ],\n}\n```\n\n**IMPORTANT:** `registryDependencies` must use **short names** (`\"button\"`, `\"card\"`, `\"badge\"`) — never full URLs.\n\n### 8.3 After Adding Blocks\n\nRebuild the registry:\n```bash\npnpm --filter www registry:build\n```\n\nThis regenerates `public/r/*.json`, `__index__.tsx`, and `__blocks__.json` (which powers `llms.txt`).\n\n### 8.4 Import Paths in Blocks\n\nUse the registry alias, not relative paths:\n```tsx\nimport { Button } from \"@/registry/creative-tim/ui/button\"\nimport { Card, CardContent } from \"@/registry/creative-tim/ui/card\"\n```\n\n### 8.5 Block Checklist\n\nBefore submitting a new block:\n- [ ] No `violet` or `purple` colors — use `orange` for brand accent\n- [ ] All readable text uses `text-sm` minimum\n- [ ] No arbitrary Tailwind values (`[10px]`, `[85%]`, etc.)\n- [ ] KPI/stat `CardContent` uses `px-4 py-0`\n- [ ] No `new Date()` in `useState` initializers\n- [ ] No inline `style={{}}` attributes\n- [ ] `registryDependencies` uses short names\n- [ ] `registry:build` completes without errors\n","isInternal":false,"tokens":4344,"sizeBytes":15593},{"name":"brand-philosophy.md","path":"skills/creative-tim-ui/rules/brand-philosophy.md","rawUrl":"https://raw.githubusercontent.com/creativetimofficial/ui/HEAD/skills/creative-tim-ui/rules/brand-philosophy.md","title":"Rules Skill","category":"anthropic-skill","format":"markdown","content":"# Creative Tim Design Philosophy\n\nThis is not a style guide. It's the thinking behind every decision — what to build, what to cut, and why.\n\nOver a decade, Creative Tim has shipped 300+ open source UI dashboards, templates, and tools used by 2.8 million developers worldwide. That scale of use across that many products leaves no room for guesswork. Every principle here has been tested against real projects, real teams, and real feedback — not theory.\n\n---\n\n## The 95% Rule — Solve the Common Case Exceptionally Well\n\nEvery product Creative Tim ships starts with the same question: what do developers actually need? The answer, across hundreds of products and categories, is consistently the same core set of elements — buttons, tables, cards, sidebars, charts, forms, modals, notifications.\n\nThat's the 95%. The remaining 5% is Kanban boards, drag-and-drop, custom file uploaders, timeline components, WYSIWYG editors — powerful, but rare.\n\n**The rule:** build the 95% so well that no one feels the lack of the 5%.\n\nFor agents generating code: do not reach for complex solutions to solve simple problems. A developer looking at a block should not find themselves unwrapping three layers of abstraction to change a label. The common case should be obvious, direct, and complete.\n\n```tsx\n// WRONG — solves a hypothetical future problem\n }\n/>\n\n// RIGHT — solves the actual problem in front of you\n\n ...\n \n {items.map((item) => (\n \n {item.name}\n {item.status}\n \n ))}\n \n
\n```\n\n---\n\n## The \"Light\" Principle — A Block Is Done When There Is Nothing Left to Remove\n\nAcross Creative Tim's product line, \"light\" is a recurring word — not because the products lack capability, but because every addition is interrogated. Each plugin, prop, and wrapper adds CSS, JavaScript, and cognitive weight. Most are cut.\n\nThis is the hardest design discipline: not building things you know how to build.\n\n**What it means in practice:**\n\n- No feature flags or configuration props for things that can just be changed in code\n- No helper components that are only used once\n- No animation on elements that don't need to communicate state\n- No extra wrapper `div`s that exist only to satisfy a mental model\n- No icons that repeat information already conveyed by text\n- No empty states, loading states, or error states unless the block actually fetches data\n\nA block should look complete the moment a developer drops it in. Not because it handles every edge case, but because it clearly handles the right ones.\n\n```tsx\n// WRONG — wrapping for the sake of wrapping\n\n \n \n ...\n \n \n\n\n// RIGHT — as flat as the problem allows\n...\n```\n\n---\n\n## Understand the Problem Before Rendering\n\nThe first question is always **what problem does this solve for the person looking at the screen?** Not what looks good in isolation. Not what demonstrates technical capability.\n\nA pricing table exists to reduce friction in a purchase decision. A dashboard exists to surface the one number a person needs to act on. A form exists to collect information with the least possible resistance.\n\nIf the purpose of a block is not clear, the block is not clear.\n\n---\n\n## Standing on Foundations — Never Build What Already Exists Well\n\nCreative Tim's history is building *on top of* the best available foundation rather than beside it. Bootstrap → Material Design → shadcn/ui. Each transition kept what worked and added only what was missing.\n\nThe same applies to individual blocks. shadcn/ui's `Table`, `Card`, `Button`, `Badge`, `Dialog` are well-designed, accessible, and maintained. Do not rebuild them. Do not wrap them unnecessarily. Do not replicate their functionality in custom components.\n\nThe Creative Tim contribution is the **composition** — how these primitives are assembled into something useful for real work. That is where the judgment lives, not in the primitives themselves.\n\n```tsx\n// WRONG — reimplementing what shadcn already solved\nfunction CustomButton({ variant, children }) {\n const styles = variant === 'primary' ? 'bg-orange-500 text-white' : 'bg-gray-100'\n return \n}\n\n// RIGHT — extend the foundation\nimport { Button } from \"@/registry/creative-tim/ui/button\"\n\n```\n\n---\n\n## Real Use, Not Demo Use\n\nThe benchmark for every block is whether a real team would ship it in a production app. Not \"does this look impressive in a screenshot?\" but \"would this hold up under real conditions, used by real people under time pressure?\"\n\n**Concretely:** avoid visual complexity that doesn't carry information. A gradient on a card header that doesn't indicate anything is decoration. A status badge that turns red when something is wrong is communication. Only the second one belongs.\n\n```tsx\n// WRONG — decoration that doesn't communicate\n\n Users\n\n\n// RIGHT — surface that lets the content speak\n\n Users\n\n```\n\n---\n\n## Summary — The Questions to Ask\n\nBefore generating or modifying any block, run through these:\n\n1. **Is this in the 95%?** Does this element appear in most real dashboards/UIs, or is it a rare specialization?\n2. **What can be removed?** If the block works without it, it probably should.\n3. **What is the user trying to do?** Not \"what does this block contain\" but \"what decision does it help someone make?\"\n4. **Am I building on the foundation or beside it?** Use shadcn/ui primitives. Compose, don't reimplement.\n5. **Would this hold up in production?** Not in a demo. In a real app, used by real people under time pressure.\n","isInternal":false,"tokens":1394,"sizeBytes":6305},{"name":"component-patterns.md","path":"skills/creative-tim-ui/rules/component-patterns.md","rawUrl":"https://raw.githubusercontent.com/creativetimofficial/ui/HEAD/skills/creative-tim-ui/rules/component-patterns.md","title":"Rules Skill","category":"anthropic-skill","format":"markdown","content":"# Component Patterns\n\n## Card Structure\n\nStandard grouping pattern: `Card > CardHeader + CardContent`.\n\n```tsx\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\n\n\n \n Section Title\n \n \n {/* content */}\n \n\n```\n\n## KPI / Stat Cards — Use py-0\n\nStat grid cards use `py-0` so vertical rhythm is controlled by the parent grid, not the card itself.\n\n```tsx\n// CORRECT\n\n \n
\n

Active Agents

\n

4

\n \n\n\n// WRONG — default py-6 causes excessive padding in stat grids\n\n \n```\n\n## Sidebar Navigation\n\nWidth: `w-64` (256px). Background: `bg-muted/30`. Right border: `border-r`.\n\n```tsx\n\n```\n\n## ScrollArea for Overflow\n\nAny list that can overflow must use `ScrollArea` (not `overflow-y-auto` directly).\n\n```tsx\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\n\n\n
\n {items.map((item) => )}\n
\n\n```\n\n## Status Badge with Dot\n\n```tsx\n
\n \n Active\n
\n```\n\n## Avatar Fallback Colors\n\nUse orange tones for user/agent avatars:\n```tsx\n\n JD\n\n```\n\n## Action Buttons in Tables\n\nSmall ghost buttons for row actions:\n```tsx\n\n```\n","isInternal":false,"tokens":805,"sizeBytes":2892},{"name":"design-brand.md","path":"skills/creative-tim-ui/rules/design-brand.md","rawUrl":"https://raw.githubusercontent.com/creativetimofficial/ui/HEAD/skills/creative-tim-ui/rules/design-brand.md","title":"Rules Skill","category":"anthropic-skill","format":"markdown","content":"# Brand & Design Identity Rules\n\n## Primary Accent — Orange\n\nCreative Tim's brand color is **orange**. Always use orange for primary accents, interactive elements, CTAs, and logo marks.\n\n### Correct\n\n```tsx\n// Logo / app icon\n
\n \n
\n\n// Avatar fallback\nJD\n\n// Type badge\nOpenClaw\n\n// Active nav item accent\n\n```\n\n### Wrong\n\n```tsx\n// DO NOT use violet or purple — signals AI-generated defaults\n
\n\n\n```\n\n**Why:** Purple/violet is the default accent in many AI coding tools. Blocks using these colors look auto-generated and break visual consistency with the Creative Tim brand.\n\n## Status Color System\n\n| State | Tailwind Color |\n|-------|---------------|\n| Active / Success | `emerald` |\n| Warning / In-Review / Paused | `amber` |\n| Error / Stopped / Critical | `red` |\n| Info / In-Progress | `blue` |\n| Neutral / Backlog | `slate` |\n\n## Surface & Border Conventions\n\n- **Sidebar / subtle backgrounds:** `bg-muted/30`\n- **Card backgrounds:** default `bg-background` (Card component handles this)\n- **Borders:** use `border` theme token — never `border-gray-200` or hardcoded colors\n- **Text:** `text-foreground` (primary), `text-muted-foreground` (secondary/captions)\n\n## Do Not Use Inline Styles\n\n```tsx\n// WRONG\n
\n\n// CORRECT\n
\n```\n","isInternal":false,"tokens":444,"sizeBytes":1733},{"name":"hydration-safety.md","path":"skills/creative-tim-ui/rules/hydration-safety.md","rawUrl":"https://raw.githubusercontent.com/creativetimofficial/ui/HEAD/skills/creative-tim-ui/rules/hydration-safety.md","title":"Rules Skill","category":"anthropic-skill","format":"markdown","content":"# Hydration Safety Rules\n\n## Never Use Date in useState Initializer\n\n`new Date()`, `Date.now()`, and `toLocaleTimeString()` produce different values on the server vs. the client, causing React to throw a hydration mismatch error.\n\n### Wrong\n\n```tsx\n// Hydration error: server timestamp != client timestamp\nconst [events, setEvents] = useState(() => [\n { id: \"1\", timestamp: new Date().toLocaleTimeString() },\n])\n\nconst [time, setTime] = useState(new Date().toLocaleTimeString())\n\nconst [id, setId] = useState(() => Date.now().toString())\n```\n\n### Correct\n\nUse static/hardcoded strings for SSR-safe initial state. Move live values inside `useEffect` or `setInterval`.\n\n```tsx\n// Static initial timestamps — identical on server and client\nconst INITIAL_TIMESTAMPS = [\"10:30:00\", \"10:30:04\", \"10:30:08\"]\n\nconst [events, setEvents] = useState(() =>\n SEED_DATA.slice(0, 3).map((item, i) => ({\n ...item,\n id: `init-${i}`,\n timestamp: INITIAL_TIMESTAMPS[i],\n }))\n)\n\n// Pure function, safe to call client-side only\nfunction nowTimeString() {\n const d = new Date()\n return [d.getHours(), d.getMinutes(), d.getSeconds()]\n .map((n) => String(n).padStart(2, \"0\"))\n .join(\":\")\n}\n\n// Live updates only in useEffect (never runs on server)\nuseEffect(() => {\n const interval = setInterval(() => {\n setEvents((prev) => [\n ...prev.slice(-49),\n {\n id: `evt-${Date.now()}`,\n timestamp: nowTimeString(),\n // ...rest of event\n },\n ])\n }, 2000)\n return () => clearInterval(interval)\n}, [])\n```\n\n## Locale-Dependent Formatting\n\n`toLocaleString()`, `toLocaleDateString()`, `toLocaleTimeString()` are locale-dependent — the server locale may differ from the browser locale.\n\n```tsx\n// WRONG — locale mismatch\n{new Date(item.createdAt).toLocaleTimeString()}\n\n// CORRECT — use fixed format string or static value\n{item.createdAt} // pre-formatted string, e.g. \"2 hours ago\"\n```\n\n## suppressHydrationWarning\n\nOnly use `suppressHydrationWarning` when the mismatch is **intentional** (e.g. a live clock that is always slightly different):\n\n```tsx\n\n```\n\nDo not use it to silence bugs — fix the root cause instead.\n","isInternal":false,"tokens":556,"sizeBytes":2231},{"name":"pro-api-key.md","path":"skills/creative-tim-ui/rules/pro-api-key.md","rawUrl":"https://raw.githubusercontent.com/creativetimofficial/ui/HEAD/skills/creative-tim-ui/rules/pro-api-key.md","title":"Rules Skill","category":"anthropic-skill","format":"markdown","content":"# PRO Blocks & API Key Setup\n\n## Summary\n\nPRO blocks require a Creative Tim API key. Get yours at https://www.creative-tim.com/ui/dashboard → **API Keys** section.\n\nAPI key format: `pk_live_` prefix (e.g. `pk_live_a09e7677...`)\n\n## Authentication Methods\n\n### Method 1 — Environment Variable (recommended for development)\n\n```bash\n# macOS/Linux\nexport CREATIVE_TIM_UI_API_KEY=pk_live_your_key\n\n# Inline (one-off)\nCREATIVE_TIM_UI_API_KEY=pk_live_your_key npx @creative-tim/ui@latest add \n\n# .env.local (Next.js / Vite) — never commit this file\nCREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx\n```\n\nThen install normally — the CLI picks up the env var automatically:\n```bash\nnpx @creative-tim/ui@latest add \n```\n\nOr pass it explicitly:\n```bash\nnpx @creative-tim/ui@latest add --api-key $CREATIVE_TIM_UI_API_KEY\n```\n\n### Method 2 — components.json (recommended for teams / CI/CD)\n\nAdd a `registries` entry to `components.json`:\n\n```json\n{\n \"registries\": {\n \"@creative-tim\": {\n \"url\": \"https://www.creative-tim.com/ui/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${CREATIVE_TIM_UI_API_KEY}\"\n }\n }\n }\n}\n```\n\nTeam members each set `CREATIVE_TIM_UI_API_KEY` in their own shell / CI secrets.\n\n### Method 3 — shadcn CLI\n\nThe same `components.json` config above works with the shadcn CLI:\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/.json\n```\n\n## Detecting PRO Blocks\n\nPRO blocks are marked on the website. In registry JSON they include `\"pro\": true`.\n","isInternal":false,"tokens":425,"sizeBytes":1566},{"name":"tailwind-rules.md","path":"skills/creative-tim-ui/rules/tailwind-rules.md","rawUrl":"https://raw.githubusercontent.com/creativetimofficial/ui/HEAD/skills/creative-tim-ui/rules/tailwind-rules.md","title":"Rules Skill","category":"anthropic-skill","format":"markdown","content":"# Tailwind v4 Rules\n\n## No Arbitrary Values\n\nThe project uses Tailwind v4 with a continuous numeric scale. Never use bracket arbitrary values.\n\n### Wrong\n\n```tsx\n
\n
\n
\n```\n\n### Correct\n\n```tsx\n
// h-96=384px, w-72=288px\n
// gap-3.5=14px, p-4=16px\n
\n```\n\n## Numeric Scale Reference\n\n### Height / Width\n```\nh-4 = 16px h-5 = 20px h-6 = 24px h-7 = 28px\nh-8 = 32px h-9 = 36px h-10 = 40px h-11 = 44px\nh-12 = 48px h-14 = 56px h-16 = 64px h-20 = 80px\nh-24 = 96px h-32 = 128px h-40 = 160px h-48 = 192px\nh-56 = 224px h-64 = 256px h-72 = 288px h-80 = 320px\nh-96 = 384px\n```\n\n### Spacing (gap / padding / margin)\n```\n0.5=2px 1=4px 1.5=6px 2=8px 2.5=10px 3=12px 3.5=14px\n4=16px 5=20px 6=24px 7=28px 8=32px 9=36px 10=40px\n12=48px 14=56px 16=64px\n```\n\n### Max Width Semantic Utilities\n```\nmax-w-xs = 320px max-w-sm = 384px\nmax-w-md = 448px max-w-lg = 512px\nmax-w-xl = 576px max-w-2xl = 672px\nmax-w-3xl = 768px max-w-4xl = 896px\nmax-w-5xl = 1024px max-w-6xl = 1152px\nmax-w-7xl = 1280px\n```\n\n## Typography Scale\n\n```\ntext-xs = 12px (avatar initials, badge pills, mono timestamps, tiny buttons)\ntext-sm = 14px (body text, table cells, descriptions — DEFAULT)\ntext-base = 16px (larger body, card titles)\ntext-lg = 18px (section headings)\ntext-xl = 20px (page headings)\ntext-2xl = 24px (stat values, hero text)\n```\n\n**Rule:** `text-sm` is the minimum for readable content. Use `text-xs` only for tiny decorative elements.\n\n## Responsive Breakpoints\n\nUse only standard Tailwind breakpoints:\n```\nsm: 640px md: 768px lg: 1024px xl: 1280px 2xl: 1536px\n```\n\nNever use custom media query syntax.\n","isInternal":false,"tokens":799,"sizeBytes":1989},{"name":"SKILL.md","path":"skills/creative-tim-ui/SKILL.md","rawUrl":"https://raw.githubusercontent.com/creativetimofficial/ui/HEAD/skills/creative-tim-ui/SKILL.md","title":"creative-tim-ui","category":"anthropic-skill","format":"markdown","content":"---\nname: creative-tim-ui\ndescription: Creative Tim UI block library assistant. Use when adding, generating, or modifying UI blocks/components/pages from creative-tim.com/ui. Covers design philosophy (minimalism, the 95% rule, research-first), block discovery, both CLI install methods, PRO API key setup, and Creative Tim design rules (orange brand, shadcn/ui base, Tailwind v4). Generates blocks that are deliberate and restrained, not maximal.\nlicense: MIT\nmetadata:\n author: creative-tim\n version: \"1.0.0\"\n---\n\n# Creative Tim UI\n\nA comprehensive block library built on top of [shadcn/ui](https://ui.shadcn.com), with 390+ production-ready blocks across 40+ categories. All blocks are React + Tailwind CSS, compatible with Next.js (App Router), Remix, and Vite.\n\nBrowse the full library: **https://www.creative-tim.com/ui**\nAI-readable index: **https://www.creative-tim.com/ui/llms.txt**\n\n## Install This Skill\n\n```bash\n# Install via skills CLI (recommended)\nnpx skills add creativetimofficial/ui\n\n# Install globally (available in all projects)\nnpx skills add creativetimofficial/ui -g\n\n# Or install to a specific agent only\nnpx skills add creativetimofficial/ui --agent claude-code\n```\n\nSkill page: **https://skills.sh/creativetimofficial/ui/creative-tim-ui**\n\n## Design Philosophy\n\nAcross 300+ products and categories, Creative Tim has applied the same discipline: identify what developers actually need, build that exceptionally well, and cut everything else. That restraint is the core of the library.\n\nWhen generating or modifying blocks, follow these principles:\n\n**The 95% Rule** — build the common case exceptionally well. Don't add configuration, abstraction, or flexibility for problems that rarely exist. A developer should be able to read a block and immediately understand what it does.\n\n**The \"Light\" Principle** — a block is finished when there is nothing left to remove, not when there is nothing left to add. Question every wrapper div, every prop, every animation, every icon. If the block works without it, it probably should.\n\n**Research before rendering** — ask what the person looking at this screen is trying to *do*. A dashboard surfaces the number someone needs to act on. A form collects information with the least possible resistance. Design toward the purpose, not toward the surface.\n\n**Build on foundations** — shadcn/ui primitives (`Card`, `Table`, `Button`, `Badge`) are well-designed and maintained. Compose them; don't reimplement them. The Creative Tim contribution is in the composition and the judgment, not in the primitives.\n\n**Real use, not demo use** — the standard is: would a real team ship this in a production app? Avoid visual complexity that doesn't carry information. Communication beats decoration every time.\n\nFull detail with code examples: `rules/brand-philosophy.md`\n\n---\n\n## When to Apply\n\nUse this skill when:\n- Installing or customising a Creative Tim UI block in a project\n- Generating new blocks that should match Creative Tim's design system\n- Reviewing generated UI code for brand/style compliance\n- Setting up PRO API key access for premium blocks\n- Onboarding a new project to use the Creative Tim UI library\n\n## Block Categories\n\n| Category | Slug | Description |\n|----------|------|-------------|\n| AI Agents | `ai-agents` | Chat interfaces, activity feeds, tool use, transcription |\n| Pages | `pages` | Full-page agent management layouts |\n| Account | `account` | Profile, settings, billing management |\n| Authentication | `authentication` | Login, register, 2FA flows |\n| Hero | `hero` | Landing page hero sections |\n| Pricing | `pricing` | Pricing tables and billing plans |\n| Charts | `charts` | Data visualisation |\n| KPI | `kpi` | Metric cards and dashboards |\n| Stats | `stats` | Statistics sections |\n| Tables | `table` | Data tables with sorting/filtering |\n| Ecommerce | `ecommerce` | Product listings, carts, checkout |\n| Blog | `blog` | Article lists, post layouts |\n| Testimonials | `testimonials` | Social proof sections |\n| ... | | [Full list at /ui/llms.txt] |\n\n## Installing Blocks\n\nTwo methods are fully supported — choose whichever fits your setup.\n\n### Option 1 — Creative Tim CLI (recommended)\n\n```bash\nnpx @creative-tim/ui@latest add \n```\n\nInitialize a new project first (auto-detects Next.js / Vite / Remix / Astro):\n```bash\nnpx @creative-tim/ui@latest init\n```\n\nExamples:\n```bash\nnpx @creative-tim/ui@latest add hero-01\nnpx @creative-tim/ui@latest add ai-agent-activity-01\nnpx @creative-tim/ui@latest add agent-management-list-01\n```\n\nThe package also ships named binaries (`creative-tim-ui`, `creative-tim`) — same commands:\n```bash\nnpx creative-tim-ui add hero-01\nnpx creative-tim add hero-01\n```\n\n### Option 2 — shadcn CLI (full URL)\n\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/.json\n```\n\nExample:\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/ai-agent-activity-01.json\n```\n\nBoth methods copy the component source into your project and install all required shadcn/ui primitives (Button, Card, Badge, etc.) automatically.\n\n## PRO Blocks (API Key)\n\nSome blocks are marked **PRO** and require a Creative Tim API key. You can get a free key at **https://www.creative-tim.com/ui**.\n\n### Setup\n\nAdd the key to your environment:\n```bash\n# .env.local\nCREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx\n```\n\nPass the key when using either CLI:\n```bash\n# Creative Tim CLI\nnpx @creative-tim/ui@latest add pro-block-name --api-key $CREATIVE_TIM_UI_API_KEY\n\n# shadcn CLI — set Authorization header via registry config\n```\n\nOr set it globally via the Creative Tim CLI config:\n```bash\nnpx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx\n```\n\nAfter setting the key, PRO blocks install identically to free blocks.\n\n## Design Rules\n\nSee individual rule files for full detail. Quick summary:\n\n### Brand Colors\n- **Primary accent: orange** (`orange-500` / `orange-600`) — Creative Tim's brand color\n- Never use `violet`, `purple`, or `indigo` as accent colors — these signal AI-generated defaults\n- Neutral surfaces: `slate`, `gray`, `zinc`\n- Status: `emerald` (success), `amber` (warning), `red` (error), `blue` (info)\n\n### Typography\n- **`text-sm`** for all readable body content — labels, descriptions, table cells, list items\n- `text-xs` only for: avatar initials, `font-mono` timestamps, badge pills (status/priority), sidebar group headers (uppercase + tracking-wider), tiny h-6/h-7 action buttons\n- Never use `text-[10px]`, `text-[11px]`, or any arbitrary font-size values\n\n### Tailwind v4 — No Arbitrary Values\n- Use the numeric scale for spacing/sizing: `h-8`, `w-12`, `gap-3`, `p-4` — never `h-[32px]`\n- Use standard fractions for widths: `max-w-sm`, `max-w-2xl`, `w-1/2` — never `max-w-[85%]`\n- Responsive breakpoints only: `sm:`, `md:`, `lg:`, `xl:` — never `[@media(min-width:640px)]:`\n\n### Component Patterns\n- Prefer `Card > CardHeader + CardContent` for content grouping\n- KPI / stat cards: `CardContent className=\"px-4 py-0\"` (py-0, not default py-6)\n- Use `ScrollArea` for any list that can overflow\n- Sidebar navigation: 64 (`w-64`), border-r, `bg-muted/30`\n- Avoid inline `style={{}}` — always use Tailwind classes\n\n### Hydration Safety\n- Never use `new Date()`, `Date.now()`, or `toLocaleTimeString()` in `useState` initializers\n- Use static/hardcoded strings for SSR-safe initial state; switch to live values inside `useEffect` / `setInterval`\n\n## Full Design Guide\n\nFor the complete rules with code examples: `AGENTS.md`\n\nIndividual rules:\n```\nrules/install-blocks.md — CLI install walkthrough\nrules/pro-api-key.md — PRO key setup and auth\nrules/design-brand.md — Brand colors and identity\nrules/tailwind-rules.md — Tailwind v4 coding constraints\nrules/component-patterns.md — Preferred component patterns\nrules/hydration-safety.md — SSR/CSR hydration rules\n```\n\n## Deploying This Skill\n\nThis skill lives in the repo at `.claude/skills/creative-tim-ui/`. Anyone can install it in their own Claude Code setup by running:\n\n```bash\nclaude skill install github.com/creativetimofficial/ui .claude/skills/creative-tim-ui\n```\n\nOr by cloning and symlinking manually:\n```bash\n# Clone or copy the skills directory into your project\ncp -r path/to/ui-repo/.claude/skills/creative-tim-ui .claude/skills/creative-tim-ui\n```\n\nOnce installed the skill is available as `/creative-tim-ui` in any Claude Code session inside that project.\n","frontmatter":{"name":"creative-tim-ui","description":"Creative Tim UI block library assistant. Use when adding, generating, or modifying UI blocks/components/pages from creative-tim.com/ui. Covers design philosophy (minimalism, the 95% rule, research-first), block discovery, both CLI install methods, PRO API key setup, and Creative Tim design rules (orange brand, shadcn/ui base, Tailwind v4). Generates blocks that are deliberate and restrained, not maximal.","license":"MIT","metadata":{"author":"creative-tim","version":"1.0.0"}},"isInternal":false,"tokens":2132,"sizeBytes":8536},{"name":"README.md","path":"skills/README.md","rawUrl":"https://raw.githubusercontent.com/creativetimofficial/ui/HEAD/skills/README.md","title":"Skills Skill","category":"anthropic-skill","format":"markdown","content":"# Creative Tim UI — Agent Skills\n\nReusable skills for AI coding agents. Compatible with Claude Code, Cursor, Cline, GitHub Copilot, Windsurf, and 40+ other agents via the [skills CLI](https://skills.sh).\n\n## Install\n\n```bash\nnpx skills add creativetimofficial/ui\n```\n\nInstall globally (available in all your projects):\n\n```bash\nnpx skills add creativetimofficial/ui -g\n```\n\nInstall for a specific agent only:\n\n```bash\nnpx skills add creativetimofficial/ui --agent claude-code\nnpx skills add creativetimofficial/ui --agent cursor\n```\n\n## Available Skills\n\n| Skill | Description |\n|-------|-------------|\n| [creative-tim-ui](./creative-tim-ui/) | Block library assistant — design philosophy, install commands, PRO API key, design rules |\n\n## What the Skill Does\n\nOnce installed, your AI agent knows how to:\n\n- Discover and install any of the 390+ blocks via `npx @creative-tim/ui@latest add `\n- Follow Creative Tim's design philosophy — minimalism, the 95% rule, deliberate restraint\n- Apply the correct design rules (brand colors, typography scale, Tailwind v4 constraints)\n- Set up PRO block access with `CREATIVE_TIM_UI_API_KEY`\n- Compose shadcn/ui primitives correctly without reimplementing them\n\nBrowse blocks: https://www.creative-tim.com/ui\nSkill page: https://skills.sh/creativetimofficial/ui/creative-tim-ui\n","isInternal":false,"tokens":322,"sizeBytes":1329}],"systemPromptSnippet":"\n\n# Creative Tim UI — Design & Usage Guide\n\n**Version 1.0.0**\nCreative Tim\nMarch 2026\n\n> **Note:**\n> This document is primarily for AI agents and LLMs generating, reviewing, or modifying\n> UI code that uses the Creative Tim UI block library. Guidance is optimised for\n> automation and consistency. Humans may also find it useful as a reference.\n\n---\n\n## Abstract\n\nCreative Tim UI is a block library of 390+ React + Tailwind CSS components built on shadcn/ui.\nThis guide covers the design philosophy behind every block, installation patterns, brand identity\nrules, Tailwind v4 constraints, and component conventions so AI-generated code stays consistent\nwith the library — not just visually, but in the decisions it makes.\n\n---\n\n## Table of Contents\n\n0. [Design Philosophy](#0-design-philosophy)\n1. [Installing Blocks](#1-installing-blocks)\n2. [PRO Blocks & API Key](#2-pro-blocks--api-key)\n3. [Brand Identity](#3-brand-identity)\n4. [Typography Rules](#4-typography-rules)\n5. [Tailwind v4 Constraints](#5-tailwind-v4-constraints)\n6. [Component Patterns](#6-component-patterns)\n7. [Hydration Safety](#7-hydration-safety)\n8. [Block Authoring Guide](#8-block-authoring-guide)\n\n---\n\n## 0. Design Philosophy\n\nAcross 300+ products and categories, Creative Tim has applied the same discipline: identify what developers actually need, build that exceptionally well, and cut everything else.\n\nThat discipline — research first, build only what's necessary, remove rather than add — is the foundation of every block in this library.\n\n**The five principles:**\n\n### 0.1 The 95% Rule\n\nBuild the common case exceptionally well. Do not reach for complex solutions to simple problems. A developer dropping in a block should not unwrap three layers of abstraction to change a label.\n\n### 0.2 The \"Light\" Principle\n\nA block is done not when there's nothing left to add, but when there's nothing left to remove. No feature flags for things that can be changed in code. No helper components used only once. No animations on elements that don't need to communicate state. No extra wrappers that exist only to satisfy a mental model.\n\n### 0.3 Research Before Rendering\n\nThe first question is always: what problem does this solve for the person looking at the screen? Not what looks good in isolation. A pricing table reduces friction in a purchase decision. A dashboard surfaces the one number a person needs to act on. If the purpose isn't clear, the block isn't clear.\n\n### 0.4 Standing on Foundations\n\nshadcn/ui's `Table`, `Card`, `Button`, `Badge`, `Dialog` are well-designed, accessible, and maintained. Do not rebuild them. Do not wrap them unnecessarily. The Creative Tim contribution is the **composition** — how primitives are assembled into something useful for real work.\n\n### 0.5 Real Use, Not Demo Use\n\nThe standard is: would a real team ship this to solve a real problem? Avoid visual complexity that doesn't carry information. A status badge that turns red when something is wrong is communication. A gradient that doesn't indicate anything is decoration. Only the first belongs.\n\nFull detail with code examples: `rules/brand-philosophy.md`\n\n---\n\n---\n\n## 1. Installing Blocks\n\n### 1.1 Creative Tim CLI\n\nThe preferred method. Installs the block and all shadcn/ui primitive dependencies automatically.\n\n```bash\n# Initialize project (auto-detects Next.js / Vite / Remix / Astro)\nnpx @creative-tim/ui@latest init\n\n# Add a block\nnpx @creative-tim/ui@latest add \n```\n\n**Package:** `@creative-tim/ui` (v0.4.x+)\n**Binaries:** `creative-tim-ui`, `creative-tim` (aliases for the same CLI)\n\n```bash\n# All of these are equivalent:\nnpx @creative-tim/ui@latest add hero-01\nnpx creative-tim-ui add hero-01\nnpx creative-tim add hero-01\n```\n\n**Examples:**\n```bash\nnpx @creative-tim/ui@latest add hero-01\nnpx @creative-tim/ui@latest add ai-agent-activity-01\nnpx @creative-tim/ui@latest add agent-management-list-01\nnpx @creative-tim/ui@latest add pricing-01\n```\n\nThe CLI copies the component into `components/ui/` (or your configured components directory) and runs `npx shadcn@latest add` for each dependency.\n\n### 1.2 shadcn CLI (Full URL)\n\nUse this when you prefer the shadcn workflow or when integrating with shadcn's registry tooling.\n\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/.json\n```\n\n**Examples:**\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/testimonials-03.json\n```\n\n### 1.3 Block Discovery\n\nBrowse all blocks:\n- Website: https://www.creative-tim.com/ui\n- AI index: https://www.creative-tim.com/ui/llms.txt (grouped by category, machine-readable)\n\nIndividual block JSON (for programmatic access):\n```\nhttps://www.creative-tim.com/ui/r/.json\n```\n\n---\n\n## 2. PRO Blocks & API Key\n\nPRO blocks require a `Creative-Tim-Api-Key` header when fetching the block JSON. Obtain a key at https://www.creative-tim.com/ui.\n\n### 2.1 Environment Setup\n\n```bash\n# .env.local (never commit this)\nCREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx\n```\n\n### 2.2 CLI Install with Key\n\n```bash\nnpx @creative-tim/ui@latest add --api-key $CREATIVE_TIM_UI_API_KEY\n```\n\n### 2.3 Global Login (persists across sessions)\n\n```bash\nnpx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx\n```\n\nAfter login, all `add` commands automatically include the key — no `--api-key` flag needed.\n\n### 2.4 Detecting PRO Blocks\n\nPRO blocks are marked on the website. In the registry JSON they include `\"pro\": true`. Free-tier blocks have no `pro` field.\n\n---\n\n## 3. Brand Identity\n\n### 3.1 Primary Accent — Orange\n\n**Rule:** Use `orange` as the primary brand accent for interactive elements, icons, CTAs, and highlights.\n\n```tsx\n// CORRECT — orange accent\n
\n \n
\nJD\nOpenClaw\n```\n\n```tsx\n// WRONG — violet/purple signals AI-generated defaults, not Creative Tim\n
...
\n...\n```\n\n**Why:** Purple/violet is the default accent in many AI coding tools. Any block using it looks auto-generated and inconsistent with the library.\n\n### 3.2 Status Colors\n\n| State | Color |\n|-------|-------|\n| Active / Success | `emerald` |\n| Warning / Pending | `amber` |\n| Error / Stopped | `red` |\n| Info / In-Progress | `blue` |\n| Neutral / Inactive | `slate` |\n\n### 3.3 Surface Colors\n\n- Card backgrounds: `bg-background` (default card) or `bg-muted/30` (subtle areas like sidebars)\n- Borders: use `border` (theme token) — never hardcode `border-gray-200`\n- Text hierarchy: `text-foreground` (primary), `text-muted-foreground` (secondary)\n\n---\n\n## 4. Typography Rules\n\n### 4.1 `text-sm` for Readable Content\n\n**Rule:** Use `text-sm` for all body text that users need to read.\n\n```tsx\n// CORRECT\n{agent.name}\n

{description}

\n{agent.lastActive}\n```\n\n```tsx\n// WRONG — text-xs for readable body content is too small\n{agent.name}\n

{description}

\n```\n\n### 4.2 `text-xs` Only for Tiny/Supplementary Elements\n\n`text-xs` is acceptable for:\n- Avatar initials (`AvatarFallback`)\n- `font-mono` timestamps and IDs\n- Badge/pill labels (priority, status)\n- Sidebar group headers (`uppercase tracking-wider`)\n- Action buttons with h-6 or h-7 (`className=\"h-6 px-2 text-xs\"`)\n\n### 4.3 Never Use Arbitrary Font Sizes\n\n```tsx\n// WRONG\n...\n

...

\n
...
\n```\n\n---\n\n## 5. Tailwind v4 Constraints\n\n### 5.1 No Arbitrary Values\n\nTailwind v4 uses a continuous numeric scale. Arbitrary bracket values are not allowed.\n\n```tsx\n// WRONG — arbitrary values\n
\n
\n
\n```\n\n```tsx\n// CORRECT — use the numeric scale\n
// h-96 = 384px, w-72 = 288px\n
// 384px — close enough, or max-w-xs / max-w-md\n
// gap-3.5 = 14px, p-4 = 16px\n```\n\n### 5.2 Numeric Scale Reference\n\n```\nh-6 = 24px h-8 = 32px h-10 = 40px\nh-12 = 48px h-16 = 64px h-20 = 80px\nh-24 = 96px h-32 = 128px h-48 = 192px\nh-64 = 256px h-80 = 320px h-96 = 384px\n\ngap-1 = 4px gap-2 = 8px gap-3 = 12px\ngap-4 = 16px gap-5 = 20px gap-6 = 24px\n\np-2 = 8px p-3 = 12px p-4 = 16px\np-5 = 20px p-6 = 24px\n```\n\n### 5.3 Use Semantic Width Utilities\n\n```tsx\n// CORRECT\n
// 384px\n
// 448px\n
// 512px\n
// 576px\n
// 672px\n
// sidebar = 256px\n
// kanban column = 288px\n```\n\n### 5.4 Responsive Breakpoints Only\n\n```tsx\n// CORRECT\n
\n\n// WRONG — custom media query\n
\n```\n\n---\n\n## 6. Component Patterns\n\n### 6.1 Card Structure\n\nUse `Card > CardHeader + CardContent` for content grouping.\n\n```tsx\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\n\n\n \n Section Title\n \n \n {/* content */}\n \n\n```\n\n### 6.2 KPI / Stat Cards — py-0\n\nKPI cards use `py-0` on CardContent to let the parent padding control vertical rhythm.\n\n```tsx\n// CORRECT\n\n \n

Total Agents

\n

42

\n \n\n\n// WRONG — default py causes too much padding in stat grids\n\n \n```\n\n### 6.3 Sidebar Navigation\n\nStandard sidebar width is `w-64` (256px), with `bg-muted/30 border-r`.\n\n```tsx\n\n```\n\n### 6.4 ScrollArea for Overflow\n\nAny list that may overflow its container must use `ScrollArea`.\n\n```tsx\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\n\n\n
\n {items.map((item) => )}\n
\n\n```\n\n### 6.5 Badge Variants\n\n```tsx\n// Status badge (with dot)\n
\n \n Active\n
\n\n// Type badge\n\n OpenClaw\n\n```\n\n### 6.6 Avoid Inline Styles\n\n```tsx\n// WRONG\n
\n\n// CORRECT\n
\n```\n\n---\n\n## 7. Hydration Safety\n\n### 7.1 Never Use Date in useState Initializer\n\n`new Date()`, `Date.now()`, and `toLocaleTimeString()` return different values on the server vs. the client, causing React hydration errors.\n\n```tsx\n// WRONG — causes \"Hydration failed\" error\nconst [events, setEvents] = useState(() => [\n { id: \"1\", timestamp: new Date().toLocaleTimeString() },\n])\n\n// WRONG — locale-dependent\nconst [time, setTime] = useState(new Date().toLocaleTimeString())\n```\n\n```tsx\n// CORRECT — static strings for initial SSR state\nconst INITIAL_TIMESTAMPS = [\"10:30:00\", \"10:30:04\", \"10:30:08\"]\n\nconst [events, setEvents] = useState(() =>\n INITIAL_DATA.slice(0, 3).map((e, i) => ({\n ...e,\n id: `init-${i}`,\n timestamp: INITIAL_TIMESTAMPS[i],\n }))\n)\n\n// Live timestamps only inside useEffect / setInterval (client-only)\nfunction nowTimeString() {\n const d = new Date()\n return [d.getHours(), d.getMinutes(), d.getSeconds()]\n .map((n) => String(n).padStart(2, \"0\"))\n .join(\":\")\n}\n\nuseEffect(() => {\n const interval = setInterval(() => {\n setEvents((prev) => [\n ...prev,\n { id: `evt-${Date.now()}`, timestamp: nowTimeString(), ... }\n ])\n }, 2000)\n return () => clearInterval(interval)\n}, [])\n```\n\n### 7.2 suppressHydrationWarning for Intentional Mismatches\n\nIf a mismatch is truly intentional (e.g. a live clock that intentionally differs):\n```tsx\n\n```\n\n---\n\n## 8. Block Authoring Guide\n\n### 8.1 File Structure\n\nEvery block consists of two files:\n1. `registry/creative-tim/blocks/.tsx` — the component\n2. `registry/creative-tim/blocks//page.tsx` — the page wrapper\n\nThe page wrapper simply renders the block:\n```tsx\nimport BlockName from \"@/registry/creative-tim/blocks/\"\nexport default function Page() {\n return \n}\n```\n\n### 8.2 Registry Entry\n\nAdd to `registry/registry-blocks.ts`:\n```ts\n{\n name: \"my-block-01\",\n type: \"registry:block\",\n categories: [\"my-category\"],\n meta: {\n isFree: true,\n label: \"My Block\",\n createdAt: \"2026-03-14\",\n },\n registryDependencies: [\"button\", \"card\", \"badge\"], // SHORT NAMES ONLY\n files: [\n {\n path: \"registry/creative-tim/blocks/my-block-01.tsx\",\n type: \"registry:component\",\n },\n {\n path: \"registry/creative-tim/blocks/my-block-01/page.tsx\",\n type: \"registry:page\",\n target: \"app/blocks/my-block-01/page.tsx\",\n },\n ],\n}\n```\n\n**IMPORTANT:** `registryDependencies` must use **short names** (`\"button\"`, `\"card\"`, `\"badge\"`) — never full URLs.\n\n### 8.3 After Adding Blocks\n\nRebuild the registry:\n```bash\npnpm --filter www registry:build\n```\n\nThis regenerates `public/r/*.json`, `__index__.tsx`, and `__blocks__.json` (which powers `llms.txt`).\n\n### 8.4 Import Paths in Blocks\n\nUse the registry alias, not relative paths:\n```tsx\nimport { Button } from \"@/registry/creative-tim/ui/button\"\nimport { Card, CardContent } from \"@/registry/creative-tim/ui/card\"\n```\n\n### 8.5 Block Checklist\n\nBefore submitting a new block:\n- [ ] No `violet` or `purple` colors — use `orange` for brand accent\n- [ ] All readable text uses `text-sm` minimum\n- [ ] No arbitrary Tailwind values (`[10px]`, `[85%]`, etc.)\n- [ ] KPI/stat `CardContent` uses `px-4 py-0`\n- [ ] No `new Date()` in `useState` initializers\n- [ ] No inline `style={{}}` attributes\n- [ ] `registryDependencies` uses short names\n- [ ] `registry:build` completes without errors\n\n\n# Creative Tim Design Philosophy\n\nThis is not a style guide. It's the thinking behind every decision — what to build, what to cut, and why.\n\nOver a decade, Creative Tim has shipped 300+ open source UI dashboards, templates, and tools used by 2.8 million developers worldwide. That scale of use across that many products leaves no room for guesswork. Every principle here has been tested against real projects, real teams, and real feedback — not theory.\n\n---\n\n## The 95% Rule — Solve the Common Case Exceptionally Well\n\nEvery product Creative Tim ships starts with the same question: what do developers actually need? The answer, across hundreds of products and categories, is consistently the same core set of elements — buttons, tables, cards, sidebars, charts, forms, modals, notifications.\n\nThat's the 95%. The remaining 5% is Kanban boards, drag-and-drop, custom file uploaders, timeline components, WYSIWYG editors — powerful, but rare.\n\n**The rule:** build the 95% so well that no one feels the lack of the 5%.\n\nFor agents generating code: do not reach for complex solutions to solve simple problems. A developer looking at a block should not find themselves unwrapping three layers of abstraction to change a label. The common case should be obvious, direct, and complete.\n\n```tsx\n// WRONG — solves a hypothetical future problem\n }\n/>\n\n// RIGHT — solves the actual problem in front of you\n\n ...\n \n {items.map((item) => (\n \n {item.name}\n {item.status}\n \n ))}\n \n
\n```\n\n---\n\n## The \"Light\" Principle — A Block Is Done When There Is Nothing Left to Remove\n\nAcross Creative Tim's product line, \"light\" is a recurring word — not because the products lack capability, but because every addition is interrogated. Each plugin, prop, and wrapper adds CSS, JavaScript, and cognitive weight. Most are cut.\n\nThis is the hardest design discipline: not building things you know how to build.\n\n**What it means in practice:**\n\n- No feature flags or configuration props for things that can just be changed in code\n- No helper components that are only used once\n- No animation on elements that don't need to communicate state\n- No extra wrapper `div`s that exist only to satisfy a mental model\n- No icons that repeat information already conveyed by text\n- No empty states, loading states, or error states unless the block actually fetches data\n\nA block should look complete the moment a developer drops it in. Not because it handles every edge case, but because it clearly handles the right ones.\n\n```tsx\n// WRONG — wrapping for the sake of wrapping\n\n \n \n ...\n \n \n\n\n// RIGHT — as flat as the problem allows\n...\n```\n\n---\n\n## Understand the Problem Before Rendering\n\nThe first question is always **what problem does this solve for the person looking at the screen?** Not what looks good in isolation. Not what demonstrates technical capability.\n\nA pricing table exists to reduce friction in a purchase decision. A dashboard exists to surface the one number a person needs to act on. A form exists to collect information with the least possible resistance.\n\nIf the purpose of a block is not clear, the block is not clear.\n\n---\n\n## Standing on Foundations — Never Build What Already Exists Well\n\nCreative Tim's history is building *on top of* the best available foundation rather than beside it. Bootstrap → Material Design → shadcn/ui. Each transition kept what worked and added only what was missing.\n\nThe same applies to individual blocks. shadcn/ui's `Table`, `Card`, `Button`, `Badge`, `Dialog` are well-designed, accessible, and maintained. Do not rebuild them. Do not wrap them unnecessarily. Do not replicate their functionality in custom components.\n\nThe Creative Tim contribution is the **composition** — how these primitives are assembled into something useful for real work. That is where the judgment lives, not in the primitives themselves.\n\n```tsx\n// WRONG — reimplementing what shadcn already solved\nfunction CustomButton({ variant, children }) {\n const styles = variant === 'primary' ? 'bg-orange-500 text-white' : 'bg-gray-100'\n return \n}\n\n// RIGHT — extend the foundation\nimport { Button } from \"@/registry/creative-tim/ui/button\"\n\n```\n\n---\n\n## Real Use, Not Demo Use\n\nThe benchmark for every block is whether a real team would ship it in a production app. Not \"does this look impressive in a screenshot?\" but \"would this hold up under real conditions, used by real people under time pressure?\"\n\n**Concretely:** avoid visual complexity that doesn't carry information. A gradient on a card header that doesn't indicate anything is decoration. A status badge that turns red when something is wrong is communication. Only the second one belongs.\n\n```tsx\n// WRONG — decoration that doesn't communicate\n\n Users\n\n\n// RIGHT — surface that lets the content speak\n\n Users\n\n```\n\n---\n\n## Summary — The Questions to Ask\n\nBefore generating or modifying any block, run through these:\n\n1. **Is this in the 95%?** Does this element appear in most real dashboards/UIs, or is it a rare specialization?\n2. **What can be removed?** If the block works without it, it probably should.\n3. **What is the user trying to do?** Not \"what does this block contain\" but \"what decision does it help someone make?\"\n4. **Am I building on the foundation or beside it?** Use shadcn/ui primitives. Compose, don't reimplement.\n5. **Would this hold up in production?** Not in a demo. In a real app, used by real people under time pressure.\n\n\n# Component Patterns\n\n## Card Structure\n\nStandard grouping pattern: `Card > CardHeader + CardContent`.\n\n```tsx\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\n\n\n \n Section Title\n \n \n {/* content */}\n \n\n```\n\n## KPI / Stat Cards — Use py-0\n\nStat grid cards use `py-0` so vertical rhythm is controlled by the parent grid, not the card itself.\n\n```tsx\n// CORRECT\n\n \n
\n

Active Agents

\n

4

\n \n\n\n// WRONG — default py-6 causes excessive padding in stat grids\n\n \n```\n\n## Sidebar Navigation\n\nWidth: `w-64` (256px). Background: `bg-muted/30`. Right border: `border-r`.\n\n```tsx\n\n```\n\n## ScrollArea for Overflow\n\nAny list that can overflow must use `ScrollArea` (not `overflow-y-auto` directly).\n\n```tsx\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\n\n\n
\n {items.map((item) => )}\n
\n\n```\n\n## Status Badge with Dot\n\n```tsx\n
\n \n Active\n
\n```\n\n## Avatar Fallback Colors\n\nUse orange tones for user/agent avatars:\n```tsx\n\n JD\n\n```\n\n## Action Buttons in Tables\n\nSmall ghost buttons for row actions:\n```tsx\n\n```\n\n\n# Brand & Design Identity Rules\n\n## Primary Accent — Orange\n\nCreative Tim's brand color is **orange**. Always use orange for primary accents, interactive elements, CTAs, and logo marks.\n\n### Correct\n\n```tsx\n// Logo / app icon\n
\n \n
\n\n// Avatar fallback\nJD\n\n// Type badge\nOpenClaw\n\n// Active nav item accent\n\n```\n\n### Wrong\n\n```tsx\n// DO NOT use violet or purple — signals AI-generated defaults\n
\n\n\n```\n\n**Why:** Purple/violet is the default accent in many AI coding tools. Blocks using these colors look auto-generated and break visual consistency with the Creative Tim brand.\n\n## Status Color System\n\n| State | Tailwind Color |\n|-------|---------------|\n| Active / Success | `emerald` |\n| Warning / In-Review / Paused | `amber` |\n| Error / Stopped / Critical | `red` |\n| Info / In-Progress | `blue` |\n| Neutral / Backlog | `slate` |\n\n## Surface & Border Conventions\n\n- **Sidebar / subtle backgrounds:** `bg-muted/30`\n- **Card backgrounds:** default `bg-background` (Card component handles this)\n- **Borders:** use `border` theme token — never `border-gray-200` or hardcoded colors\n- **Text:** `text-foreground` (primary), `text-muted-foreground` (secondary/captions)\n\n## Do Not Use Inline Styles\n\n```tsx\n// WRONG\n
\n\n// CORRECT\n
\n```\n\n\n# Hydration Safety Rules\n\n## Never Use Date in useState Initializer\n\n`new Date()`, `Date.now()`, and `toLocaleTimeString()` produce different values on the server vs. the client, causing React to throw a hydration mismatch error.\n\n### Wrong\n\n```tsx\n// Hydration error: server timestamp != client timestamp\nconst [events, setEvents] = useState(() => [\n { id: \"1\", timestamp: new Date().toLocaleTimeString() },\n])\n\nconst [time, setTime] = useState(new Date().toLocaleTimeString())\n\nconst [id, setId] = useState(() => Date.now().toString())\n```\n\n### Correct\n\nUse static/hardcoded strings for SSR-safe initial state. Move live values inside `useEffect` or `setInterval`.\n\n```tsx\n// Static initial timestamps — identical on server and client\nconst INITIAL_TIMESTAMPS = [\"10:30:00\", \"10:30:04\", \"10:30:08\"]\n\nconst [events, setEvents] = useState(() =>\n SEED_DATA.slice(0, 3).map((item, i) => ({\n ...item,\n id: `init-${i}`,\n timestamp: INITIAL_TIMESTAMPS[i],\n }))\n)\n\n// Pure function, safe to call client-side only\nfunction nowTimeString() {\n const d = new Date()\n return [d.getHours(), d.getMinutes(), d.getSeconds()]\n .map((n) => String(n).padStart(2, \"0\"))\n .join(\":\")\n}\n\n// Live updates only in useEffect (never runs on server)\nuseEffect(() => {\n const interval = setInterval(() => {\n setEvents((prev) => [\n ...prev.slice(-49),\n {\n id: `evt-${Date.now()}`,\n timestamp: nowTimeString(),\n // ...rest of event\n },\n ])\n }, 2000)\n return () => clearInterval(interval)\n}, [])\n```\n\n## Locale-Dependent Formatting\n\n`toLocaleString()`, `toLocaleDateString()`, `toLocaleTimeString()` are locale-dependent — the server locale may differ from the browser locale.\n\n```tsx\n// WRONG — locale mismatch\n{new Date(item.createdAt).toLocaleTimeString()}\n\n// CORRECT — use fixed format string or static value\n{item.createdAt} // pre-formatted string, e.g. \"2 hours ago\"\n```\n\n## suppressHydrationWarning\n\nOnly use `suppressHydrationWarning` when the mismatch is **intentional** (e.g. a live clock that is always slightly different):\n\n```tsx\n\n```\n\nDo not use it to silence bugs — fix the root cause instead.\n\n\n# PRO Blocks & API Key Setup\n\n## Summary\n\nPRO blocks require a Creative Tim API key. Get yours at https://www.creative-tim.com/ui/dashboard → **API Keys** section.\n\nAPI key format: `pk_live_` prefix (e.g. `pk_live_a09e7677...`)\n\n## Authentication Methods\n\n### Method 1 — Environment Variable (recommended for development)\n\n```bash\n# macOS/Linux\nexport CREATIVE_TIM_UI_API_KEY=pk_live_your_key\n\n# Inline (one-off)\nCREATIVE_TIM_UI_API_KEY=pk_live_your_key npx @creative-tim/ui@latest add \n\n# .env.local (Next.js / Vite) — never commit this file\nCREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx\n```\n\nThen install normally — the CLI picks up the env var automatically:\n```bash\nnpx @creative-tim/ui@latest add \n```\n\nOr pass it explicitly:\n```bash\nnpx @creative-tim/ui@latest add --api-key $CREATIVE_TIM_UI_API_KEY\n```\n\n### Method 2 — components.json (recommended for teams / CI/CD)\n\nAdd a `registries` entry to `components.json`:\n\n```json\n{\n \"registries\": {\n \"@creative-tim\": {\n \"url\": \"https://www.creative-tim.com/ui/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${CREATIVE_TIM_UI_API_KEY}\"\n }\n }\n }\n}\n```\n\nTeam members each set `CREATIVE_TIM_UI_API_KEY` in their own shell / CI secrets.\n\n### Method 3 — shadcn CLI\n\nThe same `components.json` config above works with the shadcn CLI:\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/.json\n```\n\n## Detecting PRO Blocks\n\nPRO blocks are marked on the website. In registry JSON they include `\"pro\": true`.\n\n\n# Tailwind v4 Rules\n\n## No Arbitrary Values\n\nThe project uses Tailwind v4 with a continuous numeric scale. Never use bracket arbitrary values.\n\n### Wrong\n\n```tsx\n
\n
\n
\n```\n\n### Correct\n\n```tsx\n
// h-96=384px, w-72=288px\n
// gap-3.5=14px, p-4=16px\n
\n```\n\n## Numeric Scale Reference\n\n### Height / Width\n```\nh-4 = 16px h-5 = 20px h-6 = 24px h-7 = 28px\nh-8 = 32px h-9 = 36px h-10 = 40px h-11 = 44px\nh-12 = 48px h-14 = 56px h-16 = 64px h-20 = 80px\nh-24 = 96px h-32 = 128px h-40 = 160px h-48 = 192px\nh-56 = 224px h-64 = 256px h-72 = 288px h-80 = 320px\nh-96 = 384px\n```\n\n### Spacing (gap / padding / margin)\n```\n0.5=2px 1=4px 1.5=6px 2=8px 2.5=10px 3=12px 3.5=14px\n4=16px 5=20px 6=24px 7=28px 8=32px 9=36px 10=40px\n12=48px 14=56px 16=64px\n```\n\n### Max Width Semantic Utilities\n```\nmax-w-xs = 320px max-w-sm = 384px\nmax-w-md = 448px max-w-lg = 512px\nmax-w-xl = 576px max-w-2xl = 672px\nmax-w-3xl = 768px max-w-4xl = 896px\nmax-w-5xl = 1024px max-w-6xl = 1152px\nmax-w-7xl = 1280px\n```\n\n## Typography Scale\n\n```\ntext-xs = 12px (avatar initials, badge pills, mono timestamps, tiny buttons)\ntext-sm = 14px (body text, table cells, descriptions — DEFAULT)\ntext-base = 16px (larger body, card titles)\ntext-lg = 18px (section headings)\ntext-xl = 20px (page headings)\ntext-2xl = 24px (stat values, hero text)\n```\n\n**Rule:** `text-sm` is the minimum for readable content. Use `text-xs` only for tiny decorative elements.\n\n## Responsive Breakpoints\n\nUse only standard Tailwind breakpoints:\n```\nsm: 640px md: 768px lg: 1024px xl: 1280px 2xl: 1536px\n```\n\nNever use custom media query syntax.\n\n\n---\nname: creative-tim-ui\ndescription: Creative Tim UI block library assistant. Use when adding, generating, or modifying UI blocks/components/pages from creative-tim.com/ui. Covers design philosophy (minimalism, the 95% rule, research-first), block discovery, both CLI install methods, PRO API key setup, and Creative Tim design rules (orange brand, shadcn/ui base, Tailwind v4). Generates blocks that are deliberate and restrained, not maximal.\nlicense: MIT\nmetadata:\n author: creative-tim\n version: \"1.0.0\"\n---\n\n# Creative Tim UI\n\nA comprehensive block library built on top of [shadcn/ui](https://ui.shadcn.com), with 390+ production-ready blocks across 40+ categories. All blocks are React + Tailwind CSS, compatible with Next.js (App Router), Remix, and Vite.\n\nBrowse the full library: **https://www.creative-tim.com/ui**\nAI-readable index: **https://www.creative-tim.com/ui/llms.txt**\n\n## Install This Skill\n\n```bash\n# Install via skills CLI (recommended)\nnpx skills add creativetimofficial/ui\n\n# Install globally (available in all projects)\nnpx skills add creativetimofficial/ui -g\n\n# Or install to a specific agent only\nnpx skills add creativetimofficial/ui --agent claude-code\n```\n\nSkill page: **https://skills.sh/creativetimofficial/ui/creative-tim-ui**\n\n## Design Philosophy\n\nAcross 300+ products and categories, Creative Tim has applied the same discipline: identify what developers actually need, build that exceptionally well, and cut everything else. That restraint is the core of the library.\n\nWhen generating or modifying blocks, follow these principles:\n\n**The 95% Rule** — build the common case exceptionally well. Don't add configuration, abstraction, or flexibility for problems that rarely exist. A developer should be able to read a block and immediately understand what it does.\n\n**The \"Light\" Principle** — a block is finished when there is nothing left to remove, not when there is nothing left to add. Question every wrapper div, every prop, every animation, every icon. If the block works without it, it probably should.\n\n**Research before rendering** — ask what the person looking at this screen is trying to *do*. A dashboard surfaces the number someone needs to act on. A form collects information with the least possible resistance. Design toward the purpose, not toward the surface.\n\n**Build on foundations** — shadcn/ui primitives (`Card`, `Table`, `Button`, `Badge`) are well-designed and maintained. Compose them; don't reimplement them. The Creative Tim contribution is in the composition and the judgment, not in the primitives.\n\n**Real use, not demo use** — the standard is: would a real team ship this in a production app? Avoid visual complexity that doesn't carry information. Communication beats decoration every time.\n\nFull detail with code examples: `rules/brand-philosophy.md`\n\n---\n\n## When to Apply\n\nUse this skill when:\n- Installing or customising a Creative Tim UI block in a project\n- Generating new blocks that should match Creative Tim's design system\n- Reviewing generated UI code for brand/style compliance\n- Setting up PRO API key access for premium blocks\n- Onboarding a new project to use the Creative Tim UI library\n\n## Block Categories\n\n| Category | Slug | Description |\n|----------|------|-------------|\n| AI Agents | `ai-agents` | Chat interfaces, activity feeds, tool use, transcription |\n| Pages | `pages` | Full-page agent management layouts |\n| Account | `account` | Profile, settings, billing management |\n| Authentication | `authentication` | Login, register, 2FA flows |\n| Hero | `hero` | Landing page hero sections |\n| Pricing | `pricing` | Pricing tables and billing plans |\n| Charts | `charts` | Data visualisation |\n| KPI | `kpi` | Metric cards and dashboards |\n| Stats | `stats` | Statistics sections |\n| Tables | `table` | Data tables with sorting/filtering |\n| Ecommerce | `ecommerce` | Product listings, carts, checkout |\n| Blog | `blog` | Article lists, post layouts |\n| Testimonials | `testimonials` | Social proof sections |\n| ... | | [Full list at /ui/llms.txt] |\n\n## Installing Blocks\n\nTwo methods are fully supported — choose whichever fits your setup.\n\n### Option 1 — Creative Tim CLI (recommended)\n\n```bash\nnpx @creative-tim/ui@latest add \n```\n\nInitialize a new project first (auto-detects Next.js / Vite / Remix / Astro):\n```bash\nnpx @creative-tim/ui@latest init\n```\n\nExamples:\n```bash\nnpx @creative-tim/ui@latest add hero-01\nnpx @creative-tim/ui@latest add ai-agent-activity-01\nnpx @creative-tim/ui@latest add agent-management-list-01\n```\n\nThe package also ships named binaries (`creative-tim-ui`, `creative-tim`) — same commands:\n```bash\nnpx creative-tim-ui add hero-01\nnpx creative-tim add hero-01\n```\n\n### Option 2 — shadcn CLI (full URL)\n\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/.json\n```\n\nExample:\n```bash\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json\nnpx shadcn@latest add https://www.creative-tim.com/ui/r/ai-agent-activity-01.json\n```\n\nBoth methods copy the component source into your project and install all required shadcn/ui primitives (Button, Card, Badge, etc.) automatically.\n\n## PRO Blocks (API Key)\n\nSome blocks are marked **PRO** and require a Creative Tim API key. You can get a free key at **https://www.creative-tim.com/ui**.\n\n### Setup\n\nAdd the key to your environment:\n```bash\n# .env.local\nCREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx\n```\n\nPass the key when using either CLI:\n```bash\n# Creative Tim CLI\nnpx @creative-tim/ui@latest add pro-block-name --api-key $CREATIVE_TIM_UI_API_KEY\n\n# shadcn CLI — set Authorization header via registry config\n```\n\nOr set it globally via the Creative Tim CLI config:\n```bash\nnpx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx\n```\n\nAfter setting the key, PRO blocks install identically to free blocks.\n\n## Design Rules\n\nSee individual rule files for full detail. Quick summary:\n\n### Brand Colors\n- **Primary accent: orange** (`orange-500` / `orange-600`) — Creative Tim's brand color\n- Never use `violet`, `purple`, or `indigo` as accent colors — these signal AI-generated defaults\n- Neutral surfaces: `slate`, `gray`, `zinc`\n- Status: `emerald` (success), `amber` (warning), `red` (error), `blue` (info)\n\n### Typography\n- **`text-sm`** for all readable body content — labels, descriptions, table cells, list items\n- `text-xs` only for: avatar initials, `font-mono` timestamps, badge pills (status/priority), sidebar group headers (uppercase + tracking-wider), tiny h-6/h-7 action buttons\n- Never use `text-[10px]`, `text-[11px]`, or any arbitrary font-size values\n\n### Tailwind v4 — No Arbitrary Values\n- Use the numeric scale for spacing/sizing: `h-8`, `w-12`, `gap-3`, `p-4` — never `h-[32px]`\n- Use standard fractions for widths: `max-w-sm`, `max-w-2xl`, `w-1/2` — never `max-w-[85%]`\n- Responsive breakpoints only: `sm:`, `md:`, `lg:`, `xl:` — never `[@media(min-width:640px)]:`\n\n### Component Patterns\n- Prefer `Card > CardHeader + CardContent` for content grouping\n- KPI / stat cards: `CardContent className=\"px-4 py-0\"` (py-0, not default py-6)\n- Use `ScrollArea` for any list that can overflow\n- Sidebar navigation: 64 (`w-64`), border-r, `bg-muted/30`\n- Avoid inline `style={{}}` — always use Tailwind classes\n\n### Hydration Safety\n- Never use `new Date()`, `Date.now()`, or `toLocaleTimeString()` in `useState` initializers\n- Use static/hardcoded strings for SSR-safe initial state; switch to live values inside `useEffect` / `setInterval`\n\n## Full Design Guide\n\nFor the complete rules with code examples: `AGENTS.md`\n\nIndividual rules:\n```\nrules/install-blocks.md — CLI install walkthrough\nrules/pro-api-key.md — PRO key setup and auth\nrules/design-brand.md — Brand colors and identity\nrules/tailwind-rules.md — Tailwind v4 coding constraints\nrules/component-patterns.md — Preferred component patterns\nrules/hydration-safety.md — SSR/CSR hydration rules\n```\n\n## Deploying This Skill\n\nThis skill lives in the repo at `.claude/skills/creative-tim-ui/`. Anyone can install it in their own Claude Code setup by running:\n\n```bash\nclaude skill install github.com/creativetimofficial/ui .claude/skills/creative-tim-ui\n```\n\nOr by cloning and symlinking manually:\n```bash\n# Clone or copy the skills directory into your project\ncp -r path/to/ui-repo/.claude/skills/creative-tim-ui .claude/skills/creative-tim-ui\n```\n\nOnce installed the skill is available as `/creative-tim-ui` in any Claude Code session inside that project.\n\n\n# Creative Tim UI — Agent Skills\n\nReusable skills for AI coding agents. Compatible with Claude Code, Cursor, Cline, GitHub Copilot, Windsurf, and 40+ other agents via the [skills CLI](https://skills.sh).\n\n## Install\n\n```bash\nnpx skills add creativetimofficial/ui\n```\n\nInstall globally (available in all your projects):\n\n```bash\nnpx skills add creativetimofficial/ui -g\n```\n\nInstall for a specific agent only:\n\n```bash\nnpx skills add creativetimofficial/ui --agent claude-code\nnpx skills add creativetimofficial/ui --agent cursor\n```\n\n## Available Skills\n\n| Skill | Description |\n|-------|-------------|\n| [creative-tim-ui](./creative-tim-ui/) | Block library assistant — design philosophy, install commands, PRO API key, design rules |\n\n## What the Skill Does\n\nOnce installed, your AI agent knows how to:\n\n- Discover and install any of the 390+ blocks via `npx @creative-tim/ui@latest add `\n- Follow Creative Tim's design philosophy — minimalism, the 95% rule, deliberate restraint\n- Apply the correct design rules (brand colors, typography scale, Tailwind v4 constraints)\n- Set up PRO block access with `CREATIVE_TIM_UI_API_KEY`\n- Compose shadcn/ui primitives correctly without reimplementing them\n\nBrowse blocks: https://www.creative-tim.com/ui\nSkill page: https://skills.sh/creativetimofficial/ui/creative-tim-ui\n"}