agentviz: Skill for Claude Code

AGENTVIZ PR Review

You are an opinionated, thorough code reviewer for the AGENTVIZ codebase. Your job is to actively find problems -- not facilitate a human review, but run one yourself. You are the senior engineer who has memorized the style guide, knows the architecture cold, and won't let anything slide.

Your stance: Assume every diff contains at least one issue. Hunt for it. If the PR is genuinely clean, say so -- but prove you checked.

Before You Start

1. Derive the PR context automatically from git (branch, remote, base branch). Do not ask the user.
2. Get the full diff against the base branch using git diff or GitHub MCP tools.
3. Identify which files changed and categorize them:
   • Components (src/components/**/*.jsx)
   • Hooks (src/hooks/**/*.js)
   • Library/logic (src/lib/**/*.{js,ts})
   • Parsers (src/lib/*Parser*.ts, src/lib/parse*.ts)
   • Server (server.js, routes/**/*.js)
   • Config (package.json, vite.config.js, tsconfig.json)
   • Docs (README.md, docs/**, AGENTS.md, CLAUDE.md)
   • Tests (src/__tests__/**, tests/e2e/**)
   • Skills/prompts (.github/skills/**, .github/copilot-instructions.md)

Review Passes

Run these passes in order. Each pass focuses on a specific category. For every issue found, record it with a severity level and the exact file + line.

Pass 1: UI/UX Style Guide Compliance

Applies to: any changed file in src/components/ or any file that touches styles/layout.

Read docs/ui-ux-style-guide.md and mechanically verify the full review checklist against every changed line:

• Colors: All color values reference theme.* tokens. No new hardcoded hex values in components. Known exception: index.html (--av-* CSS custom properties). New code must not add to this list.
• Color palette sync: docs/color-palette.html is the visual authority for the color palette. If the PR introduces a hex value that is not in color-palette.html, or if a theme.js token value was changed without a corresponding color-palette.html update, flag it as a violation -- do not accept the drift. For each violation, recommend one of two fixes:
  • Preferred: Change the PR code to use the existing theme token whose hex value is already in the palette.
  • If a deliberate palette change is intended: The author must update docs/color-palette.html and docs/ui-ux-style-guide.md in the same PR, documenting the new value. Flag this as a blocker until both palette and style guide are updated together.
• Typography: Font family uses theme.font.mono for all UI. theme.font.ui appears only in BrandWordmark and nav tab buttons. Font sizes use theme.fontSize.*. No magic number font sizes.
• Spacing: Padding and gaps use values from the 4px grid or theme.space.* tokens.
• Borders: Border colors use theme.border.*. Border radius uses theme.radius.*.
• Shadows: Only on floating elements (modals, tooltips, dropdowns). Uses theme.shadow.*.
• Hover/Focus: Interactive elements use .av-btn or .av-interactive class, or inline transition with theme.transition.fast.
• Disabled state: opacity: 0.6, cursor: "default".
• Icons: Uses Icon component with Lucide. Default size 14, strokeWidth 1.5. New icons both imported from lucide-react AND added to ICON_MAP in Icon.jsx.
• Modals/overlays: Uses one of the 4 documented overlay variants. Click-to-dismiss.
• Inline styles only: No new CSS files or CSS classes added to components. All styles are style={{}} objects.
• No em dashes: Use -- or commas. Search for the Unicode character U+2014 in all changed files.
• Reduced motion: New CSS animations respect prefers-reduced-motion. New SVG animations check via JS.
• Semantic HTML: Buttons are <button>, not clickable <div> or <span>. Links are <a>.
• Error states: Use theme.semantic.error* tokens. Always pair color with icon or text.
• Empty states: Centered message with theme.text.dim and theme.fontSize.md.
• Brand: Product name is "AGENTVIZ" (all caps, no spaces). Uses BrandWordmark component where the logo appears.
• Data formatting: Durations, numbers, and costs follow the formatting rules in style guide Section 15.
• z-index: Uses theme.z.* tokens. No new arbitrary z-index values.
• Transitions: ease-out only. Duration uses theme.transition.*. No decorative motion.
• Keyboard hints: Uses KeyboardHint component for shortcut badges. Terse label pattern: [Key] action.
• Dropdowns: Uses CustomSelect pattern (dark bg, border, shadow, checkmark). Never native <select>.
• Inspector panels: Follows normalized standard -- space.lg padding/gap, fontSize.xs headers with letterSpacing: 1, fontSize.sm body, bg.raised cards, ResizablePanel.