What spacing scales does this skill support?

The skill supports both 4px and 8px base units, allowing you to generate granular tokens for dense interfaces or simpler, coarser scales for spacious layouts.

Does it integrate with my existing design state?

Yes, it specifically reads your project's .design-crit/state.json and design-principles.md to ensure new spacing decisions align with previously locked layout and typography choices.

How does it help with UI accessibility?

It automatically checks interactive elements against platform-specific minimum touch targets (like 44px for iOS or 48px for Android) and provides visual overlays for compliance.

Can I compare different layout densities side-by-side?

Yes, the skill generates a compare.html file featuring iframes that render different density options simultaneously for iterative, side-by-side review.

Design Density & Spacing Critique

Name: Design Density & Spacing Critique
Author: metedata

bymetedata

0•

Design Tools

Evaluates and optimizes UI information density, spacing scales, and whitespace systems through iterative design critiques.

The crit-density-spacing skill helps designers and developers establish a consistent spacing foundation by generating and comparing various density options—ranging from spacious marketing layouts to dense data dashboards. It automates the creation of mathematical spacing scales (using 4px or 8px bases), ensures touch target compliance for accessibility standards, and provides side-by-side HTML wireframe comparisons. By analyzing project briefs and user context, it guides the transition from abstract layouts to locked spacing systems that balance readability with information efficiency.

Key Features

01Automated spacing scale generation with 4px or 8px base units

020 GitHub stars

03Touch target accessibility audits and visual annotations

04Interactive HTML wireframe generation for side-by-side comparison

05Context-aware analysis of user expertise and device posture

06Density spectrum mapping from Spacious to Dense zones

Use Cases

01Determining the optimal information density for complex data dashboards versus marketing landing pages.

02Standardizing spacing tokens and scales across a new UI component library or design system.

03Auditing existing layouts for touch target compliance on mobile and tablet devices.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-density-spacing

For use in Claude.ai and ChatGPT

Key Features

01Automated spacing scale generation with 4px or 8px base units

020 GitHub stars

03Touch target accessibility audits and visual annotations

04Interactive HTML wireframe generation for side-by-side comparison

05Context-aware analysis of user expertise and device posture

06Density spectrum mapping from Spacious to Dense zones

Use Cases

01Determining the optimal information density for complex data dashboards versus marketing landing pages.

02Standardizing spacing tokens and scales across a new UI component library or design system.

03Auditing existing layouts for touch target compliance on mobile and tablet devices.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-density-spacing

For use in Claude.ai and ChatGPT