TypeScript Review for Metabase

What this skill does

• •Enforces 'no-any' policy via LSP-based verification
• •Validates accessibility (A11y) including focus traps and labels
• •Identifies missing user-facing event tracking in new flows
• •Detects unoptimized dependencies affecting bundle size
• •Ensures compliance with frontend/CLAUDE.md standards

When to use it

• ✓Before submitting a pull request for new frontend features
• ✓When reviewing changes in a colleague's PR to catch hidden defects
• ✓During refactors of existing Metabase UI components
• ✓When adding new analytical interactions to the dashboard

When not to use it

• ✕For backend Clojure logic or database schema migrations
• ✕For general-purpose code not related to the Metabase frontend
• ✕When you need an architectural design review rather than a standards check

How to invoke it

Example prompts that trigger this skill:

• “Review the changes in the current branch against Metabase standards.”
• “Run typescript-review on this PR to check for 'any' types and accessibility.”
• “Check these commits for compliance with the frontend development guide.”
• “Examine the performance and bundle impact of my recent UI changes.”
• “Perform a standards-based review of the diff in the current directory.”

Example workflow

1. Open the terminal in the Metabase repository root.
2. Stage the changes you wish to review.
3. Trigger the typescript-review skill to analyze the diff.
4. Review the prioritized output, starting with 'any' type violations.
5. Apply fixes for identified accessibility or performance warnings.
6. Re-run the skill to verify all critical findings are resolved.

Prerequisites

• –TypeScript/JavaScript development environment
• –Metabase repository access

Pitfalls & limitations

• !Prioritizes linting/standards over deep architectural logic
• !May flag valid performance optimizations if they resemble anti-patterns
• !Cannot detect missing tracking events if the naming conventions are ambiguous

FAQ

How it compares

Unlike a generic code-review prompt, this skill is pre-configured with Metabase-specific documentation paths and strict enforcement priorities, preventing inconsistent feedback.

Source & trust

From the source: “# TypeScript/JavaScript Code Review Skill @./../_shared/typescript-commands.md @./../_shared/react-redux-patterns.md ## Main Focus **Primary standard: the [`typescript-write`](../typescript-write/SKILL.md) skill.** Load it first — it defines the authoring rules this review enforces, alongside `front…”

# TypeScript/JavaScript Code Review Skill

@./../_shared/typescript-commands.md
@./../_shared/react-redux-patterns.md

## Main Focus

**Primary standard: the [`typescript-write`](../typescript-write/SKILL.md) skill.** Load it first — it defines the authoring rules this review enforces, alongside `frontend/CLAUDE.md` and `docs/developers-guide/frontend.md`.

Adherence to `typescript-write` is the **highest-priority** review dimension: rank any violation of its provisions above all other findings. Treat its **no-`any` hard rule** (no explicit *or* implicit `any` in new code) as **blocking**, and verify it with the LSP rather than by eye.

Review in this priority order:

1. **Violations of [`typescript-write`](../typescript-write/SKILL.md) provisions** — no-`any`, type tightening, type modeling, null/undefined handling, naming, structure, comments. Highest priority; block on the no-`any` rule.
2. Compliance with `frontend/CLAUDE.md`.
3. Readability and maintainability.
4. Appropriate test coverage.

## Blind spots — act as the missing reviewer

These rarely surface in team reviews, so this skill should raise them. They are **additive** — raise them, but rank them below `typescript-write` violations:

- **Accessibility.** Interactive elements need keyboard support, focus management, and accessible names. Flag missing `aria-label`/`aria-labelledby`, non-semantic click targets, modals without focus trap, icon-only buttons without labels, and form inputs without a linked label.
- **Performance.** Flag areas that scale poorly and aren't memoized; inline object/array literals passed to memoized children; effects that fire on every batch of a progressive load; and new dependencies added to hot paths.
- **Security.** Evaluate potential security issues in new code.
- **Bundle size.** Flag new large dependencies, default imports from icon or util libs, and heavy modules imported at route-load time.
- **Analytics.** User-facing flows should emit tracking events. If a PR adds a new flow (button, modal, navigation) without a tracking event, ask whether one is expected.

Quoted from metabase/metabase for reference — see the original for the authoritative, latest version.

Recommended Rules

Recommended Workflows

Recommended MCP Servers