From design
Apply 5 professional layout rules - grid systems, spacing scales, alignment, proximity (related-element grouping), visual weight balance. Use when reviewing or designing layout, fixing inconsistent spacing, deciding alignment, or balancing emphasis. Triggers on "fix the layout", "improve spacing", "alignment issue", "grid system", "spacing scale", "visual hierarchy".
npx claudepluginhub polarislt0710/claude-skills-hugo --plugin designThis skill uses the workspace's default tool permissions.
Five rules for visually balanced, mathematically consistent layouts.
Guides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Share bugs, ideas, or general feedback.
Five rules for visually balanced, mathematically consistent layouts.
Pick a base unit (4 px is standard) and NEVER use arbitrary values.
Spacing tokens: 4, 8, 12, 16, 24, 32, 48, 64, 96 px
Apply consistently across:
If you find yourself wanting 13 px or 22 px, you're avoiding a real layout decision.
Spacing communicates relationships:
Related items: ≤ 8 px apart
Loosely related: 8–16 px apart
Unrelated items: ≥ 24 px apart
Section breaks: ≥ 48 px apart
If two things should "feel together," reduce space. If two things are different, increase space — no border or color needed.