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 sanky369/vibe-building-skills --skill layout-systemgit clone --depth 1 https://github.com/sanky369/vibe-building-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/sanky369/vibe-building-skills/layout-system)<a href="https://agentmods.dev/skills/sanky369/vibe-building-skills/layout-system"><img src="https://agentmods.dev/badge/skills/sanky369/vibe-building-skills/layout-system/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/sanky369/vibe-building-skills/layout-system"><img src="https://agentmods.dev/badge/skills/sanky369/vibe-building-skills/layout-system.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.00148 | $0.01787 |
| Opus 5 | $0.00074 | $0.00894 |
| Sonnet 5 | $0.00030 | $0.00357 |
| Haiku 4.5 | $0.00015 | $0.00179 |
Grade A, and why
layout-system 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 11d 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 — 112 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Layout System
Produce working, mobile-first layout code for the user's actual screens — a refactored page shell, grid, or component layout — not a CSS tutorial. Governing principle: content determines structure. Choose Grid vs Flexbox by the shape of the content, place breakpoints where the content breaks, and let flexible tracks absorb the rest.
When to use / handoffs
- Use for page structure, alignment, responsiveness, grids, overlap/overflow bugs, and breakpoint strategy.
- Spacing values themselves inconsistent across the app (no scale) → establish tokens first via
skills/frontend-design/design-foundation. - Text hard to read at some widths (line length, fluid type) →
skills/frontend-design/typography-system. - Layout is fine but the screen feels cluttered →
skills/frontend-design/visual-hierarchy-refactoring.
Step 1 — Inspect the codebase
- Locate the target. If the user named a screen/component, read it plus its CSS. Otherwise glob the main layout files (
**/layout.*,**/App.*,**/*page*, global CSS). - Detect the styling system. Tailwind classes vs CSS Modules vs styled-components — deliver in the same system.
- Grep for layout smells and record counts:
width:\s*\d+px|w-\[\d+px\]— fixed widths (breakage source #1)position:\s*absoluteoutside overlays/badges — layout by coordinatesfloat:|margin-top:\s*-|margin-left:\s*-— legacy/negative-margin hacks@media— count distinct breakpoint values; >4 distinct min-widths = breakpoint sprawloverflow-xand100vw— horizontal-scroll suspects
- Read existing breakpoints (Tailwind
screens, or media queries) — reuse them unless they're the problem. - Check for spacing tokens — if a scale exists, all new gaps/padding must use it.
Step 2 — Intake
Ask in one batch, only if not inferable: which screen/flow matters most, and the smallest and largest viewports that matter (default: 320px–1440px, content capped ~1200–1280px). Infer density and stack from the code. Don't stall — with a named target and visible code, state assumptions and build.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 11d ago First seen · 112 lines · 148 tokens per session scan A 974d03a45d3d
layout-system is a skill published in the GitHub repository sanky369/vibe-building-skills (30 stars, last pushed 2mo ago), licensed MIT. It adds 148 tokens to every session and 1,787 once invoked, about $0.0007 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-30.
Other skills, from other repositories
core-components
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
new-section
Add a section to a page, matching the markup and CSS conventions already used in this project.
ui-web
Web UI - glassmorphism, Tailwind, dark mode, accessibility.
memstack-security-csp-headers
Use this skill when the user says 'CSP', 'Content-Security-Policy', 'security headers', 'HSTS', 'X-Frame-Options', 'clickjacking', 'unsafe-inline', 'unsafe-eval', or needs to audit, generate, or fix HTTP security headers for a web application. Do NOT use for API route audits or dependency scanning.
mulmoterminal-theme
Build a colour scheme of your own for MulmoTerminal — one that joins Midnight, Nord, Daylight and Solarized in Settings' theme picker and can then be pinned per project. Writes themes in /.mulmoterminal/config.json, the whole-app palette (panels, borders, accent, text), which has no UI for creating one — Settings only…
ijfw-ui-spec
Use when the user says: 'ui spec', 'design contract', 'ui audit setup', 'lock the design', 'visual contract', 'ui review setup', or '/ijfw-ui-spec'. Produces UI-SPEC.md as the visual design contract before any frontend or visual-artifact build, and dispatches ijfw-ui-auditor as the final 6-pillar gate.