layout-optimizer

Analyze ASCII page layouts and prototypes to score usability and produce optimized layout diagrams.

Updated Jun 5, 2026
One-click install
npx skills add https://github.com/fen-zx/NovelToScript --skill layout-optimizer-fen-zx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: layout-optimizer
Source: https://github.com/fen-zx/NovelToScript/tree/main/.agents/skills/layout-optimizer
Command: npx skills add https://github.com/fen-zx/NovelToScript --skill layout-optimizer-fen-zx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Page layouts often hide usability problems—buried search bars, overloaded button rows, missing empty states—that only surface after development. This Skill reviews ASCII layouts and prototype descriptions before coding, scoring them across five dimensions and returning a corrected layout you can drop in directly. ## Core Features & Use Cases - Five-Dimension Scoring: Rates information architecture, user experience, visual structure, responsiveness, and development complexity on a weighted 100-point scale with per-dimension deductions. - Graded Issue List: Classifies findings as critical, recommended, or optional, each with symptom, impact, suggestion, and deduction attribution. - Optimized Layout Output: Produces a replacement ASCII layout diagram plus a change summary table, ready to feed into prototype generation. - Use Case: After generating an ASCII layout for an admin user-list page, run this Skill to catch that the search bar sits below the table and five flat action buttons crowd the toolbar, then receive a restructured layout with search moved up and secondary actions collapsed into a dropdown. ## Quick Start Review this ASCII layout of my user management page and give me the score, issue list, and an optimized layout diagram.

Frequently Asked Questions about layout-optimizer

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

FAQPage Schema
How do I review an ASCII page layout for usability problems?▼

Provide the ASCII layout diagram as input and the review scores it across five weighted dimensions: information architecture, user experience, visual structure, responsiveness, and development complexity. You receive a total score, a graded issue list, and an optimized replacement layout.

What layout issues does a UI layout review typically catch?▼

Common patterns include search bars placed below content, four or more flat action buttons, forms exceeding ten fields without grouping, tables missing empty or loading states, and deep pages lacking breadcrumbs or back paths. Each issue includes impact and a concrete fix.

Can I use layout review on low-fidelity prototypes instead of ASCII diagrams?▼

Yes, the review accepts low-fidelity prototype descriptions in Markdown, which additionally enable interaction-path analysis such as counting operation steps. It also accepts hand-drawn ASCII sketches and Figma-exported structure descriptions.

Does layout review evaluate visual design like colors and fonts?▼

No, the review deliberately excludes visual styling such as colors, typography, and border radius. It focuses only on structure and interaction: module ordering, hierarchy, operation paths, state coverage, and component complexity.

What score means a layout is ready for prototyping?▼

Scores of 90-100 are excellent and proceed directly to prototyping, while 75-89 requires fixing critical issues first. Scores of 60-74 need critical and recommended issues resolved with re-review, and below 60 requires redesigning the layout.