skills.rest
Corvalis-LLC
Corvalis-LLCOFFICIAL
Explore all skills by this author →
GitHub

auto-layout

Standardize CSS layout practices with grid, flex, and token-based rules.

6|Updated Mar 31, 2026
Search Tags:#layout#css#responsive-design#flexbox#grid#design-tokens#truncation
One-click install
npx skills add https://github.com/Corvalis-LLC/Crow-Stack --skill auto-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: auto-layout
Source: https://github.com/Corvalis-LLC/Crow-Stack/tree/main/skills/auto-layout
Command: npx skills add https://github.com/Corvalis-LLC/Crow-Stack --skill auto-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Layout complexity and inconsistent CSS practices lead to brittle UIs. This Skill provides a design-system-driven framework to replace card-heavy patterns, improper 2D layouts, and wrapper abuse with scalable, token-based rules.

Core Features & Use Cases

  • Eight Rules: a practical guide to modern CSS layout decisions (grid for 2D, flex for 1D, token reuse, no dead wrappers, correct viewport units, and a structured z-index system).
  • Design Tokens & Grid Strategy: encourages token-based design and grid-based layouts to ensure consistency across components and breakpoints.
  • Practical Guidelines: real-world anti-patterns, common pitfalls, and refactoring steps to align existing components with the system.
  • Use Case: you are refactoring a component library to remove wrapper bloat and switch from height: 100vh to min-height: 100dvh.

Quick Start

Audit your current CSS and apply token-based rules to align with the eight layout principles.

Frequently Asked Questions about auto-layout

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

FAQPage Schema
How do I decide between using CSS grid or flexbox for responsive design?▼

CSS layout decisions should use grid for two-dimensional structures and flexbox for one-dimensional flows. Applying this rule prevents brittle UI structures and eliminates card-heavy, ad-hoc layout patterns during component refactoring.

What is the best way to standardize CSS layout practices in a component library?▼

Standardizing CSS layout requires enforcing design tokens, eliminating dead wrapper elements, and applying structured z-index systems. This framework replaces inconsistent practices with scalable, token-based rules for component library maintenance.

How do I fix flex truncation issues in responsive web applications?▼

Fixing flex truncation requires applying proper flexbox rules within a token-driven design system. This Skill enforces flex truncation guidelines and viewport unit standards to prevent layout overflow in modern web applications.

Why should I use min-height 100dvh instead of height 100vh for CSS layouts?▼

Using min-height: 100dvh instead of height: 100vh prevents brittle UI structures on mobile browsers. This Skill enforces viewport unit guidelines during UI refactors to ensure consistent responsive behavior across devices.

How do I remove wrapper bloat when refactoring CSS layouts?▼

Removing wrapper bloat involves eliminating dead elements and enforcing token reuse across components. This Skill provides practical guidelines and anti-patterns to align existing components with scalable, grid-based layout systems.

Does this CSS layout framework work without external dependencies?▼

Yes, this CSS layout standardization framework operates without external dependencies. It applies token-driven discipline and eight layout rules directly to modern web applications during design-system adoption and UI refactors.

Related Skills

Explore More Design & Creative Skills→
windyroadwindyroad
4

wr-style-guide:update-guide

Inspect project CSS architecture, design tokens, and component patterns to generate STYLE-GUIDE.md.

Official
Intermediate
AgLyx3AgLyx3

ui-design-system

Generate design tokens from a brand color and export them in JSON, CSS, and SCSS.

Community
Advanced
mahg-esmahg-es
3

responsive

Create mobile-first responsive layouts with CSS Grid and Flexbox.

Official
Intermediate
erikhazzarderikhazzard
1

design__building-frontend

Design frontend architectures with BEM, design tokens, and accessible markup.

Community
Advanced