review-design

review-design is a skill for Claude Code from gtrabanco/agentic-workflow. It costs 75 tokens per session (685 once invoked), scanned A, original, MIT.

An internal checklist for reviewing changes to a user interface against the project's design rules. It checks consistency, screen states, responsiveness, and reuse.

In plain words
What is it for?
Use it to review changed UI components or screens for loading, empty, error, and success states, responsive layouts, translations, visual hierarchy, and consistent interaction patterns.
Why use it?
It helps catch visual and interaction problems that code tests may miss. It also makes each finding traceable to a documented design rule.

Skill for Claude Code

Written for Claude Code: user-invocable in frontmatter.

Part of the agentic-workflow plugin — 38 skills shipped together

Install

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.

agentmods
npx agentmods add skills/gtrabanco/agentic-workflow/review-design
Any agent
npx skills add gtrabanco/agentic-workflow --skill review-design
Clone the repo
git clone --depth 1 https://github.com/gtrabanco/agentic-workflow

Made for: Claude Code.

Or install agentic-workflow, the plugin that ships this one along with the rest of its 38 skills.

Wrote 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.

agentmods badge for review-design

README.md
[![agentmods](https://agentmods.dev/badge/skills/gtrabanco/agentic-workflow/review-design.svg)](https://agentmods.dev/skills/gtrabanco/agentic-workflow/review-design)
Your own site
<a href="https://agentmods.dev/skills/gtrabanco/agentic-workflow/review-design"><img src="https://agentmods.dev/badge/skills/gtrabanco/agentic-workflow/review-design.svg" alt="Measured on agentmods" height="20"></a>
Per session 75 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 685 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00075 $0.00685
Opus 5 $0.00037 $0.00342
Sonnet 5 $0.00015 $0.00137
Haiku 4.5 $0.00007 $0.00068

Measured 2d ago against content hash 009ea8830ea5, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, from the pricing page.

Security

Grade A, and why

review-design 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.

packages/pi-agentic-workflow/skills/review-design/SKILL.md · 70 lines

How it starts

The opening of the file, as written. The whole thing — 70 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Review Design (internal)

Composed by review-change / product-audit within their conversation — on any agent, follow this file inline as the routed step. Findings only; never edits, never refactors.

Scope

The diff or path/glob the caller passes; default the current change vs the default branch. State the scope at the top of the returned table.

Checklist (evaluate EVERY item — none is optional; n/a must be stated)

✓ Read the project's design doc first (e.g. docs/frontend/DESIGN.md) — cite the rule for every finding ✓ Changed components reuse the design system (no one-off styles/colors/spacing duplicating existing tokens or components) ✓ Every new/changed view handles ALL states: loading, empty, error, success (cite each) ✓ Responsive behavior stated and honored at the project's breakpoints (n/a if the platform has none) ✓ No hardcoded user-facing strings where the project declares i18n (cite the i18n doc) ✓ Visual hierarchy: primary action distinguishable, one primary action per view ✓ Consistency with sibling screens (same patterns for the same interactions — cite the diverging sibling) ✓ Destructive actions require confirmation and are visually distinct ✓ Feedback on every user action (submit, save, fail) — no silent operations

Materiality bar

Report a row only when a competent user's outcome changes or a rule the project explicitly declares is violated — cite the rule it violates beside the evidence. Not findings: comment/punctuation typos, formatting-only drift, style preference with no cited rule, hypothetical robustness beyond the SPEC's named scenarios. An empty table with Decision: PASS is the expected result for a well-formed change — never pad the table.

Return exactly

REVIEW DESIGN — scope: <scope>

| # | Finding | Sev | Evidence | Suggested fix |
|---|---------|-----|----------|---------------|
| 1 | <what>  | critical|major|minor | <file:line> | <smallest action> |

Checklist: <n> evaluated, <n> pass, <n> findings, <n> n/a (<which + why>)
Summary: <1-2 sentences>
Decision: PASS | FAIL

Read the full file on GitHub · 70 lines

Changes

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.

  1. 2d ago Changed · +9 lines 009ea8830ea5
  2. 6d ago First seen · 61 lines · 75 tokens per session scan A 0cb0df11857e

Subscribe to this mod's changes

review-design is a skill published in the GitHub repository gtrabanco/agentic-workflow (21 stars, last pushed today), licensed MIT. It adds 75 tokens to every session and 685 once invoked, about $0.0004 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.

Related

Other skills, from other repositories

create-glyph

Create R-based pictogram glyphs for skill, agent, or team icons in the visualization layer. Covers concept sketching, ggplot2 layer composition using the primitives library, color strategy, registration in the appropriate glyph mapping file and manifest, rendering via the build pipeline, and visual verification of the…

pjt222/agent-almanac · 106 tokens

design-cli-output

Design terminal output for a CLI tool with chalk colors, Unicode glyphs, multiple verbosity levels (human, verbose, quiet, JSON), and consistent voice rules. Covers color palette selection, status indicator design, reporter function architecture, ceremony/narrative output variants, and cross-terminal compatibility.…

pjt222/agent-almanac · 96 tokens

create-2d-composition

Compose 2D graphics programmatically using SVG generation, diagram layout algorithms, image compositing, and batch processing workflows. Use when generating diagrams, flowcharts, or infographics programmatically, creating reproducible scientific figures, automating production of badges or visual assets, building…

pjt222/agent-almanac · 77 tokens

create-3d-scene

Set up a Blender scene programmatically via Python (bpy) with objects, materials, lighting, camera, and environment configuration. Use when creating reproducible 3D visualization scenes, automating product or architectural rendering setup, generating multiple scene variations programmatically, building template scenes…

pjt222/agent-almanac · 77 tokens

design-shiny-ui

Design Shiny application UIs using bslib for theming, layoutcolumns for responsive grids, value boxes, cards, and custom CSS/SCSS. Covers page layouts, accessibility, and brand consistency. Use when building a new Shiny app UI from scratch, modernizing an existing app from fluidPage to bslib, applying brand theming…

pjt222/agent-almanac · 96 tokens

audit-icon-pipeline

Detect missing glyphs, icons, and HD variants by comparing registries against glyph mapping files, icon directories, and manifests. Reports gaps for skills, agents, and teams across all palettes.

pjt222/agent-almanac · 43 tokens