skills.rest
ChoreShore
ChoreShoreOFFICIAL
Explore all skills by this author →
GitHub

layout-primitives

Create composable layout primitives with CSS variables for breakpoint-free responsive interfaces.

Updated Feb 10, 2026
Search Tags:#layout#react#css#responsive#tailwind#design-systems#every-layout
One-click install
npx skills add https://github.com/ChoreShore/Version1 --skill layout-primitives-choreshore
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: layout-primitives
Source: https://github.com/ChoreShore/Version1/tree/main/.windsurf/skills/layout-primitives
Command: npx skills add https://github.com/ChoreShore/Version1 --skill layout-primitives-choreshore

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many layouts become brittle and verbose when relying on repeated flex/grid patterns and breakpoint-driven media queries; this skill provides composable primitives that express spacing, alignment, and intrinsic responsiveness so interfaces adapt naturally without bespoke breakpoint logic.

Core Features & Use Cases

  • Composable primitives (Stack, Cluster, Grid, Sidebar, Switcher, Center, Cover, Frame, Reel, Box) that encapsulate common layout intent and spacing.
  • Implementation-ready CSS patterns, React component examples, and Tailwind integration notes to plug into design systems and component libraries.
  • Use Case: Create a content-heavy page with a responsive grid of cards and a sidebar that stacks on narrow containers without adding media queries by composing Grid, Stack, and Sidebar primitives.

Quick Start

Compose a page using Stack, Center, and Grid primitives to create a responsive layout that adapts without adding media queries.

Frequently Asked Questions about layout-primitives

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create responsive React layouts without using media queries?▼

You can create responsive React layouts without media queries by using composable primitives like Stack, Grid, and Sidebar that rely on intrinsic spacing, container-aware switching, and gap-driven composition to adapt naturally to available space.

What is the best way to build composable layout components for a design system?▼

Building composable layout components for a design system is best achieved with primitives that encapsulate common layout intent, using reusable CSS variables and predictable props for spacing and alignment to ensure consistent, adaptive interfaces.

Can I integrate these responsive layout primitives with Tailwind CSS?▼

Yes, you can integrate these responsive layout primitives with Tailwind CSS by applying the provided Tailwind integration notes and CSS patterns to plug gap-driven composition directly into your existing design systems and component libraries.

How do I make a sidebar stack vertically on narrow containers without breakpoint logic?▼

To make a sidebar stack vertically on narrow containers without breakpoint logic, compose the Sidebar and Stack primitives to enable container-aware switching that adapts layout intrinsically based on available width.

Why do my flex and grid layouts become brittle when relying on repeated patterns?▼

Flex and grid layouts become brittle and verbose when relying on repeated patterns and breakpoint-driven media queries because they lack intrinsic responsiveness, requiring bespoke logic that composable primitives solve through gap-driven composition.

Related Skills

Explore More Design & Creative Skills→
wredziowredzio

tailwind-v4-shadcn

Configure Tailwind v4 theming with shadcn/ui in React + Vite projects.

Community
Advanced
LiinkiingLiinkiing
6

responsive-design

Apply container queries, fluid typography, and grid/flex layouts to adapt interfaces across devices.

Community
Basic
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
yusufcmgyusufcmg
1

responsive-design

Implement responsive web design with container queries, fluid typography, and CSS Grid/Flexbox.

Community
Intermediate