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 ArtemioPadilla/agent-triforce --skill visual-companiongit clone --depth 1 https://github.com/ArtemioPadilla/agent-triforceWrote 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/artemiopadilla/agent-triforce/visual-companion)<a href="https://agentmods.dev/skills/artemiopadilla/agent-triforce/visual-companion"><img src="https://agentmods.dev/badge/skills/artemiopadilla/agent-triforce/visual-companion/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/artemiopadilla/agent-triforce/visual-companion"><img src="https://agentmods.dev/badge/skills/artemiopadilla/agent-triforce/visual-companion.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.00046 | $0.00598 |
| Opus 5 | $0.00023 | $0.00299 |
| Sonnet 5 | $0.00009 | $0.00120 |
| Haiku 4.5 | $0.00005 | $0.00060 |
Grade A, and why
visual-companion 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 11d 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 — 73 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Visual Brainstorming Companion
A browser-based tool for visual design work during: $ARGUMENTS
Availability Check
Before offering the companion, check if browser tools are available:
- If
mcp__claude-in-chrome__*tools are accessible: companion is available - If not: proceed text-only, do not offer the companion, this is not an error
Consent Flow
Offer once per session, in its own message (no other content):
Some of what we're working on might be easier to explain if I can show it to you in a web browser. I can put together mockups, diagrams, comparisons, and other visuals as we go. Want to try it?
Wait for response. If declined, proceed text-only.
Per-Question Decision Rule
Even after acceptance, decide FOR EACH QUESTION whether to use browser or terminal:
Use the browser when the user would understand better by SEEING it:
- Mockups and wireframes
- Layout comparisons (side-by-side)
- Architecture diagrams (boxes and arrows)
- Data flow visualizations
- State machine diagrams
- Color/typography comparisons
Use the terminal when the content is fundamentally TEXT:
- Requirements questions
- Conceptual choices
- Tradeoff lists
- Scope decisions
- Technical constraints
- A/B/C option descriptions
A question about a UI topic is not automatically visual. "What does personality mean here?" is terminal. "Which layout works better?" is browser.
Rendering Guidelines
When rendering in the browser:
- Create a new tab with
mcp__claude-in-chrome__tabs_create_mcp - Use
mcp__claude-in-chrome__navigateto load an HTML data URI or local file - Render with:
- Tailwind CSS for styling (via CDN)
- Clean, semantic HTML
- Dark/light mode support
- Responsive layout
What to Render
- Architecture diagrams: HTML/CSS boxes with flexbox/grid, connecting lines
- UI mockups: Tailwind-styled components at realistic sizes
- Comparisons: Split-pane layouts, side-by-side options with labels
- Data flows: Labeled boxes with directional arrows
- State machines: Node-edge diagrams with transition labels
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.
- 11d ago First seen · 73 lines · 46 tokens per session scan A 1784f0273897
visual-companion is a skill published in the GitHub repository ArtemioPadilla/agent-triforce (3 stars, last pushed 4mo ago), licensed MIT. It adds 46 tokens to every session and 598 once invoked, about $0.0002 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-31.
Other skills, from other repositories
aesthetic-instrument
A committed aesthetic in the sense of skills/committed-aesthetic/SKILL.md: every rule below is checkable, and every value was read out of the source — packages/board/public/index.html and greatcto-site/styles.css — rather than chosen to write this document.
committed-aesthetic
How to write — and how to use — a skill that IS one aesthetic rather than a catalogue of them. A catalogue lets an agent pick, and it picks the modal option; a committed aesthetic makes it execute one thing precisely, against rules you can check. Use when a design keeps coming out competent and forgettable, when…
review-all
Multi-agent code review for diffs (project-agnostic). Covers standards, bugs, security, DRY, smells, perf, tests, API contracts, a11y/i18n. Verifies each finding to eliminate false positives. Use for /review-all, pre-PR/pre-commit review, or auditing uncommitted/staged changes.
fidelity-gate
Build a UI against a frozen visual reference without drift - an inventory extracted before any code, a relics list, and a gate that MEASURES computed styles on a fixture carrying the reference's own data. Use when a mockup, design spec or screenshot is the contract.
design
Create a doc-as-code design package from a PRD or SPEC. Conditionally generates C4 diagrams (Context/Container/Component), sequence diagrams, ER diagram + Data Dictionary, OpenAPI 3.0, AsyncAPI 3.0, ADRs, domain glossary, state diagrams, and deployment view as Mermaid-rendered Markdown files. Use when PM mentions…
figma-fetch
Extract frame/component structure and all visible text from a Figma design URL. Use whenever a prompt or a fetched issue contains a figma.com/design or figma.com/file link.