원클릭으로 Manus에서 모든 스킬 실행

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 저장소 열기 Creator 저장소 보기

다운로드

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"