Generates grid-driven layout options and critiques for screen inventories across desktop, tablet, and mobile.
npx skills add https://github.com/metedata/design-crit --skill crit-layout
Please help me install this Agent Skill. Skill: crit-layout Source: https://github.com/metedata/design-crit/tree/main/skills/crit-layout Command: npx skills add https://github.com/metedata/design-crit --skill crit-layout
Helps design teams evaluate page layouts by generating diverse, grid-driven options that expose spatial relationships and hierarchy before committing to implementation.
Generate 2-4 grid-based layout options for the current screen inventory and present a structured critique.
High-intent search queries and answers about installing and using this skill.
Generate responsive grid layout options by producing 2-4 grid-driven variations per screen, evaluating spatial relationships and hierarchy across desktop, tablet, and mobile contexts. The output includes HTML previews and critique artifacts mapping patterns like Holy Grail or Split Pane.
Evaluating page layout hierarchy before implementation involves generating diverse grid-driven options that expose spatial relationships and content area roles. This process delivers structured critique artifacts and layout previews that downstream design tooling can consume for tokens and documentation.
Design critique can account for fixed navigation chrome by evaluating the locked UI elements and their impact on available layout space. The generated grid options ensure that spatial proportions and content areas respect the established navigation chrome boundaries.
Refine dashboard layouts using grid systems by generating multiple annotated options with proportional relationships and pattern mappings. The critique process applies pattern mappings like Split Pane to optimize readability and flow across desktop, tablet, and mobile contexts.
This layout evaluation approach works for marketing pages, article layouts, product detail screens, and dashboards. It generates grid-based options annotated with content area roles and grid structure to optimize readability and flow across responsive breakpoints.
Layout critique artifacts are delivered as HTML previews and guidelines that downstream design tooling can consume for tokens and documentation. These artifacts include proportional relationships, grid structure, and content area role annotations for each generated layout option.
metedataGenerate animated HTML loading specimens with timing specifications and transition storyboards.
metedataGenerate 2-4 HTML navigation wireframes with rationale and reachability tables.
timurgaleevGenerate a complete design system and DESIGN.md from product context.
HDeiblerDesign and evaluate alignment grid systems with columns, gutters, margins, and responsive breakpoints.
