Creative Tim UICreative Tim UI

AI Skills

PreviousNext

Install the Creative Tim UI skill for Claude Code, Cursor, Cline, and 40+ other AI coding agents. Get design rules, block discovery, and install commands built in.

The Creative Tim UI skill teaches AI coding agents (Claude Code, Cursor, Cline, and 40+ others) how to correctly work with this block library — design rules, brand colors, CLI install commands, PRO API key setup, and more.

Once installed, agents automatically follow Creative Tim's conventions without being told every time.

Install the Skill

Use the skills CLI — the open package manager for AI agent skills:

# Install for the current project
npx skills add creativetimofficial/ui
 
# Install globally (available in all your projects)
npx skills add creativetimofficial/ui -g

Or install for a specific agent only:

pnpm dlx skills add creativetimofficial/ui --agent claude-code
npx skills add creativetimofficial/ui --agent cursor
npx skills add creativetimofficial/ui --agent cline

The skill is listed on skills.sh/creativetimofficial/ui/creative-tim-ui and supports 40+ agents including Claude Code, GitHub Copilot, Cursor, Cline, Windsurf, and more.

Design Philosophy the Skill Encodes

The skill doesn't just teach agents what to generate — it teaches them how to decide.

Across 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 same thinking is now baked into every block the skill generates.

The 95% Rule — solve the common case exceptionally well. Don't add configuration, abstraction, or flexibility for problems that rarely exist.

The "Light" Principle — a block is done when there is nothing left to remove, not when there is nothing left to add. Agents won't reach for wrappers, feature flags, or animations that don't carry meaning.

Real use, not demo use — the benchmark is whether a real team would ship this in a production app. Communication beats decoration.

Build on foundations — shadcn/ui primitives are composed, never reimplemented.

This is what separates a Creative Tim block from a generic AI-generated one: the decisions made before a single element is rendered.

What the Skill Teaches Agents

Once installed, agents automatically know how to:

Block Discovery & Installation

# Creative Tim CLI
npx @creative-tim/ui@latest init
npx @creative-tim/ui@latest add <block-name>
 
# shadcn CLI (full URL method)
npx shadcn@latest add https://www.creative-tim.com/ui/r/<block-name>.json

Agents can also browse the full block index at https://www.creative-tim.com/ui/llms.txt — an AI-readable list of all 390+ blocks grouped by category.

PRO API Key Setup

Agents know the correct environment variable name (CREATIVE_TIM_UI_API_KEY) and all three authentication methods:

# Environment variable
export CREATIVE_TIM_UI_API_KEY=pk_live_your_key
 
# Inline
CREATIVE_TIM_UI_API_KEY=pk_live_your_key npx @creative-tim/ui@latest add <block>
 
# Via --api-key flag
npx @creative-tim/ui@latest add <block> --api-key $CREATIVE_TIM_UI_API_KEY

Or via components.json for teams and CI/CD:

components.json
{
  "registries": {
    "@creative-tim": {
      "url": "https://www.creative-tim.com/ui/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${CREATIVE_TIM_UI_API_KEY}"
      }
    }
  }
}

Design Rules

Agents follow Creative Tim's visual conventions automatically:

RuleDetail
Brand accentorange — never violet or purple
Body texttext-sm minimum for readable content
Tailwind v4No arbitrary values ([10px], [85%]) — numeric scale only
KPI cardsCardContent className="px-4 py-0"
HydrationNever new Date() in useState — static strings for SSR initial state
Status colorsemerald active, amber warning, red error, blue info

Component Patterns

Agents use the correct sidebar width (w-64), card structure, ScrollArea for overflow, and status badge patterns — keeping generated code visually consistent with the rest of the library.

Supported Agents

The skill installs to any agent supported by the skills CLI, including:

Claude Code · Cursor · Cline · GitHub Copilot · Windsurf · Roo · OpenCode · Continue · Warp · Codex · and 30+ more

Source

The skill lives in the public GitHub repository at .claude/skills/creative-tim-ui/ and is open source (MIT).

creativetimofficial/ui
└── .claude/skills/creative-tim-ui/
    ├── SKILL.md               — Main skill (loaded by agents)
    ├── AGENTS.md              — Full expanded guide
    └── rules/
        ├── install-blocks.md
        ├── pro-api-key.md
        ├── design-brand.md
        ├── tailwind-rules.md
        ├── component-patterns.md
        └── hydration-safety.md

View source: github.com/creativetimofficial/ui