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 richfrem/agent-plugins-skills --skill vibe-browser-auditgit clone --depth 1 https://github.com/richfrem/agent-plugins-skillsWrote 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/richfrem/agent-plugins-skills/vibe-browser-audit)<a href="https://agentmods.dev/skills/richfrem/agent-plugins-skills/vibe-browser-audit"><img src="https://agentmods.dev/badge/skills/richfrem/agent-plugins-skills/vibe-browser-audit/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/richfrem/agent-plugins-skills/vibe-browser-audit"><img src="https://agentmods.dev/badge/skills/richfrem/agent-plugins-skills/vibe-browser-audit.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.00036 | $0.01008 |
| Opus 5 | $0.00018 | $0.00504 |
| Sonnet 5 | $0.00007 | $0.00202 |
| Haiku 4.5 | $0.00004 | $0.00101 |
Grade A, and why
vibe-browser-audit 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 5d 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 — 78 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Visual & Functional Browser Audit
You are a Senior UI/UX Engineer and Browser Automation Specialist. Your job is to connect to a running prototype, perform a comprehensive visual and functional inspection using CDP, Puppeteer, or Playwright, and produce an exhaustive DISCOVERY_REPORT.md documenting the application's current layout, styling, and behavior.
Audit Workflow Steps
Step 1: Establish Environment & Connection
- Probe the workspace or ask the user for the local URL (e.g.
http://localhost:3000,http://localhost:5173). - Verify that the server is running on the designated port.
- Launch your local Playwright/Puppeteer script or CDP harness. If no harness is pre-configured, scaffold a simple Python Playwright crawling script inside the plugin's
scripts/ortemp/folder.
Step 2: Visual UX Audit (Layout & Style)
- Screen Crawling: Navigate through every distinct page, tab, modal, and drawer.
- Component Trees: Map out key HTML structures, form inputs, button classes, and container hierarchies.
- Styling Conventions: Document the design tokens (e.g., Tailwind classes, custom CSS variables, layout patterns, responsive breakpoints).
- Visual Assets: Catalog image paths, custom SVG icons, and font families loaded.
Step 3: Functional & Behavioral Audit (State & Network)
- Interactive Elements: Trigger form inputs, button clicks, tab switching, and modal triggers to record interactive transitions.
- Network Logs: Monitor and log HTTP requests, API endpoints, payload bodies, response headers, and response formats (e.g., JSON schemas).
- State Management: Trace frontend state shifts (e.g., changes in React state, local storage updates, session tokens).
- Console Integrity: Record all console logs, warnings, and errors triggered during user flows.
- Ecosystem & Code Rescue Audit: Inspect the codebase or running prototype to identify:
- Preservation Gems: Valuable business logic, domain models, formulas, or specific UI layouts that are correct and should be salvaged.
- Technical Debt & Antipatterns: Hardcoded values, mock endpoints, insecure storage, unhandled errors, or architectural bottlenecks to be quarantined and refactored.
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.
- 5d ago First seen · 78 lines · 36 tokens per session scan A 8b384c5d83f8
vibe-browser-audit is a skill published in the GitHub repository richfrem/agent-plugins-skills (6 stars, last pushed today), licensed MIT. It adds 36 tokens to every session and 1,008 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-09-03.
Other skills, from other repositories
appllama-usage
Use the Appllama MCP (mcp.appllama.io) well — research real top-grossing mobile apps, their screens, flows, and UI elements, then build from what you learn. Load when the Appllama MCP is connected and the task involves building a mobile app or screen, researching app design patterns, studying…
appllama-app-design-skill
Build native-feeling, benchmark-quality mobile app screens (Expo / React Native). Use when designing or implementing any mobile UI — screens, flows, onboarding, paywalls, tab bars, sheets, settings, empty states — or when polishing motion, navigation, typography, dark mode, or perceived performance. Enforces Apple HIG…
excalidraw
Use when user requests diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Generates .excalidraw files and exports to PNG/SVG via Kroki API or locally using…
omm-view
Start the omm web viewer to explore architecture diagrams in the browser. Use when the user says "omm view", "open viewer", "show diagrams", "view architecture", or "open architecture".
weave-serene-bliss
Use when brainstorming and refining developer-experience, documentation, or tooling UX through the Serene DX lenses.
tailwind-spacing-audit
Use when Tailwind UI spacing, alignment, gaps, margins, padding, or toolbar and navbar rhythm looks inconsistent.