Run any Skill in Manus with one click

layout-spacing

Stars5

Forks0

UpdatedApril 20, 2026 at 10:12

Generate spacing scales, CSS grid systems, responsive breakpoints, z-index layers, and ready-to-use layout patterns (dashboard, sidebar, card grid, holy grail, etc).

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

47network

47network/Sven

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

2 files

SKILL.md

readonly

name	layout-spacing
description	Generate spacing scales, CSS grid systems, responsive breakpoints, z-index layers, and ready-to-use layout patterns (dashboard, sidebar, card grid, holy grail, etc).
version	2026.4.11
publisher	47Network
handler_language	typescript
handler_file	handler.ts
inputs_schema	{"type":"object","properties":{"action":{"type":"string","enum":["spacing","grid","auto_grid","breakpoints","z_index","pattern","all_patterns"],"default":"spacing"},"base_px":{"type":"number","default":4},"scale_method":{"type":"string","enum":["linear","geometric","modular"],"default":"linear"},"columns":{"type":"integer","minimum":1,"maximum":24,"default":12},"gap_px":{"type":"number","default":16},"max_width_px":{"type":"number","default":1280},"min_item_width_px":{"type":"number","default":280},"strategy":{"type":"string","enum":["mobile-first","desktop-first"],"default":"mobile-first"},"pattern_name":{"type":"string","description":"Layout pattern: holy-grail, sidebar-content, card-grid, dashboard, split-screen, centered-content"}},"required":["action"],"additionalProperties":false}
outputs_schema	{"type":"object","properties":{"action":{"type":"string"},"result":{"type":"object"}},"required":["action","result"]}

Layout & Spacing Skill

Generate spacing systems, CSS grid layouts, responsive breakpoints, z-index layers, and production-ready layout patterns.

Actions

spacing — Generate a spacing scale from base unit and method
grid — Generate a CSS Grid system with responsive breakpoints
auto_grid — Generate an auto-fit responsive card grid
breakpoints — Generate responsive breakpoint media queries
z_index — Get the z-index layer system
pattern — Get a specific layout pattern
all_patterns — List all available layout patterns

Examples

"Generate a 4px spacing scale" → { action: "spacing", base_px: 4 }
"Create a 12-column grid" → { action: "grid", columns: 12 }
"Give me a dashboard layout" → { action: "pattern", pattern_name: "dashboard" }

Scope Mapping

design.layout: read (generates CSS code, no side effects)

More from this repository

same repository

agent-messenger

47network/Sven

Sends messages between agents, broadcasts to channels, and retrieves message history for inter-agent communication.

2026-04-205

agent-spawner

47network/Sven

Spawns, manages lifecycle, and terminates autonomous AI agents from the 40+ built-in agent catalog.

2026-04-205

context-engineer

47network/Sven

Optimize prompts and context windows to reduce token usage while preserving quality.

2026-04-205

desktop-companion

47network/Sven

Animated desktop character state machine for Sven's Tauri companion app. Manages character form (ORB, ARIA, REX, ORION), state transitions (idle→thinking→speaking→celebrating), walk cycles, thought bubbles, sound effects, and real-time agent event sync.

2026-04-205

llm-council

47network/Sven

Multi-model deliberation system. Sends queries to multiple LLMs simultaneously, has them peer-review each other's responses anonymously, then a chairman model synthesizes the best answer. Supports configurable council composition, voting strategies, and cost tracking.

2026-04-205

micrograd

47network/Sven

Interactive educational autograd engine — port of Karpathy's micrograd. Build, train, and visualise tiny neural networks step-by-step to learn how backpropagation works.

2026-04-205

name	layout-spacing
description	Generate spacing scales, CSS grid systems, responsive breakpoints, z-index layers, and ready-to-use layout patterns (dashboard, sidebar, card grid, holy grail, etc).
version	2026.4.11
publisher	47Network
handler_language	typescript
handler_file	handler.ts
inputs_schema	{"type":"object","properties":{"action":{"type":"string","enum":["spacing","grid","auto_grid","breakpoints","z_index","pattern","all_patterns"],"default":"spacing"},"base_px":{"type":"number","default":4},"scale_method":{"type":"string","enum":["linear","geometric","modular"],"default":"linear"},"columns":{"type":"integer","minimum":1,"maximum":24,"default":12},"gap_px":{"type":"number","default":16},"max_width_px":{"type":"number","default":1280},"min_item_width_px":{"type":"number","default":280},"strategy":{"type":"string","enum":["mobile-first","desktop-first"],"default":"mobile-first"},"pattern_name":{"type":"string","description":"Layout pattern: holy-grail, sidebar-content, card-grid, dashboard, split-screen, centered-content"}},"required":["action"],"additionalProperties":false}
outputs_schema	{"type":"object","properties":{"action":{"type":"string"},"result":{"type":"object"}},"required":["action","result"]}

Layout & Spacing Skill

Generate spacing systems, CSS grid layouts, responsive breakpoints, z-index layers, and production-ready layout patterns.

Actions

spacing — Generate a spacing scale from base unit and method
grid — Generate a CSS Grid system with responsive breakpoints
auto_grid — Generate an auto-fit responsive card grid
breakpoints — Generate responsive breakpoint media queries
z_index — Get the z-index layer system
pattern — Get a specific layout pattern
all_patterns — List all available layout patterns

Examples

"Generate a 4px spacing scale" → { action: "spacing", base_px: 4 }
"Create a 12-column grid" → { action: "grid", columns: 12 }
"Give me a dashboard layout" → { action: "pattern", pattern_name: "dashboard" }

Scope Mapping

design.layout: read (generates CSS code, no side effects)