skills.rest
Mjlike123
Mjlike123COMMUNITY
Explore all skills by this author →
GitHub

hierarchy-rhythm-review

Reviews visual hierarchy and rhythm in HTML/CSS designs using two parallel audit agents.

Updated Aug 13, 2026
Search Tags:#typography#design review#ui design#visual hierarchy#rhythm#spacing scale#css audit
One-click install
npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill hierarchy-rhythm-review-mjlike123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hierarchy-rhythm-review
Source: https://github.com/Mjlike123/ui-prototype-workbench/tree/main/.agents/skills/monkren-design/skills/04-review/hierarchy-rhythm-review
Command: npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill hierarchy-rhythm-review-mjlike123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designs that look "AI-generated" often suffer from flat visual hierarchy and inconsistent rhythm. This Skill audits HTML/CSS design files to detect unclear primary/secondary/tertiary emphasis, off-scale spacing and font sizes, and monotonous or chaotic section patterns. ## Core Features & Use Cases - Hierarchy Audit: Evaluates size, color, font weight, position, density, and runs a 5-second test to verify users instantly know what to look at and do. - Rhythm Audit: Checks spacing scales (4px/8px multiples), type scales, repetition consistency, strategic variation, color palette discipline, section structure, and alignment. - Parallel Agent Review: Launches two independent review agents when sub-agent support exists, then aggregates and deduplicates findings with confidence and severity estimates. - Use Case: After building a landing page or slide deck, run this review to get a categorized report of hierarchy and rhythm issues with concrete fix directions before shipping. ## Quick Start Ask the AI to run a hierarchy and rhythm review on the HTML/CSS file you just edited.

Frequently Asked Questions about hierarchy-rhythm-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review visual hierarchy in my HTML/CSS design?▼

Run this review on the HTML/CSS file you just edited. It checks size, color, font weight, position, and density to verify clear primary, secondary, and tertiary emphasis, plus a 5-second test for first-time users.

How to check spacing and font scale consistency in CSS?▼

The rhythm audit lists all padding, margin, and gap values and flags outliers that break the implicit scale, such as 7px or 13px in a 4px/8px-based design. It also flags arbitrary font sizes like 17px in a 16/20/24 scale.

Does the hierarchy review modify my design files automatically?▼

No, it only reports findings by default. Files are modified only when you explicitly request fixes, after which the changes are re-verified and summarized by category.

What happens if parallel sub-agents are not available?▼

The review does not abort. The current agent performs the hierarchy and rhythm checks sequentially instead, producing the same aggregated report.

What design problems does this review not cover?▼

It focuses on visual hierarchy and rhythm only, not accessibility compliance, code correctness, or brand guideline enforcement. It reports judgment calls and open trade-offs for you to decide rather than auto-resolving ambiguous cases.

Related Skills

Explore More Design & Creative Skills→
ConardLiConardLi
10.2k

web-design-engineer

Generate web pages and UI components with HTML, CSS, JavaScript, and React.

Community
Advanced
hmu332233hmu332233

page-compare

Capture and compare full-page screenshots of multiple web pages using Playwright CLI.

Community
Intermediate
Stack-and-FlowStack-and-Flow
23

components-auditor

Audit React/TypeScript/Tailwind/Radix components against the shared contract and compliance matrix.

Official
Advanced
CoRLab-TechCoRLab-Tech

pix

Implement UI components from Figma designs with pixel-perfect accuracy.

Official
Advanced