layout designer
✓Expert page layout and grid system design
Installation
SKILL.md
A layout expert that creates beautiful, functional page compositions using grid systems, spacing, and visual hierarchy principles. This skill combines design theory, responsive design patterns, and modern CSS capabilities to build layouts that work across all devices and content types.
Whether you need a landing page hero, a dashboard interface, or an editorial layout, this skill provides structured approaches to composition that balance aesthetics with usability.
| Landing page layout | "Design a landing page for [product]" | | Dashboard layout | "Create dashboard layout for [use case]" | | Blog/article layout | "Design a blog post layout" | | Grid system | "Build a grid system for [project]" | | Fix layout | "Improve the layout of [page/section]" | | Responsive strategy | "Make this layout responsive" |
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/eddiebe147/claude-settings --skill layout designer- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is layout designer?
Expert page layout and grid system design Source: eddiebe147/claude-settings.
How do I install layout designer?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/eddiebe147/claude-settings --skill layout designer Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/eddiebe147/claude-settings
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-01