# Ui Styling

> Crea interfaces bellas y accesibles con componentes shadcn/ui (sobre Radix UI + Tailwind), estilos utility-first de Tailwind CSS y diseños visuales basados en canvas.

Fuente: https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-styling
Markdown: https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-styling.md

Repositorio: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
Autor: nextlevelbuilder
Licencia: MIT
Actualizado: hace 23 días
Coste de contexto: 122 tok instalada, 2.7k tok al activarse, 1438.9k tok con todos los archivos del bundle
Bundle: 98 archivos, 5.5 MB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling --agent claude-code
# Cursor
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling --agent cursor
# Codex
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling --agent codex
# Gemini CLI
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling --agent gemini
# Windsurf
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling --agent windsurf
# Cline
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling --agent cline
```

## Qué hace

- Instala y compone componentes shadcn/ui (basados en Radix UI) junto con estilos Tailwind CSS
- Configura temas, modo oscuro y tokens de diseño consistentes
- Genera layouts responsive mobile-first con utilidades Tailwind
- Aplica patrones de accesibilidad (ARIA, navegación por teclado, foco)
- Crea diseños visuales sofisticados basados en canvas con enfoque minimalista

## Cuándo usarla

- Construir interfaces con frameworks React (Next.js, Vite, Remix, Astro)
- Implementar componentes accesibles como diálogos, formularios y tablas
- Crear layouts responsive y sistemas de diseño con tokens consistentes
- Generar diseños visuales, pósters o materiales de marca

## Qué la activa

- "Crea un formulario de login con validación usando shadcn/ui y Tailwind"
- "Necesito implementar modo oscuro en mi aplicación Next.js"
- "Genera un dashboard responsive con tarjetas y gráficos"
- "Diseña un póster visual minimalista para mi marca"

## Antes de instalar

- Requiere un proyecto React (Next.js, Vite, Remix o Astro) y Node.js/Python para ejecutar los scripts de instalación y configuración.
- Necesita en el PATH: npm, npx, python
- makes network requests

## Archivos

- LICENSE.txt — 11 KB
- SKILL.md — 10 KB
- canvas-fonts/ArsenalSC-OFL.txt — 4 KB
- canvas-fonts/ArsenalSC-Regular.ttf — 162 KB
- canvas-fonts/BigShoulders-Bold.ttf — 92 KB
- canvas-fonts/BigShoulders-OFL.txt — 4 KB
- canvas-fonts/BigShoulders-Regular.ttf — 92 KB
- canvas-fonts/Boldonse-OFL.txt — 4 KB
- canvas-fonts/Boldonse-Regular.ttf — 75 KB
- canvas-fonts/BricolageGrotesque-Bold.ttf — 89 KB
- canvas-fonts/BricolageGrotesque-OFL.txt — 4 KB
- canvas-fonts/BricolageGrotesque-Regular.ttf — 89 KB
- canvas-fonts/CrimsonPro-Bold.ttf — 105 KB
- canvas-fonts/CrimsonPro-Italic.ttf — 106 KB
- canvas-fonts/CrimsonPro-OFL.txt — 4 KB
- canvas-fonts/CrimsonPro-Regular.ttf — 104 KB
- canvas-fonts/DMMono-OFL.txt — 4 KB
- canvas-fonts/DMMono-Regular.ttf — 48 KB
- canvas-fonts/EricaOne-OFL.txt — 4 KB
- canvas-fonts/EricaOne-Regular.ttf — 24 KB
- canvas-fonts/GeistMono-Bold.ttf — 76 KB
- canvas-fonts/GeistMono-OFL.txt — 4 KB
- canvas-fonts/GeistMono-Regular.ttf — 76 KB
- canvas-fonts/Gloock-OFL.txt — 4 KB
- canvas-fonts/Gloock-Regular.ttf — 93 KB
- canvas-fonts/IBMPlexMono-Bold.ttf — 133 KB
- canvas-fonts/IBMPlexMono-OFL.txt — 4 KB
- canvas-fonts/IBMPlexMono-Regular.ttf — 131 KB
- canvas-fonts/IBMPlexSerif-Bold.ttf — 157 KB
- canvas-fonts/IBMPlexSerif-BoldItalic.ttf — 166 KB
- canvas-fonts/IBMPlexSerif-Italic.ttf — 166 KB
- canvas-fonts/IBMPlexSerif-Regular.ttf — 157 KB
- canvas-fonts/InstrumentSans-Bold.ttf — 66 KB
- canvas-fonts/InstrumentSans-BoldItalic.ttf — 68 KB
- canvas-fonts/InstrumentSans-Italic.ttf — 68 KB
- canvas-fonts/InstrumentSans-OFL.txt — 4 KB
- canvas-fonts/InstrumentSans-Regular.ttf — 66 KB
- canvas-fonts/InstrumentSerif-Italic.ttf — 69 KB
- canvas-fonts/InstrumentSerif-Regular.ttf — 68 KB
- canvas-fonts/Italiana-OFL.txt — 4 KB
- canvas-fonts/Italiana-Regular.ttf — 27 KB
- canvas-fonts/JetBrainsMono-Bold.ttf — 112 KB
- canvas-fonts/JetBrainsMono-OFL.txt — 4 KB
- canvas-fonts/JetBrainsMono-Regular.ttf — 112 KB
- canvas-fonts/Jura-Light.ttf — 151 KB
- canvas-fonts/Jura-Medium.ttf — 151 KB
- canvas-fonts/Jura-OFL.txt — 4 KB
- canvas-fonts/LibreBaskerville-OFL.txt — 4 KB
- canvas-fonts/LibreBaskerville-Regular.ttf — 144 KB
- canvas-fonts/Lora-Bold.ttf — 131 KB
- canvas-fonts/Lora-BoldItalic.ttf — 137 KB
- canvas-fonts/Lora-Italic.ttf — 136 KB
- canvas-fonts/Lora-OFL.txt — 4 KB
- canvas-fonts/Lora-Regular.ttf — 131 KB
- canvas-fonts/NationalPark-Bold.ttf — 77 KB
- canvas-fonts/NationalPark-OFL.txt — 4 KB
- canvas-fonts/NationalPark-Regular.ttf — 75 KB
- canvas-fonts/NothingYouCouldDo-OFL.txt — 4 KB
- canvas-fonts/NothingYouCouldDo-Regular.ttf — 31 KB
- canvas-fonts/Outfit-Bold.ttf — 54 KB
- canvas-fonts/Outfit-OFL.txt — 4 KB
- canvas-fonts/Outfit-Regular.ttf — 54 KB
- canvas-fonts/PixelifySans-Medium.ttf — 50 KB
- canvas-fonts/PixelifySans-OFL.txt — 4 KB
- canvas-fonts/PoiretOne-OFL.txt — 4 KB
- canvas-fonts/PoiretOne-Regular.ttf — 44 KB
- canvas-fonts/RedHatMono-Bold.ttf — 34 KB
- canvas-fonts/RedHatMono-OFL.txt — 4 KB
- canvas-fonts/RedHatMono-Regular.ttf — 34 KB
- canvas-fonts/Silkscreen-OFL.txt — 4 KB
- canvas-fonts/Silkscreen-Regular.ttf — 31 KB
- canvas-fonts/SmoochSans-Medium.ttf — 58 KB
- canvas-fonts/SmoochSans-OFL.txt — 4 KB
- canvas-fonts/Tektur-Medium.ttf — 74 KB
- canvas-fonts/Tektur-OFL.txt — 4 KB
- canvas-fonts/Tektur-Regular.ttf — 74 KB
- canvas-fonts/WorkSans-Bold.ttf — 187 KB
- canvas-fonts/WorkSans-BoldItalic.ttf — 172 KB
- canvas-fonts/WorkSans-Italic.ttf — 170 KB
- canvas-fonts/WorkSans-OFL.txt — 4 KB
- canvas-fonts/WorkSans-Regular.ttf — 184 KB
- canvas-fonts/YoungSerif-OFL.txt — 4 KB
- canvas-fonts/YoungSerif-Regular.ttf — 103 KB
- references/canvas-design-system.md — 8 KB
- references/shadcn-accessibility.md — 10 KB
- references/shadcn-components.md — 11 KB
- references/shadcn-theming.md — 8 KB
- references/tailwind-customization.md — 10 KB
- references/tailwind-responsive.md — 8 KB
- references/tailwind-utilities.md — 10 KB
- scripts/.coverage — 52 KB
- scripts/requirements.txt — 444 B
- scripts/shadcn_add.py — 9 KB
- scripts/tailwind_config_gen.py — 14 KB
- scripts/tests/coverage-ui.json — 34 KB
- scripts/tests/requirements.txt — 52 B
- scripts/tests/test_shadcn_add.py — 10 KB
- scripts/tests/test_tailwind_config_gen.py — 14 KB

## SKILL.md

Reproducido tal cual desde nextlevelbuilder/ui-ux-pro-max-skill bajo MIT. Esta sección es el documento original y está en inglés.

# UI Styling Skill

Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.

## Reference

- shadcn/ui: https://ui.shadcn.com/llms.txt
- Tailwind CSS: https://tailwindcss.com/docs

## When to Use This Skill

Use when:
- Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)
- Implementing accessible components (dialogs, forms, tables, navigation)
- Styling with utility-first CSS approach
- Creating responsive, mobile-first layouts
- Implementing dark mode and theme customization
- Building design systems with consistent tokens
- Generating visual designs, posters, or brand materials
- Rapid prototyping with immediate visual feedback
- Adding complex UI patterns (data tables, charts, command palettes)

## Core Stack

### Component Layer: shadcn/ui
- Pre-built accessible components via Radix UI primitives
- Copy-paste distribution model (components live in your codebase)
- TypeScript-first with full type safety
- Composable primitives for complex UIs
- CLI-based installation and management

### Styling Layer: Tailwind CSS
- Utility-first CSS framework
- Build-time processing with zero runtime overhead
- Mobile-first responsive design
- Consistent design tokens (colors, spacing, typography)
- Automatic dead code elimination

### Visual Design Layer: Canvas
- Museum-quality visual compositions
- Philosophy-driven design approach
- Sophisticated visual communication
- Minimal text, maximum visual impact
- Systematic patterns and refined aesthetics

## Script Paths

Script paths in this skill and its `references/` are relative to the directory that contains this SKILL.md, not to the project: `scripts/<file>` is this skill's own `scripts/` folder, and `../<skill>/scripts/<file>` is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as `docs/brand-guidelines.md`, `assets/design-tokens.json` or `src/` relative to it.

## Quick Start

### Component + Styling Setup

**Install shadcn/ui with Tailwind:**
```bash
npx shadcn@latest init
```

CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.

**Add components:**
```bash
npx shadcn@latest add button card dialog form
```

**Use components with utility styling:**
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function Dashboard() {
  return (
    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">View your metrics</p>
          <Button variant="default" className="w-full">
            View Details
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}
```

### Alternative: Tailwind-Only Setup

**Vite projects:**
```bash
npm install -D tailwindcss @tailwindcss/vite
```

```javascript
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }
```

```css
/* src/index.css */
@import "tailwindcss";
```

## Component Library Guide

**Comprehensive component catalog with usage patterns, installation, and composition examples.**

See: `references/shadcn-components.md`

Covers:
- Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation)
- Layout & navigation (Card, Tabs, Accordion, Navigation Menu)
- Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command)
- Feedback & status (Alert, Progress, Skeleton)
- Display components (Table, Data Table, Avatar, Badge)

## Theme & Customization

**Theme configuration, CSS variables, dark mode implementation, and component customization.**

See: `references/shadcn-theming.md`

Covers:
- Dark mode setup with next-themes
- CSS variable system
- Color customization and palettes
- Component variant customization
- Theme toggle implementation

## Accessibility Patterns

**ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.**

See: `references/shadcn-accessibility.md`

Covers:
- Radix UI accessibility features
- Keyboard navigation patterns
- Focus management
- Screen reader announcements
- Form validation accessibility

## Tailwind Utilities

**Core utility classes for layout, spacing, typography, colors, borders, and shadows.**

See: `references/tailwind-utilities.md`

Covers:
- Layout utilities (Flexbox, Grid, positioning)
- Spacing system (padding, margin, gap)
- Typography (font sizes, weights, alignment, line height)
- Colors and backgrounds
- Borders and shadows
- Arbitrary values for custom styling

## Responsive Design

**Mobile-first breakpoints, responsive utilities, and adaptive layouts.**

See: `references/tailwind-responsive.md`

Covers:
- Mobile-first approach
- Breakpoint system (sm, md, lg, xl, 2xl)
- Responsive utility patterns
- Container queries
- Max-width queries
- Custom breakpoints

## Tailwind Customization

**Config file structure, custom utilities, plugins, and theme extensions.**

See: `references/tailwind-customization.md`

Covers:
- @theme directive for custom tokens
- Custom colors and fonts
- Spacing and breakpoint extensions
- Custom utility creation
- Custom variants
- Layer organization (@layer base, components, utilities)
- Apply directive for component extraction

## Visual Design System

**Canvas-based design philosophy, visual communication principles, and sophisticated compositions.**

See: `references/canvas-design-system.md`

Covers:
- Design philosophy approach
- Visual communication over text
- Systematic patterns and composition
- Color, form, and spatial design
- Minimal text integration
- Museum-quality execution
- Multi-page design systems

## Utility Scripts

**Python automation for component installation and configuration generation.**

### shadcn_add.py
Add shadcn/ui components with dependency handling:
```bash
python scripts/shadcn_add.py button card dialog
```

### tailwind_config_gen.py
Generate tailwind.config.js with custom theme:
```bash
python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
```

The generator refuses to create or replace a config when any sibling
`tailwind.config.js`, `.cjs`, `.mjs`, or `.ts` file already exists. Review the
reported config first, then pass `--force` only when the competing output is
intentional:
```bash
python scripts/tailwind_config_gen.py --colors brand:blue --force
```

## Best Practices

1. **Component Composition**: Build complex UIs from simple, composable primitives
2. **Utility-First Styling**: Use Tailwind classes directly; extract components only for true repetition
3. **Mobile-First Responsive**: Start with mobile styles, layer responsive variants
4. **Accessibility-First**: Leverage Radix UI primitives, add focus states, use semantic HTML
5. **Design Tokens**: Use consistent spacing scale, color palettes, typography system
6. **Dark Mode Consistency**: Apply dark variants to all themed elements
7. **Performance**: Leverage automatic CSS purging, avoid dynamic class names
8. **TypeScript**: Use full type safety for better DX
9. **Visual Hierarchy**: Let composition guide attention, use spacing and color intentionally
10. **Expert Craftsmanship**: Every detail matters - treat UI as a craft

## Reference Navigation

**Component Library**
- `references/shadcn-components.md` - Complete component catalog
- `references/shadcn-theming.md` - Theming and customization
- `references/shadcn-accessibility.md` - Accessibility patterns

**Styling System**
- `references/tailwind-utilities.md` - Core utility classes
- `references/tailwind-responsive.md` - Responsive design
- `references/tailwind-customization.md` - Configuration and extensions

**Visual Design**
- `references/canvas-design-system.md` - Design philosophy and canvas workflows

**Automation**
- `scripts/shadcn_add.py` - Component installation
- `scripts/tailwind_config_gen.py` - Config generation

## Common Patterns

**Form with validation:**
```tsx
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" }
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">Sign In</Button>
      </form>
    </Form>
  )
}
```

**Responsive layout with dark mode:**
```tsx
<div className="min-h-screen bg-white dark:bg-gray-900">
  <div className="container mx-auto px-4 py-8">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
        <CardContent className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
            Content
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>
```

## Resources

- shadcn/ui Docs: https://ui.shadcn.com
- Tailwind CSS Docs: https://tailwindcss.com
- Radix UI: https://radix-ui.com
- Tailwind UI: https://tailwindui.com
- Headless UI: https://headlessui.com
- v0 (AI UI Generator): https://v0.dev

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [nextlevelbuilder](https://skillsagentes.com/creators/nextlevelbuilder.md) — 7 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Ui Ux Pro Max](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max.md): Inteligencia de diseño UI/UX para web, móvil y escritorio: úsala al diseñar, construir, revisar o corregir interfaces, componentes, accesibilidad, interacción, layout y tipografía.
- [Design](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/design.md): Skill de diseño integral: identidad de marca, tokens de diseño, estilos UI, generación de logos (55 estilos, Gemini, Atlas Cloud o MuAPI), CIP, presentaciones HTML, banners, iconos y fotos sociales.
- [Brand](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/brand.md): Voz de marca, identidad visual, frameworks de mensajería y gestión de assets para contenido de marca, tono, materiales de marketing y cumplimiento de estilo.
- [Design System](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/design-system.md): Arquitectura de tokens en tres capas (primitivo→semántico→componente), variables CSS, escalas de espaciado/tipografía, specs de componentes y generación estratégica de slides con marca.
- [Slides](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/slides.md): Crea presentaciones HTML estratégicas con Chart.js, design tokens, layouts responsivos, fórmulas de copywriting y estrategias contextuales de diapositivas.

## Skills relacionadas

- [Slides](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/slides.md): Crea presentaciones HTML estratégicas con Chart.js, design tokens, layouts responsivos, fórmulas de copywriting y estrategias contextuales de diapositivas.
- [Brand](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/brand.md): Voz de marca, identidad visual, frameworks de mensajería y gestión de assets para contenido de marca, tono, materiales de marketing y cumplimiento de estilo.
- [Hig Platforms](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-platforms.md): HIG de Apple por plataforma: iOS, iPadOS, macOS, tvOS, watchOS y visionOS. No portes diseños; respeta cada modelo de interacción.
- [Hig Components Status](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-status.md): HIG de Apple para progreso y estado: progress indicators, status bars y activity rings. Cuándo usar barra determinate frente a spinner.
- [Hig Components Menus](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-menus.md): HIG de Apple para menús y botones: menu bar, toolbars, context menus, action buttons, pop-up y pull-down.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)