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/fumito-ito/mdcvalultWrote 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/fumito-ito/mdcvalult/best-practicies-for-drawing-infographic-design)<a href="https://agentmods.dev/rules/fumito-ito/mdcvalult/best-practicies-for-drawing-infographic-design"><img src="https://agentmods.dev/badge/rules/fumito-ito/mdcvalult/best-practicies-for-drawing-infographic-design/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/fumito-ito/mdcvalult/best-practicies-for-drawing-infographic-design"><img src="https://agentmods.dev/badge/rules/fumito-ito/mdcvalult/best-practicies-for-drawing-infographic-design.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.00000 | $0.00709 |
| Opus 5 | $0.00000 | $0.00354 |
| Sonnet 5 | $0.00000 | $0.00142 |
| Haiku 4.5 | $0.00000 | $0.00071 |
Grade A, and why
best-practicies-for-drawing-infographic-design 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 12d 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 — 66 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Objective
Transform the given content into a flawless, graphic recording-style HTML infographic, as if created by a world-class designer. The goal is to achieve the highest standards in both information design and visual aesthetics. Utilize hand-drawn-style shapes and icons to visually represent the content.
Design Specifications
1. Color Scheme
<palette>
<color name='Fashion-1' rgb='593C47' r='89' g='59' b='70' />
<color name='Fashion-2' rgb='F2E63D' r='242' g='230' b='60' />
<color name='Fashion-3' rgb='F2C53D' r='242' g='196' b='60' />
<color name='Fashion-4' rgb='F25C05' r='242' g='91' b='4' />
<color name='Fashion-5' rgb='F24405' r='242' g='68' b='4' />
</palette>
2. Graphic Recording Elements
- Arrange information sequentially from top left to right, then downward.
- Use Japanese hand-drawn-style fonts (Yomogi, Zen Kurenaido, Kaisei Decol).
- Incorporate hand-drawn-style frames, arrows, banners, and speech bubbles.
- Combine text with visual elements (icons, simple shapes).
- Highlight keywords with colored underlines and marker effects.
- Connect related concepts with lines or arrows.
- Effectively place emojis and icons (✏️📌📝🔍📊, etc.).
3. Typography
- Title: 32px, bold, with a gradient effect.
- Subtitle: 16px, #475569.
- Section Headings: 18px, #1e40af, with an accompanying icon.
- Body Text: 14px, #334155, line height 1.4.
- Font Import:
<style> @import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Yomogi&family=Zen+Kurenaido&display=swap'); </style>
4. Layout
- Header: Left-aligned title + right-aligned date/source.
- Three-column structure: Left 33%, Center 33%, Right 33%.
- Card-style components: White background, 12px rounded corners, subtle shadow.
- Consistent spacing and hierarchical structure between sections.
- Appropriate use of glassmorphism.
- Full-width layout (100%).
Graphic Recording Techniques
- Maintain a balance between text and visual elements.
- Emphasize keywords using frames or color.
- Visualize concepts with simple icons and shapes.
- Represent numerical data with concise graphs or charts.
- Use connecting lines and arrows to clarify relationships.
- Effectively utilize whitespace for readability.
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.
- 12d ago First seen · 66 lines · 0 tokens per session scan A f1eff28c0c26
best-practicies-for-drawing-infographic-design is a cursor rule published in the GitHub repository fumito-ito/mdcvalult (33 stars, last pushed 1y ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 709 tokens. 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 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".