Habilidades tailwind-v4-shadcn
📦

tailwind-v4-shadcn

Revisión del contenido r1 Seguro ⚡ Contiene scripts📁 Acceso al sistema de archivos⚙️ Comandos externos🌐 Acceso a red

Configura Tailwind v4 con shadcn/ui

La configuración de Tailwind v4 y shadcn/ui puede fallar porque v4 cambia la gestión de la configuración, los plugins y los temas. Esta habilidad guía a Claude, Codex o Claude Code mediante plantillas probadas y pasos de solución de problemas.

Compatible con: Claude Codex Code(CC)
🥉 78 Bronce

Instalar con mi Agente

Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.

Solicitud de agente
Review the Skillstore skill "tailwind-v4-shadcn" from https://skillstore.io/skills/jezweb-tailwind-v4-shadcn.md and its manifest at https://skillstore.io/api/skills/jezweb-tailwind-v4-shadcn/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.

Recursos legibles por agentes

Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.

Detalle Markdown GET /skills/jezweb-tailwind-v4-shadcn.md Manifest firmado GET /api/skills/jezweb-tailwind-v4-shadcn/manifest Lockfile firmado GET /api/skills/jezweb-tailwind-v4-shadcn/lockfile

Pruébalo

Usando "tailwind-v4-shadcn". Configura Tailwind v4 y shadcn/ui en un proyecto Vite React nuevo.

Resultado esperado:

  • Una lista de verificación de configuración con instalaciones de paquetes, configuración del plugin de Vite, actualizaciones de la configuración de shadcn y plantillas de archivos.
  • Una nota para confirmar los comandos del gestor de paquetes antes de ejecutarlos.
  • Pasos de verificación para colores semánticos y modo oscuro.

Usando "tailwind-v4-shadcn". bg-primary no aplica estilos después de actualizar a Tailwind v4.

Resultado esperado:

  • Diagnóstico de que faltan utilidades semánticas porque las variables de tema no se mapearon.
  • Cambios recomendados de variables CSS y mapeo de @theme.
  • Una comprobación de seguimiento para detectar envolturas hsl duplicadas y capas base mal ubicadas.

Usando "tailwind-v4-shadcn". Migra una app Tailwind v3 que usa colores basados en configuración y plugins de animación.

Resultado esperado:

  • Una secuencia de migración que elimina el uso de configuración heredada, actualiza plugins y mueve tokens de tema a CSS.
  • Una lista de riesgos para regresiones visuales, conflictos de PostCSS y uso de @apply.
  • Un plan de pruebas que cubre modo claro, modo oscuro y componentes de shadcn.

Auditoría de seguridad

Seguro
v4 • 5/7/2026 Abrir el informe versionado

Static analysis flagged many patterns, but review found documentation snippets, setup examples, source links, and normal configuration values. No prompt injection, malware intent, credential access, or data exfiltration behavior was found. The remaining operational risk is ordinary package installation and file changes when a user applies the setup guidance.

14
Archivos escaneados
2,735
Líneas analizadas
0
Elementos de revisión
0
Falsos positivos ignorados

Factores de riesgo

⚡ Contiene scripts (4)
README.md:67 rules/tailwind-v4-shadcn.md:56 SKILL.md:460 SKILL.md:538
📁 Acceso al sistema de archivos (6)
README.md:94 README.md:164 README.md:94 README.md:164 references/common-gotchas.md:204 templates/tsconfig.app.json:3
⚙️ Comandos externos (140)
references/architecture.md:82-89 references/common-gotchas.md:266-267 SKILL.md:21-29 SKILL.md:29-32 SKILL.md:32-42 SKILL.md:42-45 SKILL.md:45-54 SKILL.md:54-64 SKILL.md:64-82 SKILL.md:82-84 SKILL.md:84 SKILL.md:88-95 SKILL.md:95-97 SKILL.md:97 SKILL.md:101-108 SKILL.md:108-110 SKILL.md:110-114 SKILL.md:114-118 SKILL.md:118-124 SKILL.md:124-127 SKILL.md:127-136 SKILL.md:136-139 SKILL.md:139-141 SKILL.md:141-143 SKILL.md:143-151 SKILL.md:151 SKILL.md:152-153 SKILL.md:153-154 SKILL.md:154-155 SKILL.md:155-159 SKILL.md:159 SKILL.md:160-161 SKILL.md:161-162 SKILL.md:162-163 SKILL.md:163-164 SKILL.md:164-165 SKILL.md:165 SKILL.md:166-178 SKILL.md:178-181 SKILL.md:181-191 SKILL.md:191-197 SKILL.md:197-199 SKILL.md:199-202 SKILL.md:202-209 SKILL.md:209-220 SKILL.md:220-221 SKILL.md:221-222 SKILL.md:222 SKILL.md:230-233 SKILL.md:233-242 SKILL.md:242-250 SKILL.md:250-253 SKILL.md:253-255 SKILL.md:255-257 SKILL.md:257 SKILL.md:263 SKILL.md:266-269 SKILL.md:269 SKILL.md:273-275 SKILL.md:275-290 SKILL.md:290-307 SKILL.md:307-310 SKILL.md:310 SKILL.md:312 SKILL.md:315-335 SKILL.md:335-337 SKILL.md:337-343 SKILL.md:343-349 SKILL.md:349-354 SKILL.md:354-365 SKILL.md:365-367 SKILL.md:367-368 SKILL.md:368-378 SKILL.md:378-380 SKILL.md:380-388 SKILL.md:388 SKILL.md:389 SKILL.md:390-391 SKILL.md:391-392 SKILL.md:392 SKILL.md:414-419 SKILL.md:419-422 SKILL.md:422-430 SKILL.md:430-437 SKILL.md:437-443 SKILL.md:443-446 SKILL.md:446-450 SKILL.md:450-453 SKILL.md:453-454 SKILL.md:454-460 SKILL.md:460 SKILL.md:463-465 SKILL.md:465-466 SKILL.md:466-469 SKILL.md:469-470 SKILL.md:470-472 SKILL.md:472-475 SKILL.md:475-477 SKILL.md:477-478 SKILL.md:478-481 SKILL.md:481-484 SKILL.md:484-488 SKILL.md:488-491 SKILL.md:491-497 SKILL.md:497-503 SKILL.md:503-504 SKILL.md:504 SKILL.md:505 SKILL.md:506-507 SKILL.md:507-508 SKILL.md:508 SKILL.md:509-510 SKILL.md:510-511 SKILL.md:511-519 SKILL.md:519-525 SKILL.md:525-531 SKILL.md:531-534 SKILL.md:534-535 SKILL.md:535-536 SKILL.md:536 SKILL.md:537 SKILL.md:538 SKILL.md:544-560 SKILL.md:560 SKILL.md:567-569 SKILL.md:569-570 SKILL.md:570-573 SKILL.md:573-574 SKILL.md:574-578 SKILL.md:578-581 SKILL.md:581-589 SKILL.md:589-593 SKILL.md:593-597 SKILL.md:597-610 SKILL.md:610-614 SKILL.md:614 SKILL.md:615-624 SKILL.md:624-625 SKILL.md:625-627 SKILL.md:627-636
🌐 Acceso a red (18)
SKILL.md:12 SKILL.md:165 SKILL.md:166 SKILL.md:264 SKILL.md:308 SKILL.md:344 SKILL.md:401 SKILL.md:545 SKILL.md:557 SKILL.md:594 SKILL.md:622 SKILL.md:651 SKILL.md:652 SKILL.md:653 SKILL.md:660 templates/components.json:2 templates/index.css:5 templates/vite.config.ts:6
La auditoría estática y semántica completada más reciente no detectó hallazgos de seguridad confirmados. Esto no demuestra que el skill no tenga efectos secundarios.
Auditado por: codex Ver historial de auditorías →
Compartir y citar este informe

Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.

Abrir el informe versionado
Evaluación de seguridad

Copiar enlace del informe

https://skillstore.io/skills/jezweb-tailwind-v4-shadcn/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Insignia Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/jezweb-tailwind-v4-shadcn/security.svg)](https://skillstore.io/skills/jezweb-tailwind-v4-shadcn?utm_source=security_passport_badge)

Insignia HTML

<a href="https://skillstore.io/skills/jezweb-tailwind-v4-shadcn?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/jezweb-tailwind-v4-shadcn/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Tarjeta para insertar

<iframe src="https://skillstore.io/embed/skills/jezweb-tailwind-v4-shadcn.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
Citas académicas (APA · BibTeX · CFF)

Cita APA

jezweb. (2026). tailwind-v4-shadcn security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/jezweb-tailwind-v4-shadcn/audits/4

Cita BibTeX

@techreport{jezweb-jezweb-tailwind-v4-shadcn-2026, author = {jezweb}, title = {tailwind-v4-shadcn security audit report (audit version 4)}, institution = {Skillstore}, year = {2026}, number = {4}, url = {https://skillstore.io/skills/jezweb-tailwind-v4-shadcn/audits/4}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "tailwind-v4-shadcn security audit report (audit version 4)" version: "unspecified" type: report authors: - name: "jezweb" date-released: "2026-07-05" url: "https://skillstore.io/skills/jezweb-tailwind-v4-shadcn/audits/4" identifiers: - type: other value: "skillstore:jezweb-tailwind-v4-shadcn:audit:4" description: "Skillstore immutable audit report identifier"

Puntuación de Skillstore

Por qué esta puntuación Confianza de la evidencia: Alto
59
Arquitectura
85
Mantenibilidad
85
Contenido
70
Comunidad
78
Cumplimiento de la especificación

Lo que puedes crear

Iniciar una UI con Vite React

Crea un nuevo proyecto Vite React con Tailwind v4, shadcn/ui, alias de rutas y soporte para modo oscuro.

Corregir problemas de tema

Resuelve utilidades bg-primary rotas, capas base duplicadas, fallos del modo oscuro y errores de importación de animaciones.

Migrar desde Tailwind v3

Mueve la configuración del tema desde archivos de configuración a variables CSS y actualiza plugins para Tailwind v4.

Prueba estos prompts

Crear una nueva configuración 
Configura Tailwind v4 con shadcn/ui en mi proyecto Vite React. Usa las plantillas de la habilidad y explica cada cambio de archivo antes de aplicarlo.
Añadir a un proyecto existente 
Revisa mi proyecto Vite React existente y añade Tailwind v4 con shadcn/ui. Conserva el código actual de la app y enumera primero cualquier archivo en conflicto.
Depurar fallos de tema 
Usa la guía de Tailwind v4 y shadcn para diagnosticar por qué mis colores semánticos o el modo oscuro no funcionan. Muestra la causa probable y un plan de corrección.
Planificar una migración desde v3 
Audita mi configuración de Tailwind v3 y crea un plan de migración para Tailwind v4 y shadcn/ui. Incluye riesgos, cambios de archivos y pasos de verificación.

Mejores prácticas

  • Confirma el framework, el gestor de paquetes y la versión de Tailwind antes de aplicar los pasos de configuración.
  • Compara las plantillas con los archivos existentes antes de reemplazar la configuración del proyecto.
  • Prueba un componente de shadcn, colores semánticos y el cambio entre tema claro u oscuro después de los cambios.

Evitar

  • No uses esta habilidad sin cambios para Tailwind v3, Next.js o proyectos que no sean React.
  • No elimines la configuración existente de Tailwind antes de comprobar si hay personalizaciones de tema específicas del proyecto.
  • No mezcles la configuración de PostCSS y el plugin de Vite a menos que el proyecto requiera ambos.

Preguntas frecuentes

¿Qué stack admite esta habilidad?
Está dirigida a proyectos Vite React que usan Tailwind CSS v4 y shadcn/ui.
¿Incluye soporte para modo oscuro?
Sí. Incluye un patrón ThemeProvider con opciones de tema claro, oscuro y del sistema.
¿Puedo usarla con Next.js?
No directamente. La guía está centrada en Vite y debe adaptarse para Next.js.
¿Qué plantillas se incluyen?
Incluye plantillas de CSS, configuración de shadcn, configuración de Vite, ThemeProvider, alias de TypeScript y utilidades.
¿La habilidad ejecuta comandos automáticamente?
No. Proporciona comandos de configuración y debe pedir confirmación antes de instalaciones de paquetes o cambios de archivos.
¿Qué debo revisar antes de usarla?
Revisa instalaciones de paquetes, reemplazos de archivos, personalizaciones de tema existentes y necesidades de migración específicas del proyecto.

Detalles del desarrollador

Autor

jezweb

Licencia

MIT

Revisión de Skillstore

r1

Aviso de versión

El autor no declaró una versión.

Repositorio

https://github.com/jezweb/claude-skills/tree/main/skills/tailwind-v4-shadcn/

Ref.

a25199bc7d6b82598536822d1738eb5d5f54025b

Actualidad del mantenimiento

18/7/2026

Uso

10 descargas · 173 vistas

Estructura de archivos

📁 commands/

📄 setup.md

📁 references/

📄 architecture.md

📄 common-gotchas.md

📄 dark-mode.md

📄 migration-guide.md

📁 rules/

📄 tailwind-v4-shadcn.md

📁 templates/

📄 components.json

📄 index.css

📄 theme-provider.tsx

📄 tsconfig.app.json

📄 utils.ts

📄 vite.config.ts

📄 README.md

📄 SKILL.md