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 agentmods add skills/howdeploy/kisa-stack/css-graphicsnpx skills add howdeploy/kisa-stack --skill css-graphicsgit clone --depth 1 https://github.com/howdeploy/kisa-stackWhat 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 | $0.00094 | $0.01567 |
| Opus 5 | $0.00047 | $0.00783 |
| Sonnet 5 | $0.00019 | $0.00313 |
| Haiku 4.5 | $0.00009 | $0.00157 |
Grade A, and why
css-graphics 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 2d 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 — 129 lines — stays where its author put it; the contents beside it link to each section on GitHub.
CSS Graphics — генерация графики средствами HTML/CSS/SVG
Hermes: команды запускай через
terminal, временный HTML пиши файловым инструментом среды, готовый PNG/JPG отдавай в чат черезMEDIA:/absolute/path.
Standalone скилл для создания графики. Пользователь описывает картинку текстом или дает референсное изображение — ты пишешь HTML/CSS/SVG и рендеришь в PNG/JPG через Puppeteer.
Все пути в этом скилле — относительно базовой директории скилла (она сообщается при загрузке скилла; в Claude Code это ~/.claude/skills/css-graphics/, в Codex — ~/.codex/skills/css-graphics/).
Первый запуск
Если Puppeteer еще не установлен, выполни из базовой директории скилла:
bash scripts/setup.sh
Режимы работы
Режим 1 — из текстового описания
Пользователь описывает что хочет увидеть → ты пишешь HTML/CSS/SVG → рендеришь.
Режим 2 — по референсному изображению
Пользователь дает изображение → ты читаешь его через Read tool → анализируешь цвета, формы, layout, типографику → воссоздаешь в CSS/SVG → рендеришь.
Процесс рендера
- Write HTML-файл в
.css-graphics-temp.html(в CWD пользователя) - Bash — запустить render.js (путь к скрипту — от базовой директории скилла):
node <база скилла>/scripts/render.js \ --input .css-graphics-temp.html \ --output <имя-файла>.png \ --width <W> --height <H> - Bash — удалить временный файл:
rm .css-graphics-temp.html - Сообщить пользователю путь к файлу и итоговые размеры
Обязательная HTML-структура
Каждый сгенерированный HTML обязан содержать:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
</style>
<!-- Google Fonts если нужны -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Контент здесь -->
</body>
</html>
What ships with it
4 files 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.
- 2d ago First seen · 129 lines · 94 tokens per session scan A cf9e0431a53b
css-graphics is a skill published in the GitHub repository howdeploy/kisa-stack (23 stars, last pushed 2mo ago), licensed MIT. It adds 94 tokens to every session and 1,567 once invoked, about $0.0005 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
embedded-captions
Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet…
slideshow
Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't…
faceless-explainer
Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a…
general-video
Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated…
motion-graphics
A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI…
hyperframes-registry
Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block…