Can I use this for high-fidelity UI design?

No, this skill focuses on 'spatial skeletons' and low-fidelity wireframes to ensure layout and hierarchy are correct before color and typography are added.

What layout patterns can Claude generate with this skill?

It supports a variety of common patterns including Holy Grail, Sidebar + Content, Split Pane, Card Grid, Master-Detail, and Dashboard Mosaics.

What kind of artifacts does this skill generate?

It generates self-contained HTML files that act as low-to-medium fidelity wireframes, featuring grid overlays, labeled content regions, and proportional annotations.

What is the primary purpose of the crit-layout skill?

It is designed to help users evaluate and iterate on the spatial arrangement of content areas, grid systems, and responsive behaviors within an application using structured wireframes.

Does crit-layout support responsive design?

Yes, it defines specific behaviors for desktop, tablet, and mobile breakpoints, showing how the layout adapts or stacks across different viewport sizes.

Content Layout Critique

Name: Content Layout Critique
Author: metedata

bymetedata

0•

デザインツール

Generates and evaluates structured spatial layout options and grid systems through interactive HTML wireframe artifacts.

The crit-layout skill empowers Claude to function as a lead UI designer by formalizing the spatial composition phase of product development. It analyzes locked screen inventories and navigation models to propose multiple layout directions, ranging from dense data-heavy grids to spacious, reading-focused flows. By generating side-by-side HTML wireframes complete with grid overlays and proportional annotations, this skill enables teams to make informed decisions about content hierarchy and responsive behavior early in the design cycle, ensuring a solid architectural foundation before moving to high-fidelity implementation.

主な機能

01Generates 2-4 distinct spatial composition options for side-by-side comparison

02Defines specific grid tokens including columns, gutters, margins, and max-widths

03Maps screens to industry-standard patterns like Holy Grail, Split Pane, and Dashboard Mosaic

040 GitHub stars

05Produces low-fidelity HTML wireframe artifacts with semi-transparent grid overlays

06Establishes proportional splits (e.g., 70/30, 60/40) for primary and auxiliary content

ユースケース

01Establishing the spatial skeleton for complex admin dashboards and productivity tools

02Locking in content hierarchy and screen proportions before applying visual styling

03Iterating on responsive grid systems for content-heavy web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-layout

For use in Claude.ai and ChatGPT

Download Skill