其他

layout-paradigms-and-consistency

dembrandt/dembr…t-skills

Choose a layout paradigm (feed, board, table, canvas, master-detail, dashboard) and reuse it across screens. Includes a landing page narrative framework. Use when structuring a screen, page template or landing page.

  • 770 次安装
  • 174 星标
  • 收录于

安装命令

npx skills add https://github.com/dembrandt/dembrandt-skills --skill layout-paradigms-and-consistency

SKILL.md

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 re-orients on every navigation. Macro consistency is what makes a product feel like one application.