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 Cavalry-Collective/visual-stack --skill phase-previewgit clone --depth 1 https://github.com/Cavalry-Collective/visual-stackWrote 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/cavalry-collective/visual-stack/phase-preview)<a href="https://agentmods.dev/skills/cavalry-collective/visual-stack/phase-preview"><img src="https://agentmods.dev/badge/skills/cavalry-collective/visual-stack/phase-preview/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/cavalry-collective/visual-stack/phase-preview"><img src="https://agentmods.dev/badge/skills/cavalry-collective/visual-stack/phase-preview.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00107 | $0.02423 |
| Opus 5.5 | $0.00043 | $0.00969 |
| Sonnet 5.5 | $0.00021 | $0.00485 |
| Haiku 4.5 | $0.00011 | $0.00242 |
Grade A, and why
phase-preview 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 1mo 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 — 176 lines — stays where its author put it; the contents beside it link to each section on GitHub.
One design in, one screen per phase out. Each phase file shows everything available by that phase and nothing that isn't, in exactly the positions the approved design already put them — so a phase screen is the real build target for that release, not a redrawing of it. Nothing here is drawn: this is the approved design with the later releases taken out, which is why it can be checked mechanically rather than by eye.
base.html ──┬──► phase-1/base.html only what ships in phase 1
├──► phase-2/base.html phase 1 + phase 2
└──► phase-3/base.html phase 1 + 2 + 3 ( = the base, if phases cover it all )
Subtract only. Nothing is moved, resized, restyled or repositioned; nothing new is invented. That is the entire discipline of this skill, and §4 proves it mechanically rather than trusting the eye.
1 · Resolve the two inputs
The base wireframe — one self-contained HTML file. If the user hasn't named one, ask; don't guess
among the files in design/. Never work from an already-phased file: every phase is cut from the
original.
The phases, and what belongs to each. In priority order:
- A story map (
*.jsonfrom/vstack:user-story-map) —phases[]gives the order and goals,stories[]give what lands when. This is the best input; ask for one if a story map exists. - A spec with P1/P2/P3 priorities, or a roadmap.
- The user tells you the phases in the conversation.
If none of those exist, stop and ask — inventing a release plan is not this skill's job.
2 · Write the phase plan before touching any HTML
Open the base and inventory every element, component and interaction in it. Assign each one the earliest phase it exists in. Write that out and show the user before generating anything:
| Element | Earliest phase | Why |
|---|---|---|
| Candidate table + search | 1 | "Search candidates by name" |
| Bulk-select toolbar | 2 | "Move several candidates at once" |
| "Ask AI" button + drawer | 3 | "Summarise a candidate with AI" |
| Export button | — | not in any story — flag it |
What ships with it
2 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.
- 1mo ago First seen · 176 lines · 107 tokens per session scan A a107810baebe
phase-preview is a skill published in the GitHub repository Cavalry-Collective/visual-stack (11 stars, last pushed 3d ago), licensed MIT. It adds 107 tokens to every session and 2,423 once invoked, about $0.0004 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-30.
Other skills, from other repositories
interface-craft
Raises the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the details that separate a considered product from a generic one. Use this when a screen works but looks unfinished or default, when a layout feels crowded or arbitrary, when a page has no clear focal point, or…
presentation-design
Designs slide decks and one-pagers that carry an argument rather than decorate one — deck structure, headlines that state the takeaway, charts that make a single point, and the different rules board decks and conference talks follow. Use this to build or fix a pitch deck, board deck, or conference talk, to design a…
ux-product-auditor
Audits a website, app, onboarding flow, or design for usability, conversion, and product problems, tying every finding to a business outcome and a severity. Use this to review an interface, diagnose low conversion or activation, find where users drop off, get structured product feedback, or decide which UX fixes to…
visual-content
Designs and directs the visual assets that carry content — carousels, infographics, quote graphics, diagrams, and social imagery — including the generation prompts where they are AI-produced. Use this to turn a written piece into a visual format, design a carousel or infographic, create social graphics, or fix visuals…
brand-identity
Defines and applies visual brand — logo usage, palette, typography, imagery direction, and the guidelines that keep expression consistent across product and marketing surfaces. Use this to establish a brand from scratch, audit whether an existing brand is being applied consistently, build brand guidelines, or decide…
design-styles
Applies a deliberate visual direction to an interface — minimalist editorial, industrial utilitarian, or high-polish commercial — each with its own type scale, palette behavior, surface treatment, and motion. Use this when a product needs a point of view rather than defaults, when choosing between visual directions…