Layout rules
Prevent structural interface defects across hierarchy, density, touch, contrast, state, URLs, themes, and small screens.
Will this interface survive ordinary use and awkward states?
A narrow job with a visible boundary
Use it as constraints before implementation and as a browser-verified checklist after the build.
Input
A planned or rendered tool, dashboard, viewer, admin surface, or other interaction-dense interface.
Outputs
- A scoped avoid-list
- Browser checks across states and viewports
- Specific defects with evidence locations
Boundary
Layout rules catch known failure classes. They do not decide the product job or replace contextual usability testing.
Invocation
humane:layout-rules
See the decision change
Check empty, loading, error, long-label, narrow-screen, touch, keyboard, and both-theme states before approval.
A polished screenshot is expanded into a survivable state matrix.
1 / 2- Happy path only
The populated desktop dashboard looks correct.
Check empty, loading, error, long-label, narrow-screen, touch, keyboard, and both-theme states before approval.
- Hidden URL state
The selected item only lives in JavaScript memory.
Selection receives stable URL state, refresh behavior, and back-forward navigation where the state matters to the task.
Run the skill by name
Install the Humane pack once, then name this skill when the task reaches its boundary.
humane:layout-rules