arrange

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

Quality

76%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./.cursor/skills/arrange/SKILL.md

Quality

Discovery

82%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

This is a solid description that clearly communicates both what the skill does and when to use it, with good trigger terms that match natural user language. Its main weakness is moderate specificity in the actions described and some potential overlap with broader UI/design skills. The explicit 'Use when...' clause with multiple trigger phrases is a strong point.

Suggestions

Add more specific concrete actions to increase specificity, e.g., 'Adjusts grid layouts, refines padding/margin ratios, establishes consistent spacing scales, and improves element grouping.'

Differentiate more clearly from general UI/design skills by specifying the scope, e.g., mentioning it focuses on spatial composition rather than color, typography, or component design.

Dimension	Reasoning	Score
Specificity	Names the domain (layout/spacing/visual rhythm) and some actions ('Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy'), but the actions are somewhat general and don't list highly specific concrete operations like 'adjust padding between sections' or 'restructure grid columns'.	2 / 3
Completeness	Clearly answers both 'what' (improve layout, spacing, visual rhythm; fix monotonous grids, inconsistent spacing, weak visual hierarchy) and 'when' with an explicit 'Use when...' clause listing specific trigger scenarios.	3 / 3
Trigger Term Quality	Includes a strong set of natural keywords users would actually say: 'layout feeling off', 'spacing issues', 'visual hierarchy', 'crowded UI', 'alignment problems', 'better composition'. These are realistic phrases a user would use when describing these problems.	3 / 3
Distinctiveness Conflict Risk	While it focuses on layout and spacing specifically, terms like 'visual hierarchy', 'crowded UI', and 'alignment problems' could overlap with general UI design or CSS styling skills. The niche is somewhat defined but not sharply distinct from broader design/UI skills.	2 / 3
	Total	10 / 12 Passed

Implementation

70%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a well-structured design skill with clear workflow progression and good use of progressive disclosure through external references. Its main weaknesses are moderate verbosity (parenthetical explanations on nearly every bullet point) and limited actionability — it reads more as a design checklist than executable guidance, with very few concrete code examples despite being a frontend skill. The NEVER list and verification checklist are strong additions.

Suggestions

Add 2-3 concrete before/after code examples showing specific layout improvements (e.g., transforming a monotonous card grid into a varied layout with actual CSS/HTML)

Trim parenthetical explanations that restate what the bullet point already conveys — e.g., '(Random padding/margin values)' after 'Is spacing consistent or arbitrary?' is redundant

Dimension	Reasoning	Score
Conciseness	The content is reasonably well-structured but includes some unnecessary elaboration and commentary that Claude would already know (e.g., explaining what Flexbox vs Grid are for, basic CSS concepts). Some sections like 'Manage Depth & Elevation' and 'Optical Adjustments' could be tightened significantly. The parenthetical explanations after many bullet points add verbosity.	2 / 3
Actionability	The skill provides specific design principles and checklists but lacks concrete executable code examples. There are a few CSS snippets mentioned inline (like `clamp()`, `repeat(auto-fit, minmax(280px, 1fr))`) but no complete, copy-paste-ready code blocks showing before/after implementations. The guidance is more conceptual/checklist-oriented than executable.	2 / 3
Workflow Clarity	The workflow is clearly sequenced: mandatory preparation → assess current layout → plan improvements → implement systematically → verify. The verification section serves as an explicit validation checkpoint with specific criteria (squint test, rhythm check, hierarchy check). The mandatory preparation step ensures context is gathered before proceeding.	3 / 3
Progressive Disclosure	The skill appropriately references external resources (the /frontend-design skill, /teach-impeccable, and reference/spatial-design.md) without deeply nesting them. The content is well-organized with clear section headers, and detailed spatial design guidance is correctly deferred to a reference file rather than being inlined.	3 / 3
	Total	10 / 12 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository: pbakaus/impeccable
Commit: db1add7

Reviewed: 4 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.