Agent skill

validate-frontend

Validates web frontend code (TypeScript, ESLint, unit tests) in the frontend/ directory

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/validate-frontend

SKILL.md

Validate Frontend Skill

CLAUDE: When this skill is invoked with /validate-frontend, run these commands in sequence:

bash
cd frontend && bun run type-check && bun run lint && bun run test -- --run

Purpose

Validates the web frontend codebase (Vite + React + TypeScript) for type safety, lint compliance, and test correctness.

Usage

bash
/validate-frontend

What It Validates

Tier 0: TypeScript (fastest feedback)

bash
cd frontend && bun run type-check
  • Catches type errors before runtime
  • Validates all .ts and .tsx files
  • Uses tsconfig.json configuration

Tier 1: ESLint

bash
cd frontend && bun run lint
  • React hooks rules
  • React refresh compliance
  • Import ordering
  • Code style consistency

Tier 2: Unit Tests

bash
cd frontend && bun run test -- --run
  • Runs Vitest in single-run mode
  • Tests components, hooks, and utilities
  • Uses Testing Library for React

Full Validation Command

bash
cd frontend && bun run type-check && bun run lint && bun run test -- --run

Additional Commands

E2E Tests (requires browser, run before PR)

bash
cd frontend && bun run test:e2e

Integration Tests

bash
cd frontend && bun run test:integration

Coverage Report

bash
cd frontend && bun run test:coverage

Interactive Test UI

bash
cd frontend && bun run test:ui

Success Criteria

  • All TypeScript files compile without errors
  • Zero ESLint violations
  • All unit tests pass
  • No type regressions

Related Skills

  • frontend-design - Design system compliance
  • accessibility-check - WCAG compliance audit
  • design-review - Visual consistency review

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results