·layout-system
</>

layout-system

sanky369/vibe-building-skills

Domine el diseño de diseño responsivo utilizando CSS moderno (Flexbox, Grid), enfoque móvil primero y estrategias de punto de interrupción. Cree diseños que se adapten perfectamente a todos los dispositivos manteniendo la accesibilidad y el rendimiento. Incluye consultas de contenedores, relaciones de aspecto y patrones de respuesta avanzados.

17Instalaciones·2Tendencia·@sanky369

Instalación

$npx skills add https://github.com/sanky369/vibe-building-skills --skill layout-system

SKILL.md

Layout is the skeleton of your interface. It determines how content is organized, how users navigate, and how the experience adapts across devices. A well-designed layout system is invisible—users don't notice it because it works so well.

This skill teaches you to think about layout systematically, using modern CSS techniques (Flexbox, Grid, Container Queries) and a mobile-first approach that ensures your product works beautifully everywhere.

The mobile-first approach is not just about making things smaller on mobile. It's a fundamental shift in thinking: start with the simplest, most constrained context (mobile), then progressively enhance for larger screens.

Domine el diseño de diseño responsivo utilizando CSS moderno (Flexbox, Grid), enfoque móvil primero y estrategias de punto de interrupción. Cree diseños que se adapten perfectamente a todos los dispositivos manteniendo la accesibilidad y el rendimiento. Incluye consultas de contenedores, relaciones de aspecto y patrones de respuesta avanzados. Fuente: sanky369/vibe-building-skills.

Ver original

Datos (listos para citar)

Campos y comandos estables para citas de IA/búsqueda.

Comando de instalación
npx skills add https://github.com/sanky369/vibe-building-skills --skill layout-system
Categoría
</>Desarrollo
Verificado
Primera vez visto
2026-02-01
Actualizado
2026-02-18

Respuestas rápidas

¿Qué es layout-system?

Domine el diseño de diseño responsivo utilizando CSS moderno (Flexbox, Grid), enfoque móvil primero y estrategias de punto de interrupción. Cree diseños que se adapten perfectamente a todos los dispositivos manteniendo la accesibilidad y el rendimiento. Incluye consultas de contenedores, relaciones de aspecto y patrones de respuesta avanzados. Fuente: sanky369/vibe-building-skills.

¿Cómo instalo layout-system?

Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/sanky369/vibe-building-skills --skill layout-system Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor

¿Dónde está el repositorio de origen?

https://github.com/sanky369/vibe-building-skills