Skills
.Work. You
Rest

auto-layout

Official

Master CSS layout with token-driven discipline.

Design & Creative#layout#css#responsive-design#flexbox#grid#design-tokens#truncation
AuthorCorvalis-LLC
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: auto-layout
Download link: https://github.com/Corvalis-LLC/Crow-Stack/archive/main.zip#auto-layout

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 510,000+ vetted skills library on demand.