How do I install the Layout Designer skill?

Run npx skillmds@latest add tomevault-io/layout-designer in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Layout Designer safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Layout Designer?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Layout Designer free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Layout Designer?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Layout Designer by tomevault-io — Agent Skill

Name: Layout Designer
Author: tomevault-io

Layout Designer

Designs page layouts, grid systems, and structural arrangements. Use when creating layouts for pages, sections, or components. Considers responsive design, visual hierarchy, and accessibility. Use when this capability is needed.

tomevault-io dcb88a8 2 files · 3.7 KB Updated Sep 17, 2026

File contents

Layout Designer Skill

Instructions

Analyze layout requirements from task
Design page/section structure and organization
Create grid system or layout approach
Define visual hierarchy and content flow
Specify responsive breakpoints and adaptations
Consider accessibility (semantic structure, reading order)
Return structured layout specifications with:
- Layout structure description
- Grid system specifications
- Component positioning
- Responsive breakpoints
- Spacing and alignment
- Visual hierarchy

Examples

Input: "Design layout for user profile page" Output:

### Layout Structure

**Desktop (1024px+):**
- Container: max-width 1200px, centered
- Grid: 12-column grid system
- Header: Full width, fixed top, height 64px
- Sidebar: 3 columns (left), fixed width 240px
- Main Content: 9 columns (right), flexible width
- Footer: Full width, height 80px

**Tablet (768px - 1023px):**
- Container: max-width 100%, padding 24px
- Grid: Single column
- Header: Full width, height 56px
- Sidebar: Hidden (collapsed into menu)
- Main Content: Full width
- Footer: Full width, height 64px

**Mobile (320px - 767px):**
- Container: Full width, padding 16px
- Grid: Single column
- Header: Full width, height 48px, hamburger menu
- Sidebar: Hidden (drawer menu)
- Main Content: Full width
- Footer: Full width, height 56px

### Visual Hierarchy
1. Header (navigation)
2. Main content area
3. Sidebar (secondary content)
4. Footer (tertiary content)

### Grid System
- 12-column grid
- Gutter: 24px (desktop), 16px (tablet), 12px (mobile)
- Column width: Flexible based on container

Layout Types

Single Column: Simple vertical layout
Multi-Column: Sidebar + main content
Grid Layout: Card grids, image galleries
Flexbox Layout: Flexible component arrangements
CSS Grid: Complex two-dimensional layouts
Fixed Header/Footer: Sticky navigation patterns
Split Screen: Two-panel layouts
Dashboard: Multi-widget layouts

Responsive Considerations

Mobile First: Start with mobile layout
Breakpoints: Define clear breakpoints (320px, 768px, 1024px, 1920px)
Adaptive Layouts: How layout changes at each breakpoint
Content Reflow: How content reorders on smaller screens
Navigation Patterns: Mobile menu patterns (hamburger, drawer, tabs)

Accessibility Considerations

Semantic HTML: Use proper HTML5 semantic elements
Reading Order: Logical content reading order
Focus Order: Keyboard navigation follows visual order
Landmarks: Proper use of ARIA landmarks
Skip Links: Skip navigation links for keyboard users

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: layout-designerdescription: Designs page layouts, grid systems, and structural arrangements. Use when creating layouts for pages, sections, or components. Considers responsive design, visual hierarchy, and accessibility. Use when this capability is needed.---# Layout Designer Skill## Instructions1. Analyze layout requirements from task2. Design page/section structure and organization3. Create grid system or layout approach4. Define visual hierarchy and content flow5. Specify responsive breakpoints and adaptations6. Consider accessibility (semantic structure, reading order)7. Return structured layout specifications with: - Layout structure description - Grid system specifications - Component positioning - Responsive breakpoints - Spacing and alignment - Visual hierarchy## Examples**Input:** "Design layout for user profile page"**Output:**```markdown### Layout Structure**Desktop (1024px+):**- Container: max-width 1200px, centered- Grid: 12-column grid system- Header: Full width, fixed top, height 64px- Sidebar: 3 columns (left), fixed width 240px- Main Content: 9 columns (right), flexible width- Footer: Full width, height 80px**Tablet (768px - 1023px):**- Container: max-width 100%, padding 24px- Grid: Single column- Header: Full width, height 56px- Sidebar: Hidden (collapsed into menu)- Main Content: Full width- Footer: Full width, height 64px**Mobile (320px - 767px):**- Container: Full width, padding 16px- Grid: Single column- Header: Full width, height 48px, hamburger menu- Sidebar: Hidden (drawer menu)- Main Content: Full width- Footer: Full width, height 56px### Visual Hierarchy1. Header (navigation)2. Main content area3. Sidebar (secondary content)4. Footer (tertiary content)### Grid System- 12-column grid- Gutter: 24px (desktop), 16px (tablet), 12px (mobile)- Column width: Flexible based on container```## Layout Types- **Single Column**: Simple vertical layout- **Multi-Column**: Sidebar + main content- **Grid Layout**: Card grids, image galleries- **Flexbox Layout**: Flexible component arrangements- **CSS Grid**: Complex two-dimensional layouts- **Fixed Header/Footer**: Sticky navigation patterns- **Split Screen**: Two-panel layouts- **Dashboard**: Multi-widget layouts## Responsive Considerations- **Mobile First**: Start with mobile layout- **Breakpoints**: Define clear breakpoints (320px, 768px, 1024px, 1920px)- **Adaptive Layouts**: How layout changes at each breakpoint- **Content Reflow**: How content reorders on smaller screens- **Navigation Patterns**: Mobile menu patterns (hamburger, drawer, tabs)## Accessibility Considerations- **Semantic HTML**: Use proper HTML5 semantic elements- **Reading Order**: Logical content reading order- **Focus Order**: Keyboard navigation follows visual order- **Landmarks**: Proper use of ARIA landmarks- **Skip Links**: Skip navigation links for keyboard users---> Converted and distributed by [TomeVault](https://tomevault.io/claim/lexicalninja) — claim your Tome and manage your conversions.

Frequently asked questions