¿Qué hace shadcn-first?
Alguien mantiene este código después de ti. Cada div escrito a mano con clases
personalizadas y cada style={{}} es algo que esa persona debe mantener vivo, y se
desvía. La UI hecha a mano también pierde silenciosamente la artesanía que viene
gratis con la biblioteca: anillos de foco, estados hover y active, navegación por
teclado, esqueletos, estados vacíos, ARIA.
El orden. Nunca te saltes un paso.
- Bloque.
ui.shadcn.com/blockstiene barras laterales completas, paneles de control, inicios de sesión, tablas de datos. Instala el bloque. - Componente. Si ningún bloque encaja, usa un componente del registro.
- Componer. Dos o tres componentes.
- Escríbelo tú mismo. Solo aquí, y el mensaje del commit debe nombrar qué bloque o componente evaluaste y por qué no encajaba.
Adapta el diseño al componente, no el componente al diseño. La marca y el lenguaje visual se alcanzan mediante variables de tema en un solo tema, nunca CSS por pantalla al lado del componente.
Herramientas y cuáles usar
Dos servidores MCP están configurados. Hacen trabajos distintos.
shadcn-official (npx shadcn@latest mcp) es consciente del proyecto: lee el
components.json del repositorio. Úsalo para el trabajo real.
| Herramienta | Úsala para |
|---|---|
get_project_registries | confirmar que el proyecto está inicializado |
search_items_in_registries | encontrar el componente adecuado, búsqueda difusa |
list_items_in_registries | ver todo lo disponible |
view_items_in_registries | leer el código fuente y las dependencias de un componente antes de usarlo |
get_item_examples_from_registries | copiar un ejemplo de uso real en lugar de adivinar la API |
get_add_command_for_items | obtener la línea exacta de npx shadcn add …, luego ejecutarla |
get_audit_checklist | ejecutar después de escribir código. Esta es la puerta de entrada. |
shadcn (@jpisnice/shadcn-ui-mcp-server) es de ámbito global y conoce
bloques y temas: list_blocks, get_block, list_themes, get_theme,
get_component_demo. Úsalo para el paso 1 y para la tematización.
Si un proyecto no tiene components.json, las herramientas oficiales dan error.
Ejecuta npx shadcn@latest init primero y luego continúa.
Para superficies de chat de IA usa prompt-kit (prompt-kit.com, compatible con
shadcn): chat-container, message, prompt-input, scroll-button, markdown,
code-block, loader. Misma regla: instalar en lugar de reconstruir.
Componentes que la gente reinventa en lugar de instalar
sidebar (plegable, con menú de usuario en el pie), command (paleta Cmd+K),
table + bloque de tabla de datos con TanStack, tabs, sheet, dialog,
alert-dialog, popover, tooltip, skeleton, sonner (notificaciones),
form (react-hook-form + zod), breadcrumb, resizable, scroll-area,
avatar, badge, separator, dropdown-menu, select, collapsible,
chart.
Si te sorprendes a ti mismo construyendo alguno de estos a mano, detente e instálalo.
Atajos de teclado
Usa Cmd+K para la paleta de comandos; esa es la convención cmdk que el
componente command trae incorporada. Cmd+L está reservado por el navegador
para la barra de direcciones y no se puede interceptar de manera confiable en
Chrome. Si alguien pide Cmd+L, vincula Cmd+K, agrega Cmd+L de forma oportunista y
explica por qué.
Hecho significa medido, no afirmado
Antes de reportar como hecho, ejecuta get_audit_checklist e informa los
números:
- líneas de UI personalizada eliminadas
- bloques y componentes instalados
- ocurrencias restantes de
style={{}}(grep -rc 'style={{' src/) - por pantalla: elementos de
components/ui/vs escritos a mano
Cualquier cosa que aún esté escrita a mano debe estar allí con una razón expuesta, no pasada por alto. Una captura de pantalla es la prueba de que la pantalla se renderiza; los recuentos son la prueba de que se siguió la regla. Ambos, o no está hecho.
No hagas
- Sin emojis en la interfaz. Iconos SVG reales (Lucide viene con shadcn).
- Sin texto en círculos para logotipos de marca. Obtén rutas SVG reales: SimpleIcons > svgl.app > gilbarbara/logos > favicon.
- Máximo uno o dos colores de acento. Sin bordes izquierdos de colores en tarjetas. Sin degradado en cada elemento.
- No bifurques un componente para cambiar un color. Cambia la variable de tema.