Crear UI accesibles con Tailwind y shadcn
Los equipos necesitan una guía de interfaz coherente que cubra componentes, estilos, accesibilidad y comportamiento responsive. Esta skill proporciona referencias de shadcn/ui, Tailwind CSS y diseño visual para flujos de trabajo de Claude, Codex y Claude Code.
Detente y solicita confirmación antes de instalar.
Revisa el plan y obtén el consentimiento explícito del usuario antes de modificar archivos.
Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.
Review the Skillstore skill "ckm-ui-styling" from https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling.md and its manifest at https://skillstore.io/api/skills/nextlevelbuilder-ckm-ui-styling/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.
Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.
Usando "ckm-ui-styling". Una página de configuración necesita tarjetas responsive, modo oscuro y acciones de formulario claras.
Resultado esperado:
Usando "ckm-ui-styling". Un diálogo existente no pasa la revisión de teclado y lectores de pantalla.
Resultado esperado:
Usando "ckm-ui-styling". Un equipo quiere tokens de Tailwind coherentes en todas las páginas de producto.
Resultado esperado:
Most static hits are false positives in documentation, license text, tests, and coverage data. Real issues remain around unpinned npx execution in a helper script and numerous bundled binary font assets that need manual verification.
Estas son capacidades locales reales que pueden esperarse para esta habilidad, por lo que requieren revisión, pero no se cuentan como comportamiento malicioso confirmado.
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.
https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/nextlevelbuilder-ckm-ui-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/nextlevelbuilder-ckm-ui-styling.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>nextlevelbuilder. (2026). ckm-ui-styling security audit report (audit version 4) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4@techreport{nextlevelbuilder-nextlevelbuilder-ckm-ui-styling-2026,
author = {nextlevelbuilder},
title = {ckm-ui-styling security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4},
note = {Author version 1.0.0}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ckm-ui-styling security audit report (audit version 4)"
version: "1.0.0"
type: report
authors:
- name: "nextlevelbuilder"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4"
identifiers:
- type: other
value: "skillstore:nextlevelbuilder-ckm-ui-styling:audit:4"
description: "Skillstore immutable audit report identifier"
Crear una página mobile-first usando tarjetas, formularios y diálogos de shadcn, además de reglas de espaciado de Tailwind.
Definir tokens, comportamiento de modo oscuro, variantes de componentes y estados de interacción accesibles para un sistema de UI compartido.
Revisar la gestión del foco, el comportamiento del teclado, errores de formulario, contraste de color y anuncios para lectores de pantalla.
Usa ckm-ui-styling para dar estilo a un botón y una tarjeta shadcn responsive para una pantalla de registro simple.
Crea un diálogo de configuración accesible con navegación por teclado, estados de foco, mensajes de formulario y estilos de modo oscuro de Tailwind.
Define un tema de Tailwind y shadcn para un panel financiero, incluidos tokens, variantes y orientación de layout responsive.
Revisa esta UI React en cuanto a accesibilidad, coherencia de layout, modo oscuro y composición con shadcn. Proporciona cambios precisos y pasos de validación.
Autor
nextlevelbuilderLicencia
MIT
Versión del autor
v1.0.0
Revisión de Skillstore
r1
Repositorio
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-styling/Ref.
62e2a730c5cd74eab4c7164309d810de660fcea3
Actualidad del mantenimiento
18/7/2026
Uso
8 descargas · 15 vistas
Estructura de archivos
Build Accessible Tailwind Interfaces
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
Build Consistent Design Systems and Slides
Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.
Create Strategic HTML Presentations
Building persuasive, responsive presentations requires coordinated structure, design, copy, and data visualization. This skill turns a topic and audience brief into a complete HTML deck.
Mejorar los flujos de trabajo de diseño UI y UX
El trabajo de interfaces a menudo necesita estilo consistente, accesibilidad y orientación específica para el stack. Esta habilidad proporciona a Claude, Codex y Claude Code una referencia UI/UX consultable para planificar, crear y revisar diseños.
Crear directrices de marca y flujos de trabajo de activos
El trabajo de marca a menudo se desvía entre voz, elementos visuales, activos y design tokens. Esta skill ayuda a Claude, Codex y Claude Code a crear, revisar y aplicar sistemas de marca coherentes.
Build consistent brand guidelines and assets
Brand work can become inconsistent across content, assets, and interfaces. This skill provides structured guidance, validation, and token synchronization to keep brand decisions aligned.
Auditar la accesibilidad web para el cumplimiento de WCAG
por 89jobrien
Las brechas de accesibilidad pueden bloquear a los usuarios y crear riesgos de cumplimiento. Esta habilidad guía auditorías WCAG, comprobaciones con lectores de pantalla, pruebas de teclado y planificación de remediación.
Planificar la UX antes de construir
por pbakaus
Los equipos a menudo construyen interfaces antes de aclarar los objetivos, estados y restricciones del usuario. Esta skill guía el descubrimiento y produce un brief de diseño para la implementación.
Mejora la UX con orientación de diseño basada en investigación
por shubhamsaboo
Los equipos suelen diseñar flujos a partir de suposiciones y pasan por alto problemas de accesibilidad. Esta skill guía la investigación, la estructura, el diseño de interacción y la revisión usando mejores prácticas de UX.
Diseñar prototipos de UI distintivos
por tencentcloudbase
Las interfaces de IA genéricas a menudo carecen de dirección visual y de detalles adaptados a la plataforma. Esta habilidad guía a Claude, Codex y Claude Code para definir la intención de diseño antes de crear prototipos.
Check designs with deterministic CSS rules
por cubha
Design reviews can vary between reviewers and slow down delivery. This skill applies repeatable checks to HTML and CSS so teams can catch token, layout, and accessibility issues before release.
Crear interfaces shadcn/ui en Next.js
por Asmayaseen
Los equipos de React necesitan patrones de UI coherentes que funcionen con Next.js moderno. Esta skill proporciona orientación para configurar shadcn/ui, ejemplos de componentes, validación de formularios, tablas, barras laterales y patrones de modo oscuro.