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 Ertinox7711/SGRR-AGI-V2 --skill presentation-stylinggit clone --depth 1 https://github.com/Ertinox7711/SGRR-AGI-V2Wrote 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/ertinox7711/sgrr-agi-v2/presentation-styling)<a href="https://agentmods.dev/skills/ertinox7711/sgrr-agi-v2/presentation-styling"><img src="https://agentmods.dev/badge/skills/ertinox7711/sgrr-agi-v2/presentation-styling/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/ertinox7711/sgrr-agi-v2/presentation-styling"><img src="https://agentmods.dev/badge/skills/ertinox7711/sgrr-agi-v2/presentation-styling.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.00019 | $0.00819 |
| Opus 5 | $0.00010 | $0.00409 |
| Sonnet 5 | $0.00004 | $0.00164 |
| Haiku 4.5 | $0.00002 | $0.00082 |
Grade A, and why
presentation-styling 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 3d 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.
This is a copy
100% identical to presentation-styling — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 107 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Presentation Styling Skill
CSS classes and HTML patterns used in presentation/index.html.
CSS Component Classes
Layout
.two-col— 2-column grid layout with 24px gap.info-grid— 2-column grid for info cards.col-card— Card inside a column (add.goodfor green border,.badfor red border).info-card— Card in an info grid
Content Blocks
.trigger-box— Gray box with dark left border (for key concepts, prerequisites).how-to-trigger— Green box with green border (for "Try This" actions).warning-box— Orange box with warning border (for important warnings).code-block— Dark code display block with monospace font
Lists
.use-cases— Container for icon+text list items.use-case-item— Individual item with icon and text.feature-list— Simple bordered list
Tags & Badges
.matcher-tag— Gray inline pill tag.weight-badge— Green pill badge (auto-injected by JS for weighted slides)
Code Block Syntax Highlighting
Inside .code-block, use these spans for syntax coloring:
<div class="code-block">
<span class="comment"># This is a comment</span>
<span class="key">field_name</span>: <span class="string">value</span>
<span class="cmd">></span> command to run
</div>
.comment— Green (#6a9955) for comments.key— Blue (#9cdcfe) for property names/keys.string— Orange (#ce9178) for string values.cmd— Yellow (#dcdcaa) for commands/prompts
Slide Type Patterns
Content Slide with Two Columns (Good vs Bad)
<div class="slide" data-slide="N" data-weight="5">
<h1>Title</h1>
<div class="two-col">
<div class="col-card bad">
<h4>Before (Vibe Coding)</h4>
<!-- bad example -->
</div>
<div class="col-card good">
<h4>After (Agentic)</h4>
<!-- good example -->
</div>
</div>
</div>
Do not hardcode <span class="weight-badge"> in slide HTML. The presentation JavaScript injects and removes weight badges automatically.
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.
- 3d ago First seen · 107 lines · 19 tokens per session scan A 919e79acdfd8
presentation-styling is a skill published in the GitHub repository Ertinox7711/SGRR-AGI-V2 (1 stars, last pushed 4d ago), licensed MIT. It adds 19 tokens to every session and 819 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to presentation-styling, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
ag-referencia-motion
Motion/animação de UI: gate de frequência, 3 curvas canônicas, durações <300ms, springs, interruptibilidade, 13 receitas prontas (RECIPES.md). Carregar ANTES de animar qualquer componente, revisar motion ou escolher lib de animação.
visual-qa-verification
Automated visual QA with pixel-level diff comparison, iterative fix loop, and cross-browser verification. Uses pixelmatch for programmatic screenshot comparison with region-based analysis. Covers responsive checks, Lighthouse audits, and accessibility validation. Keywords: verify app, visual QA, compare to Figma…
canva-token-inference
AI-powered design token extraction from Canva screenshots. Uses Claude vision to infer colors, typography, spacing, and effects with confidence scoring. Presents tokens for user confirmation before locking. Keywords: Canva tokens, token inference, design tokens, Canva extraction, AI token detection, color extraction…
design-token-lock
Extracts exact design values from Figma and writes a lockfile that becomes the single source of truth for colors, typography, spacing, and text content. Generates tailwind.config.ts and tokens.css from the lockfile. Keywords: design tokens, lockfile, Figma variables, token extraction, style drift, Tailwind config…
export-design-system
Exports generated components + design-tokens.lock.json as a publishable pnpm workspace. Generates a framework-agnostic tokens package and a framework-specific component library (React/Vue/Svelte via Vite library mode, React Native via tsc). Includes Tailwind preset, ThemeProvider, Changesets versioning, and a properly…
frontend-craft-director
A self-contained frontend design, redesign, audit, implementation, anti-AI-slop, and rendered visual-QA skill for use directly inside a ChatGPT conversation or through a local MCP-accessible project.