一键在 Manus 中运行任何 Skill

canon-density

星标4

分支0

更新时间2026年4月18日 06:53

Use when designing or implementing density modes (compact, default, comfortable), adjusting spacing without changing font sizes, supporting power users who need denser UIs, or adapting layouts for data-heavy vs content-heavy contexts. Trigger when the user mentions density, compact mode, comfortable spacing, or information density.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

Dragoon0x

Dragoon0x/canon

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

CANON · Density

Density is spacing, not font size. Changing density means scaling gaps, padding, and row heights while keeping type legible.

Three density modes

Mode	Use	Spacing multiplier
Compact	Power users, data tables, dashboards, admin tools	0.75×
Default	Most apps	1×
Comfortable	Content-heavy, reading-focused, onboarding	1.25×

What scales

Property	Compact	Default	Comfortable
Row height	32px	48px	56px
Card padding	12px	16px	24px
Button height	32px	40px	48px
Input height	32px	40px	48px
Gap between items	8px	16px	24px
Section spacing	24px	40px	56px

What does NOT scale

Font sizes. 14px body stays 14px across all densities. Compact reads the same text; it just packs it tighter.
Touch targets on mobile. 44px floor stays, regardless of density mode. Density modes are desktop-only unless you're building for stylus input.
Icon sizes. Icons stay at their grid-aligned size (16, 20, 24px).
Border radius. Stays consistent.
Line height. Governed by type size, not density.

Implementation — CSS custom properties

:root {
  --density: 1;
  --space-unit: calc(8px * var(--density));
}
[data-density="compact"]  { --density: 0.75; }
[data-density="comfortable"] { --density: 1.25; }

.card { padding: calc(var(--space-unit) * 2); }
.row { min-height: calc(var(--space-unit) * 6); }

Or use discrete scales where continuous math creates half-pixel values.

User control

Toggle in settings or toolbar.
Persist in localStorage.
Per-view override OK (table might be compact while the page is default).
Default is "default." Don't auto-compact on small screens — that's responsive design, not density.

Anti-patterns

Anti-pattern	Why it fails
Shrinking font size for compact	Illegibility; density is spacing, not type
Compact mode on mobile with touch targets < 44px	WCAG 2.5.5 violation
Comfortable mode that doubles spacing everywhere	Wastes real estate, looks broken
No user toggle	Forces one density on everyone
Mixing density modes within a single component	Visual incoherence

Audit checklist

Three modes defined (compact, default, comfortable)
Font sizes unchanged across modes
Touch targets ≥ 44px on mobile regardless of density
Spacing uses design tokens or CSS calc with density variable
User can toggle and choice persists
Default mode is the default

Sources

Material Design 3 · Layout: applying density
Atlassian Design System · Spacing and density
Apple HIG · "Adaptivity and Layout"

同仓库更多 Skills

同仓库

canon-brand-voice

Dragoon0x/canon

Use when defining or auditing a product's written voice — the consistent personality across all UI copy. Covers voice vs tone, voice attribute definition, do/don't tables, and how to keep AI-generated copy on-brand. Trigger when the user mentions brand voice, tone of voice, writing style guide, copy guidelines, or product personality.

2026-04-184

canon-bundle-size

Dragoon0x/canon

Use when auditing or reducing JavaScript and CSS bundle sizes, setting performance budgets, choosing lighter alternatives to heavy libraries, configuring tree shaking, code splitting, and lazy loading. Trigger when the user mentions bundle size, JavaScript size, tree shaking, code splitting, lazy loading, or performance budget.

2026-04-184

canon-color-blindness

Dragoon0x/canon

Use when designing or auditing for color vision deficiency — ensuring that color is never the only visual signal, checking charts and status indicators, picking colorblind-safe palettes, and testing against deuteranopia, protanopia, and tritanopia simulations. Trigger when the user mentions color blindness, color vision, CVD, deuteranopia, protanopia, accessibility color, or color-only signal.

2026-04-184

canon-content-strategy

Dragoon0x/canon

Use when planning content hierarchy, information density, content-first design, microcopy systems, or editorial patterns. Covers the content-before-design principle, content inventory, progressive disclosure, scannability, and content governance. Trigger when the user mentions content strategy, content hierarchy, information architecture, microcopy, or editorial design.

2026-04-184

canon-cursors

Dragoon0x/canon

Use when designing or auditing cursor behavior — matching cursor shape to affordance, custom cursors, drag cursors, resize cursors, and the hover+cursor pairing rule. Trigger when the user mentions cursor, pointer, mouse cursor, drag cursor, or resize handle.

2026-04-184

canon-dark-mode

Dragoon0x/canon

Use when designing, auditing, or implementing dark mode. Covers lightness inversion (not hue shift), elevation via lightness not shadow, surface stacking, contrast rechecking, and the prefers-color-scheme media query. Trigger when the user mentions dark mode, dark theme, night mode, theme toggle, or color scheme.

2026-04-184

name	canon-density
description	Use when designing or implementing density modes (compact, default, comfortable), adjusting spacing without changing font sizes, supporting power users who need denser UIs, or adapting layouts for data-heavy vs content-heavy contexts. Trigger when the user mentions density, compact mode, comfortable spacing, or information density.

CANON · Density

Density is spacing, not font size. Changing density means scaling gaps, padding, and row heights while keeping type legible.

Three density modes

Mode	Use	Spacing multiplier
Compact	Power users, data tables, dashboards, admin tools	0.75×
Default	Most apps	1×
Comfortable	Content-heavy, reading-focused, onboarding	1.25×

What scales

Property	Compact	Default	Comfortable
Row height	32px	48px	56px
Card padding	12px	16px	24px
Button height	32px	40px	48px
Input height	32px	40px	48px
Gap between items	8px	16px	24px
Section spacing	24px	40px	56px

What does NOT scale

Font sizes. 14px body stays 14px across all densities. Compact reads the same text; it just packs it tighter.
Touch targets on mobile. 44px floor stays, regardless of density mode. Density modes are desktop-only unless you're building for stylus input.
Icon sizes. Icons stay at their grid-aligned size (16, 20, 24px).
Border radius. Stays consistent.
Line height. Governed by type size, not density.

Implementation — CSS custom properties

:root {
  --density: 1;
  --space-unit: calc(8px * var(--density));
}
[data-density="compact"]  { --density: 0.75; }
[data-density="comfortable"] { --density: 1.25; }

.card { padding: calc(var(--space-unit) * 2); }
.row { min-height: calc(var(--space-unit) * 6); }

Or use discrete scales where continuous math creates half-pixel values.

User control

Toggle in settings or toolbar.
Persist in localStorage.
Per-view override OK (table might be compact while the page is default).
Default is "default." Don't auto-compact on small screens — that's responsive design, not density.

Anti-patterns

Anti-pattern	Why it fails
Shrinking font size for compact	Illegibility; density is spacing, not type
Compact mode on mobile with touch targets < 44px	WCAG 2.5.5 violation
Comfortable mode that doubles spacing everywhere	Wastes real estate, looks broken
No user toggle	Forces one density on everyone
Mixing density modes within a single component	Visual incoherence

Audit checklist

Three modes defined (compact, default, comfortable)
Font sizes unchanged across modes
Touch targets ≥ 44px on mobile regardless of density
Spacing uses design tokens or CSS calc with density variable
User can toggle and choice persists
Default mode is the default

Sources

Material Design 3 · Layout: applying density
Atlassian Design System · Spacing and density
Apple HIG · "Adaptivity and Layout"