{"skill":{"slug":"simple-web-layouts","title":"simple-web-layouts","preview":"Build restrained webpage layouts with compact spacing, dark flat surfaces, and simple visual structure. Use for landing pages, indexes, and content pages that s...","description":"Build restrained webpage layouts with compact spacing, dark flat surfaces, and simple visual structure. Use for landing pages, indexes, and content pages that should feel clean, quiet, and intentionally plain.","license":"MIT","compatibility":"opencode","metadata":{"audience":"developers"},"content":"This skill creates webpage layouts that are simple on purpose.\n\nUse it when the user wants a page that feels quiet, compact, dark, flat, and easy to scan instead of expressive, decorative, or highly art-directed.\n\nThe goal is not generic minimalism. The goal is a straightforward layout with clear hierarchy, small visual moves, and almost no ornament.\n\n## Core Direction\n\nDesign with these defaults unless the user asks otherwise:\n\n- Dark theme with flat fills, not gradients\n- Compact width and compact spacing\n- Strong but small typography hierarchy\n- Low-radius containers and simple rectangles\n- One restrained accent color at most\n- No hero gimmicks, no floating effects, no decorative illustrations\n- Motion should be absent or barely noticeable\n\n## Visual Rules\n\n### Layout\n\n- Prefer a centered block or a single-column stack\n- Keep the composition narrow and readable\n- Use obvious structure: title, list, rows, footer if needed\n- Avoid empty “showcase” sections that do not help navigation or comprehension\n\n### Typography\n\n- Favor plain, readable fonts; if unspecified, use `DejaVu Sans` or another neutral sans already available in the project\n- Keep headings modest in size relative to the viewport\n- Use normal sentence case unless the existing design suggests otherwise\n- Avoid oversized display type and trendy font pairings\n\n### Color\n\n- Use near-black backgrounds and dark gray surfaces\n- Use borders and contrast sparingly but clearly\n- If using an accent, apply it as a thin bar, small indicator, underline, or subtle text emphasis\n- Never use gradients unless the user explicitly asks for them\n\n### Shape and Effects\n\n- Use small or moderate border radii\n- Avoid glassmorphism, glow, blur-heavy panels, and layered atmospheric effects\n- Shadows should be soft and minimal, or skipped entirely\n- Decorative texture should usually be omitted\n\n## Implementation Guidance\n\n- Start with the simplest DOM structure that can express the content well\n- Reduce copy; keep only text that helps the user navigate or understand the page\n- Prefer CSS variables for colors and spacing\n- Make mobile behavior straightforward: stack naturally, reduce padding, preserve alignment\n- Keep hover states subtle: a slight background shift, border change, or text-color change is enough\n- Respect `prefers-reduced-motion` when any motion exists\n\n## Avoid\n\n- Large marketing heroes\n- Overly wide layouts\n- Huge paddings and oversized cards\n- Multiple accent colors competing for attention\n- Editorial flourishes, illustration systems, or novelty effects\n- “Minimalist” designs that still feel performative or precious\n\n## Good Outcomes\n\nThe finished page should feel:\n\n- simple\n- compact\n- dark\n- usable\n- calm\n- deliberate\n\nIf there is any doubt between “clean” and “showy,” choose the cleaner option.","document":"---\nname: simple-web-layouts\ndescription: Build restrained webpage layouts with compact spacing, dark flat surfaces, and simple visual structure. Use for landing pages, indexes, and content pages that should feel clean, quiet, and intentionally plain.\nlicense: MIT\ncompatibility: opencode\nmetadata:\n  audience: developers\n---\n\nThis skill creates webpage layouts that are simple on purpose.\n\nUse it when the user wants a page that feels quiet, compact, dark, flat, and easy to scan instead of expressive, decorative, or highly art-directed.\n\nThe goal is not generic minimalism. The goal is a straightforward layout with clear hierarchy, small visual moves, and almost no ornament.\n\n## Core Direction\n\nDesign with these defaults unless the user asks otherwise:\n\n- Dark theme with flat fills, not gradients\n- Compact width and compact spacing\n- Strong but small typography hierarchy\n- Low-radius containers and simple rectangles\n- One restrained accent color at most\n- No hero gimmicks, no floating effects, no decorative illustrations\n- Motion should be absent or barely noticeable\n\n## Visual Rules\n\n### Layout\n\n- Prefer a centered block or a single-column stack\n- Keep the composition narrow and readable\n- Use obvious structure: title, list, rows, footer if needed\n- Avoid empty “showcase” sections that do not help navigation or comprehension\n\n### Typography\n\n- Favor plain, readable fonts; if unspecified, use `DejaVu Sans` or another neutral sans already available in the project\n- Keep headings modest in size relative to the viewport\n- Use normal sentence case unless the existing design suggests otherwise\n- Avoid oversized display type and trendy font pairings\n\n### Color\n\n- Use near-black backgrounds and dark gray surfaces\n- Use borders and contrast sparingly but clearly\n- If using an accent, apply it as a thin bar, small indicator, underline, or subtle text emphasis\n- Never use gradients unless the user explicitly asks for them\n\n### Shape and Effects\n\n- Use small or moderate border radii\n- Avoid glassmorphism, glow, blur-heavy panels, and layered atmospheric effects\n- Shadows should be soft and minimal, or skipped entirely\n- Decorative texture should usually be omitted\n\n## Implementation Guidance\n\n- Start with the simplest DOM structure that can express the content well\n- Reduce copy; keep only text that helps the user navigate or understand the page\n- Prefer CSS variables for colors and spacing\n- Make mobile behavior straightforward: stack naturally, reduce padding, preserve alignment\n- Keep hover states subtle: a slight background shift, border change, or text-color change is enough\n- Respect `prefers-reduced-motion` when any motion exists\n\n## Avoid\n\n- Large marketing heroes\n- Overly wide layouts\n- Huge paddings and oversized cards\n- Multiple accent colors competing for attention\n- Editorial flourishes, illustration systems, or novelty effects\n- “Minimalist” designs that still feel performative or precious\n\n## Good Outcomes\n\nThe finished page should feel:\n\n- simple\n- compact\n- dark\n- usable\n- calm\n- deliberate\n\nIf there is any doubt between “clean” and “showy,” choose the cleaner option.\n","url":"https://pinky.moe/api/skills/simple-web-layouts","rawUrl":"https://pinky.moe/api/skills/simple-web-layouts?format=raw","pageUrl":"https://pinky.moe/skills/simple-web-layouts"}}