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.
git clone --depth 1 https://github.com/rizkyhaksono/portfolio-v3Wrote 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/rules/rizkyhaksono/portfolio-v3/ui-layout-consistency)<a href="https://agentmods.dev/rules/rizkyhaksono/portfolio-v3/ui-layout-consistency"><img src="https://agentmods.dev/badge/rules/rizkyhaksono/portfolio-v3/ui-layout-consistency/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/rules/rizkyhaksono/portfolio-v3/ui-layout-consistency"><img src="https://agentmods.dev/badge/rules/rizkyhaksono/portfolio-v3/ui-layout-consistency.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.03248 | $0.03248 |
| Opus 5.5 | $0.01299 | $0.01299 |
| Sonnet 5.5 | $0.00650 | $0.00650 |
| Haiku 4.5 | $0.00325 | $0.00325 |
Grade A, and why
ui-layout-consistency 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 today.
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 — 118 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI system: one ink on paper
docs/ui/ is the source of truth. This rule summarises it; when they disagree, docs/ui/ wins.
The whole site is one cobalt ink printed on cream paper, set in Plus Jakarta Sans, with riso grain, radius 0, hairline rules, duotone plates and a Hollar engraving band in the colophon. The home hero is a fixed print plate after the "Jakarta Sans" specimen: a dotted cobalt sky, the name in cream, and the Bromo plate (Greive after Salm, 1869) re-cut as contour hatching, its peaks rising in front of the letters. The site opens in Paper (light); dark mode ("Night print") is the same sheet reversed: cream ink on the hero's cobalt, and the menu sheet offers Paper, Night and System. Hierarchy comes from size, weight and rules.
The old monochrome / grayscale language, Instrument Serif, Bricolage Grotesque, Inter, JetBrains Mono, MacWindow panels and glass surfaces are retired. Never reintroduce them.
Tokens
Defined in src/app/globals.css (HSL triples, :root and .dark) and exposed in tailwind.config.ts.
| Class | Paper | Night | Role |
|---|---|---|---|
paper |
#F3ECDC | #1E3C9E | Page, card, text on solid ink |
ink |
#1E3C9E | #F3ECDC | Text, icons, strong rules, solid button, focus, charts, engraving |
ink-soft |
#445BAA | #E6D9BC | Secondary text (paper or tint only) |
rule |
#BFC6DE | #4E67BC | Decorative hairlines |
rule-strong |
#6476B2 | #90A3DF | Control boundaries |
tint |
#E2E4EB | #142C7B | Hover row, code ground, inset |
- shadcn names map onto these (
background/card/popover= paper,foreground/primary/ring/destructive= ink,muted/secondary/accent= tint,muted-foreground= ink-soft,border= rule,input= rule-strong). - Never: palette colours (
blue-500,neutral-*,zinc-*, ...), hex in class names,white/black, opacity on text (text-foreground/70),dark:variants. Tokens flip on<html class="dark">. - Status, errors and destructive actions are shape plus word (8px square filled / outline / dashed, SVG cross, explicit verb). No red, green or amber.
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.
- today Changed · -1 lines · +11 tokens per session 5cd12989e202
- 5d ago Changed · +95 tokens per session 82c5fe4edbd2
- 7d ago Changed · -34 tokens per session a173b3085f1b
- 11d ago Changed · -1 lines · +137 tokens per session c1eb65af43bb
- 12d ago Changed · +33 lines · +2,136 tokens per session 726b1bd4ae6b
- 2mo ago First seen · 87 lines · 903 tokens per session scan A e4172c1ad8f6
ui-layout-consistency is a cursor rule published in the GitHub repository rizkyhaksono/portfolio-v3 (6 stars, last pushed today), licensed MIT. It adds 3,248 tokens to every session, about $0.0130 per session on Opus 5.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 cursor rules, from other repositories
prototype-previewer
Build interactive prototype reviewers with synced review notes and Figma capture pages.
figma-performance
Handling large documents efficiently in the Plugin API.
ant-design
A set of guidelines for using Ant Design, a collection of ready-made interface components, in React applications. It covers code organization, performance, security, testing, and common mistakes.
7-day-nextjs-web-design-cursor
A seven-day design workflow for web products that will be built in Next.js.
clone-ai
Site Clone AI — website klonlama pipeline kuralları.
mermaid
Diagram Creator. Load when the user requests "Create a diagram".