layout-paradigms-and-consistency

Solid

A layout is not a neutral container — choosing the right layout paradigm (feed, board, table, canvas, master-detail, dashboard, gallery, timeline, map, single-focus, narrative long-scroll) is a design decision that shapes how content is understood. Landing and marketing pages get a product narrative framework — hook, problem, USP, value props, proof points, how it works, stakes, CTA — used to review whether the page carries a visitor to a decision. Once chosen, the same paradigm and page skeleton must be reused consistently across the application so users build one mental model. This is consistency at the macro scale, above component and token consistency. Use when deciding the overall structure of a screen, designing page templates, or reviewing whether screens across a product feel like one coherent application.

Web & Frontend 54 stars 9 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 87/100

Stars 20%
58
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Layout Paradigms and Consistency A layout is not a neutral container you pour content into. The layout paradigm you choose is part of the argument about how the content should be read, compared, and acted on. Two products showing the same data can communicate completely different things depending on whether that data is a feed, a table, or a board. This skill operates at the **macro scale** of consistency. It sits above [[component-family-consistency]] (the *meso* scale — buttons and inputs sharing one DNA) and above token-level consistency like [[button-states]], [[status-colors-and-errors]], and [[modular-scale-typography]] (the *micro* scale). Consistency is not one rule — it is the same discipline applied at three altitudes. ## Consistency operates at three scales | Scale | What stays consistent | Where it lives | |---|---|---| | **Estate** | Brand chassis and shared shell across *separate applications* | *this skill, Part 3* + [[app-shell]] | | **Macro** | Layout paradigm and page skeleton across screens | *this skill* | | **Meso** | Component family — shared radius, height, colour logic | [[component-family-consistency]], [[brand-visual-language]] | | **Micro** | States, tokens, type scale, semantic colours | [[button-states]], [[status-colors-and-errors]], [[modular-scale-typography]], [[algorithmic-color-palette]] | A product can have perfect tokens and a coherent component family and still feel broken — because every screen is laid out differently and the user...

Details

Author
dembrandt
Repository
dembrandt/dembrandt-skills
Created
4 months ago
Last Updated
yesterday
Language
JavaScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

designing-consistently

Keeps UI work consistent with the design system an app actually has — discovering what already governs when no DESIGN.md exists, reading a bounded slice of the decision log however large the app is, and repairing that record as the work proves it. Use when building or modifying UI in any repo, whether its system lives in a DESIGN.md or only in tokens, context-file gotchas and prose docs, when new screens must match existing ones, when an app has too many surfaces to read its whole decision log in one session, when buttons or patterns come out different every session, or when design decisions get lost between sessions.

0 Updated 3 weeks ago
bygama
Web & Frontend Listed

frontend-design

Create distinctive, production-grade visual interfaces — design principles that apply to ANY frontend (React, Next.js, Vue, Svelte, plain HTML/CSS, React Native). Use when the aesthetic direction matters — building a component, page, landing site, or app where it must look intentional, not generic "AI slop". Covers visual hierarchy, spacing/rhythm, typography, color + contrast, layout, and design tokens — independent of framework. Triggers — "make this look good", "design", "UI", "landing page", "the spacing feels off", "color palette", "it looks generic/AI". Pairs with frontend-fundamentals (implementation patterns), a11y (accessibility — aesthetic without it is a lawsuit), state-management.

6 Updated yesterday
kouroshez
Web & Frontend Listed

designing-consistently

Keeps UI work consistent with an app's DESIGN.md design system and decision log. Use when building or modifying UI in a repo with a DESIGN.md (or one that keeps drifting without it), when new screens must match existing ones, when buttons or patterns come out different every session, or when design decisions get lost between sessions.

0 Updated 3 weeks ago
BriarDevv