Layout Grid
owl-listener/designer-skillsA layout grid helps you organize content on a page. It uses columns, gutters, and margins to create a clean structure. This skill lets you set up grids that work on phones, tablets, and computers.
You choose how many columns to use at different screen sizes. The grid adapts so your design looks good everywhere. Consistent spacing makes pages easy to read and look professional.
Designers and developers both benefit from a shared grid system. It speeds up work and reduces mistakes. Responsive breakpoints ensure your layout changes smoothly on any device.
Add Layout Grid skill to your workflow
Global
mkdir -p ~/.claude/skills/layout-gridProject
mkdir -p .claude/skills/layout-gridSource Repository
More Design & UI/UX Claude Code Skills
Prototypemattpocock/skills
Quick throwaway prototypes to test logic or UI before building
Lark Whiteboardlarksuite/cli
View, edit, and export Lark whiteboards as images or code easily
Sleek Design Mobile Appssleekdotdesign/agent-skills
Turn your app ideas into mobile screens just by describing them
Brainstormingobra/superpowers
Brainstorm your ideas into a clear design and get approval before building anything
Ui Ux Pro Maxnextlevelbuilder/ui-ux-pro-max-skill
All-in-one UI/UX design assistant with styles, colors, fonts, and guidelines for any platform
Redesign Existing Projectsleonxlnx/taste-skill
Upgrade your existing website or app with a professional design audit
Stitch Design Tasteleonxlnx/taste-skill
Create premium, non-generic UI designs with strict color, typography, and layout rules
Brandkitleonxlnx/taste-skill
Create premium brand-kit images that feel intentional, minimal, and presentation-ready