Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add Uxcel-Lab/product-skills --skill layout-spacing-gridsgit clone --depth 1 https://github.com/Uxcel-Lab/product-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/uxcel-lab/product-skills/layout-spacing-grids)<a href="https://agentmods.dev/skills/uxcel-lab/product-skills/layout-spacing-grids"><img src="https://agentmods.dev/badge/skills/uxcel-lab/product-skills/layout-spacing-grids/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/uxcel-lab/product-skills/layout-spacing-grids"><img src="https://agentmods.dev/badge/skills/uxcel-lab/product-skills/layout-spacing-grids.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00128 | $0.03031 |
| Opus 5 | $0.00064 | $0.01515 |
| Sonnet 5 | $0.00026 | $0.00606 |
| Haiku 4.5 | $0.00013 | $0.00303 |
Grade A, and why
ux-layout-spacing-grids scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 130 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Layout, Spacing & Grids Skill
How this skill behaves (read first)
This is a generative foundation skill. Layout is where an AI assistant's output is quietly amateurish: Claude reaches for arbitrary spacing (13px here, 27px there), pads things by eyeball, mixes alignments, drops content onto the canvas with no grid, and gives every element the same visual weight so nothing reads as more important. The fixes are systematic, not cosmetic — a base unit, a scale, a grid, consistent alignment, and space used deliberately to group and to rank.
So this skill gates:
- Establish context — platform/density, content type, and whether the layout must be responsive (these set the base unit, the grid type, and the column model).
- Apply the always-true core — one base unit and a spacing/sizing scale, align to a grid, let proximity and whitespace group, and use space to build hierarchy.
- Surface the context-dependent decisions (base unit, grid type, column model, sizing approach, golden-ratio/rule-of-thirds, token layer, grid-breaking) with trade-offs; let the user choose.
Then it hands off to ux-aesthetics-audit (the composition/spacing/hierarchy review) and ux-accessibility-audit (touch targets, text scaling, reflow), plus ux-mobile-responsiveness-audit when the layout is responsive/mobile.
This skill also owns the spatial visual-hierarchy, alignment, and composition fundamentals (it absorbed the retired visual-hierarchy generative content): hierarchy created through size, position, and space; alignment and proximity; whitespace; rule-of-thirds/golden-ratio placement. It defers type scale/readability to ux-typography, color/contrast for emphasis to ux-color, and the evaluative composition review to ux-aesthetics-audit.
Step 0 — Establish context before laying out
Ask if not known; state the assumption if proceeding without an answer:
- Platform & density — mobile vs. desktop, and how dense the UI is. Dense/compact tools may want a 4px base; most product UIs use 8px. Mobile tightens margins and must preserve touch-target spacing.
- Content type — uniform items (gallery, dashboard cards), long-form text, mixed media, or tabular data. This drives the grid choice (column vs. modular vs. manuscript vs. hierarchical).
- Responsive or fixed context — will it adapt across breakpoints, or run in a controlled environment (kiosk, signage)? Responsive needs a column model and breakpoints; fixed is the exception, not the default.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 130 lines · 128 tokens per session scan A 0342e90c2254
ux-layout-spacing-grids is a skill published in the GitHub repository Uxcel-Lab/product-skills (10 stars, last pushed 2mo ago), licensed MIT. It adds 128 tokens to every session and 3,031 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
pm-brand-motion
A guided process for defining a brand's motion style and making a logo animation demonstration.
pm-proto
A product-prototyping workflow for planning how an application should work and what its screens should contain. It connects product requirements to interface layouts and interactions.
diagram-design
Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, treemap, bar, line, Gantt and scatter charts, high-level…
design-mobile-apps
Use when the user wants to design a mobile app or UI screens, when they mention their Sleek (sleek.design) projects, or when implementing Sleek designs in code (HTML, React Native, SwiftUI).
dengguang-zhaoming-bikeng-zhinan
A Chinese-language knowledge guide about home lighting, including ceiling lights, light strips, color temperature, color rendering, and room zoning.
appllama-app-design-skill
Build native-feeling, benchmark-quality mobile app screens (Expo / React Native). Use when designing or implementing any mobile UI — screens, flows, onboarding, paywalls, tab bars, sheets, settings, empty states — or when polishing motion, navigation, typography, dark mode, or perceived performance. Enforces Apple HIG…