layout-primitives

Create reusable layout primitives with CSS flexbox, grid, and React components.

38|3|Updated Dec 29, 2025

Search Tags:#layout #react #design-system #spacing #flexbox #grid #intrinsic

Ready to run

npx skills add https://github.com/dylantarre/design-system-skills --skill layout-primitives

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: layout-primitives
Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/patterns/layout-primitives
Command: npx skills add https://github.com/dylantarre/design-system-skills --skill layout-primitives

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a library of composable layout primitives (Stack, Cluster, Grid, Sidebar, Center, Cover) to accelerate building layout systems that adapt intrinsically without breakpoints.

Core Features & Use Cases

Composable Primitives: Stack, Cluster, Sidebar, Grid, Center, Cover to compose layouts.
Intrinsic Design: Patterns adapt without media queries or breakpoints.
Guidance & Examples: Quick-reference CSS and React components for common layouts.

Quick Start

Use the layout-primitives skill to scaffold a basic responsive layout with Stack, Grid, and Center components.

Frequently Asked Questions about layout-primitives

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

FAQPage Schema

How do I build responsive React layouts without using CSS breakpoints?▼

You can build responsive React layouts without breakpoints by using intrinsic design primitives like Stack, Grid, and Cluster. These composable components rely on CSS flexbox and grid to adapt layouts automatically based on available space.

What is intrinsic layout design and how does it handle responsive UI?▼

Intrinsic layout design creates UI patterns that adapt automatically based on content and viewport size. It uses CSS flexbox and grid primitives instead of media queries, allowing components to resize and reflow without explicit breakpoint logic.

How do I create a consistent spacing system for a React component library?▼

You can create a consistent spacing system using composable layout primitives like Stack, Center, and Sidebar. These React components enforce uniform spacing patterns across your design system, ensuring visual consistency without custom CSS.

Can I use these layout primitives with an existing React design system?▼

Yes, you can integrate these layout primitives into an existing React design system. The Skill provides composable CSS and React components designed to accelerate building layout systems that adapt intrinsically within component libraries.

When should I avoid using intrinsic layout primitives for web design?▼

You should avoid intrinsic layout primitives when your UI requires rigid, pixel-perfect designs across specific screen sizes. Because these primitives adapt without breakpoints, complex layouts requiring strict viewport-based styling may need traditional media queries.