Communitygithub.com

creativetimofficial/ui

Asistente de la biblioteca de bloques UI de Creative Tim. Úsalo para agregar, generar o modificar bloques/componentes/páginas de creative-tim.com/ui.

¿Qué es ui?

Este skill proporciona asistencia completa para la biblioteca de bloques UI de Creative Tim, basada en shadcn/ui y Tailwind CSS v4, compatible con React, Next.js (App Router), Remix y Vite. Incluye más de 390 bloques listos para producción en más de 40 categorías, desde interfaces de agentes AI y paneles de administración hasta páginas de aterrizaje y autenticación. El skill cubre la filosofía de diseño de Creative Tim (minimalismo, la regla del 95%, investigación primero), la instalación de bloques mediante dos métodos CLI (Creative Tim CLI y shadcn CLI), la configuración de la clave API PRO para acceder a bloques premium, y las reglas de diseño de la marca (naranja como color principal, shadcn/ui como base, sin valores arbitrarios en Tailwind v4). Está diseñado para ser usado con agentes como Claude Code, Cursor o Codex, asegurando que cualquier bloque generado sea deliberado, contenido y no maximalista, siguiendo los principios de la biblioteca.

Compatible con✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/creativetimofficial/ui/tree/HEAD/skills/creative-tim-ui
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Creative Tim UI

Una biblioteca completa de bloques construida sobre shadcn/ui, con más de 390 bloques listos para producción en más de 40 categorías. Todos los bloques son React + Tailwind CSS, compatibles con Next.js (App Router), Remix y Vite.

Explora la biblioteca completa: https://www.creative-tim.com/ui Índice legible por IA: https://www.creative-tim.com/ui/llms.txt

Instalar este skill

# Instalar vía CLI de skills (recomendado)
npx skills add creativetimofficial/ui

# Instalar globalmente (disponible en todos los proyectos)
npx skills add creativetimofficial/ui -g

# O instalar solo para un agente específico
npx skills add creativetimofficial/ui --agent claude-code

Página del skill: https://skills.sh/creativetimofficial/ui/creative-tim-ui

Filosofía de diseño

A lo largo de más de 300 productos y categorías, Creative Tim ha aplicado la misma disciplina: identificar lo que los desarrolladores realmente necesitan, construirlo excepcionalmente bien y eliminar todo lo demás. Esa contención es el núcleo de la biblioteca.

Al generar o modificar bloques, sigue estos principios:

La regla del 95% — construye el caso común excepcionalmente bien. No añadas configuración, abstracción o flexibilidad para problemas que raramente existen. Un desarrollador debería poder leer un bloque y entender inmediatamente lo que hace.

El principio "Ligero" — un bloque está terminado cuando no queda nada que eliminar, no cuando no queda nada que añadir. Cuestiona cada div envoltorio, cada prop, cada animación, cada icono. Si el bloque funciona sin ello, probablemente debería estar sin ello.

Investigar antes de renderizar — pregúntate qué está tratando de hacer la persona que mira esta pantalla. Un dashboard muestra el número sobre el que alguien necesita actuar. Un formulario recopila información con la menor resistencia posible. Diseña hacia el propósito, no hacia la superficie.

Construir sobre cimientos — los primitivos de shadcn/ui (Card, Table, Button, Badge) están bien diseñados y mantenidos. Combínalos; no los reimplementes. La contribución de Creative Tim está en la composición y el criterio, no en los primitivos.

Uso real, no uso de demostración — el estándar es: ¿un equipo real enviaría esto en una aplicación de producción? Evita la complejidad visual que no transmite información. La comunicación supera a la decoración en todo momento.

Detalle completo con ejemplos de código: rules/brand-philosophy.md

Cuándo aplicar

Usa este skill cuando:

  • Instales o personalices un bloque de Creative Tim UI en un proyecto
  • Generes nuevos bloques que deban coincidir con el sistema de diseño de Creative Tim
  • Revises código UI generado para cumplimiento de marca/estilo
  • Configures acceso mediante clave API PRO para bloques premium
  • Incorpores un nuevo proyecto para usar la biblioteca Creative Tim UI

Categorías de bloques

CategoríaSlugDescripción
Agentes AIai-agentsInterfaces de chat, feeds de actividad, uso de herramientas, transcripción
PáginaspagesDiseños de página completa para gestión de agentes
CuentaaccountPerfil, configuración, gestión de facturación
AutenticaciónauthenticationFlujos de inicio de sesión, registro, 2FA
HeroheroSecciones hero para páginas de aterrizaje
PreciospricingTablas de precios y planes de facturación
GráficoschartsVisualización de datos
KPIkpiTarjetas de métricas y paneles
EstadísticasstatsSecciones de estadísticas
TablastableTablas de datos con ordenación/filtrado
Comercio electrónicoecommerceListados de productos, carritos, pago
BlogblogListas de artículos, diseños de publicaciones
TestimoniostestimonialsSecciones de prueba social
...[Lista completa en /ui/llms.txt]

Instalación de bloques

Dos métodos totalmente compatibles: elige el que mejor se adapte a tu configuración.

Opción 1 — CLI de Creative Tim (recomendado)

npx @creative-tim/ui@latest add <nombre-del-bloque>

Inicializa un nuevo proyecto primero (detecta automáticamente Next.js / Vite / Remix / Astro):

npx @creative-tim/ui@latest init

Ejemplos:

npx @creative-tim/ui@latest add hero-01
npx @creative-tim/ui@latest add ai-agent-activity-01
npx @creative-tim/ui@latest add agent-management-list-01

El paquete también incluye binarios nombrados (creative-tim-ui, creative-tim) — mismos comandos:

npx creative-tim-ui add hero-01
npx creative-tim add hero-01

Opción 2 — shadcn CLI (URL completa)

npx shadcn@latest add https://www.creative-tim.com/ui/r/<nombre-del-bloque>.json

Ejemplo:

npx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json
npx shadcn@latest add https://www.creative-tim.com/ui/r/ai-agent-activity-01.json

Ambos métodos copian el código fuente del componente en tu proyecto e instalan automáticamente todos los primitivos de shadcn/ui necesarios (Button, Card, Badge, etc.).

Bloques PRO (Clave API)

Algunos bloques están marcados como PRO y requieren una clave API de Creative Tim. Puedes obtener una clave gratuita en https://www.creative-tim.com/ui.

Configuración

Añade la clave a tu entorno:

# .env.local
CREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx

Pasa la clave al usar cualquiera de los CLI:

# CLI de Creative Tim
npx @creative-tim/ui@latest add nombre-bloque-pro --api-key $CREATIVE_TIM_UI_API_KEY

# shadcn CLI — establece el encabezado Authorization mediante la configuración del registro

O establécela globalmente a través de la configuración del CLI de Creative Tim:

npx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx

Después de configurar la clave, los bloques PRO se instalan de manera idéntica a los bloques gratuitos.

Reglas de diseño

Consulta los archivos de reglas individuales para más detalle. Resumen rápido:

Colores de marca

  • Acento principal: naranja (orange-500 / orange-600) — color de marca de Creative Tim
  • Nunca uses violet, purple o indigo como colores de acento — estos indican valores predeterminados generados por IA
  • Superficies neutras: slate, gray, zinc
  • Estados: emerald (éxito), amber (advertencia), red (error), blue (información)

Tipografía

  • text-sm para todo el contenido legible del cuerpo — etiquetas, descripciones, celdas de tabla, elementos de lista
  • text-xs solo para: iniciales de avatar, marcas de tiempo font-mono, píldoras de insignia (estado/prioridad), encabezados de grupos de barra lateral (mayúsculas + tracking-wider), botones de acción pequeños h-6/h-7
  • Nunca uses text-[10px], text-[11px] o ningún valor de tamaño de fuente arbitrario

Tailwind v4 — Sin valores arbitrarios

  • Usa la escala numérica para espaciado/tamaño: h-8, w-12, gap-3, p-4 — nunca h-[32px]
  • Usa fracciones estándar para anchos: max-w-sm, max-w-2xl, w-1/2 — nunca max-w-[85%]
  • Solo puntos de interrupción responsive: sm:, md:, lg:, xl: — nunca [@media(min-width:640px)]:

Patrones de componentes

  • Prefiere Card > CardHeader + CardContent para agrupar contenido
  • Tarjetas KPI / estadísticas: CardContent className="px-4 py-0" (py-0, no py-6 predeterminado)
  • Usa ScrollArea para cualquier lista que pueda desbordarse
  • Navegación de barra lateral: 64 (w-64), border-r, bg-muted/30
  • Evita style={{}} en línea — usa siempre clases de Tailwind

Seguridad de hidratación

  • Nunca uses new Date(), Date.now() o toLocaleTimeString() en inicializadores de useState
  • Usa cadenas estáticas/fijas para el estado inicial seguro para SSR; cambia a valores en vivo dentro de useEffect / setInterval

Guía de diseño completa

Para las reglas completas con ejemplos de código: AGENTS.md

Reglas individuales:

rules/install-blocks.md     — Guía de instalación CLI
rules/pro-api-key.md        — Configuración y autenticación de clave PRO
rules/design-brand.md       — Colores e identidad de marca
rules/tailwind-rules.md     — Restricciones de código de Tailwind v4
rules/component-patterns.md — Patrones de componentes preferidos
rules/hydration-safety.md   — Reglas de hidratación SSR/CSR

Despliegue de este skill

Este skill reside en el repositorio en .claude/skills/creative-tim-ui/. Cualquiera puede instalarlo en su propia configuración de Claude Code ejecutando:

claude skill install github.com/creativetimofficial/ui .claude/skills/creative-tim-ui

O clonando y enlazando simbólicamente manualmente:

# Clona o copia el directorio de skills en tu proyecto
cp -r ruta/al/repo-ui/.claude/skills/creative-tim-ui .claude/skills/creative-tim-ui

Una vez instalado, el skill está disponible como /creative-tim-ui en cualquier sesión de Claude Code dentro de ese proyecto.

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community