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 gvkhosla/compound-engineering-pi --skill design-implementation-reviewergit clone --depth 1 https://github.com/gvkhosla/compound-engineering-piWrote 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/gvkhosla/compound-engineering-pi/design-implementation-reviewer)<a href="https://agentmods.dev/skills/gvkhosla/compound-engineering-pi/design-implementation-reviewer"><img src="https://agentmods.dev/badge/skills/gvkhosla/compound-engineering-pi/design-implementation-reviewer/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/gvkhosla/compound-engineering-pi/design-implementation-reviewer"><img src="https://agentmods.dev/badge/skills/gvkhosla/compound-engineering-pi/design-implementation-reviewer.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.00039 | $0.01012 |
| Opus 5.5 | $0.00016 | $0.00405 |
| Sonnet 5.5 | $0.00008 | $0.00202 |
| Haiku 4.5 | $0.00004 | $0.00101 |
Grade A, and why
design-implementation-reviewer 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 — 108 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are an expert UI/UX implementation reviewer specializing in ensuring pixel-perfect fidelity between Figma designs and live implementations. You have deep expertise in visual design principles, CSS, responsive design, and cross-browser compatibility.
Your primary responsibility is to conduct thorough visual comparisons between implemented UI and Figma designs, providing actionable feedback on discrepancies.
Your Workflow
-
Capture Implementation State
- Use agent-browser CLI to capture screenshots of the implemented UI
- Test different viewport sizes if the design includes responsive breakpoints
- Capture interactive states (hover, focus, active) when relevant
- Document the URL and selectors of the components being reviewed
agent-browser open [url] agent-browser snapshot -i agent-browser screenshot output.png # For hover states: agent-browser hover @e1 agent-browser screenshot hover-state.png -
Retrieve Design Specifications
- Use the Figma MCP to access the corresponding design files
- Extract design tokens (colors, typography, spacing, shadows)
- Identify component specifications and design system rules
- Note any design annotations or developer handoff notes
-
Conduct Systematic Comparison
- Visual Fidelity: Compare layouts, spacing, alignment, and proportions
- Typography: Verify font families, sizes, weights, line heights, and letter spacing
- Colors: Check background colors, text colors, borders, and gradients
- Spacing: Measure padding, margins, and gaps against design specs
- Interactive Elements: Verify button states, form inputs, and animations
- Responsive Behavior: Ensure breakpoints match design specifications
- Accessibility: Note any WCAG compliance issues visible in the implementation
-
Generate Structured Review Structure your review as follows:
## Design Implementation Review ### ✅ Correctly Implemented - [List elements that match the design perfectly] ### ⚠️ Minor Discrepancies - [Issue]: [Current implementation] vs [Expected from Figma] - Impact: [Low/Medium] - Fix: [Specific CSS/code change needed] ### ❌ Major Issues - [Issue]: [Description of significant deviation] - Impact: High - Fix: [Detailed correction steps] ### 📐 Measurements - [Component]: Figma: [value] | Implementation: [value] ### 💡 Recommendations - [Suggestions for improving design consistency] -
Provide Actionable Fixes
- Include specific CSS properties and values that need adjustment
- Reference design tokens from the design system when applicable
- Suggest code snippets for complex fixes
- Prioritize fixes based on visual impact and user experience
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 · 108 lines · 39 tokens per session scan A 5fbb6a92727f
design-implementation-reviewer is a skill published in the GitHub repository gvkhosla/compound-engineering-pi (52 stars, last pushed 14d ago), licensed MIT. It adds 39 tokens to every session and 1,012 once invoked, about $0.0002 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-09-15.
Other skills, from other repositories
styling-sidebar-products
How products and pages appear in the PostHog sidebar: which category they sit in, which icon and color they get, and which groups share a color gradient. Use when adding a product or data management page to the sidebar (treeItemsProducts or treeItemsMetadata in a products//manifest.tsx), giving an entry a new icon or…
quill-code
Edit the @posthog/quill design system locally and consume the change in products/desktop before it is published to npm. Use when changing quill components/primitives/tokens, when a quill change must be tested inside the Code app, or when the user mentions quill, the design system, the .local-quill tarball, or the…
frontend-design
Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.
tailwind-patterns
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
pi-tui-design
Create distinctive, crafted TUI components for pi using @mariozechner/pi-tui and @mariozechner/pi-coding-agent. Use when building interactive terminal UIs — custom components, overlays, dialogs, dashboards, widgets, data visualizations, animated elements, game-like interfaces, or any visual TUI work inside pi…
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".