verify-frontend
Run a comprehensive verification pipeline for TypeScript/React code to ensure build stability.
Install
mkdir -p .claude/skills/verify-frontend && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/15212" && unzip -o skill.zip -d .claude/skills/verify-frontend && rm skill.zipInstalls to .claude/skills/verify-frontend
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Run the full frontend verification pipeline for Paryty — TypeScript check, build, and tests. Use after any TypeScript/React code change.Key capabilities
- →Run TypeScript checks to ensure zero type errors.
- →Build the frontend project cleanly with no warnings.
- →Execute unit tests and ensure all tests pass.
- →Perform linting to identify and fix code style violations.
- →Verify that no `any` types are used in the code.
- →Ensure all components are functional with hooks.
How it works
The skill executes a sequence of commands for TypeScript checking, building, unit testing, and linting, stopping at the first failure and reporting the specific error.
Inputs & outputs
When to use verify-frontend
- →Verifying frontend code after changes
- →Automating build and test pipelines
- →Enforcing React component best practices
About this skill
Verify Frontend — Paryty Frontend Verification Pipeline
Execution Steps
Gate 1: TypeScript Check
cd paryty-v1.0/frontend && npx tsc --noEmit 2>&1
Expected: Zero type errors.
Gate 2: Build
cd paryty-v1.0/frontend && npm run build 2>&1
Expected: Clean build with no warnings.
Gate 3: Unit Tests
cd paryty-v1.0/frontend && npx vitest run 2>&1
Expected: All tests pass.
Gate 4: Lint
cd paryty-v1.0/frontend && npx eslint src/ 2>&1
Expected: Zero lint errors.
Checklist
- No
anytype used - All components are functional with hooks
-
data-testidon interactive elements - Zustand stores properly typed
- No prop drilling >3 levels
Exit Protocol
- ALL gates pass: Report "Frontend verification passed"
- TypeScript fails: Report error with file:line, STOP
- Build fails: Report build errors, STOP
- Test fails: Report test name and assertion, STOP
- Lint fails: Report file:line and rule violation, STOP
When not to use it
- →When the task does not involve TypeScript or React code changes.
- →When the task is not about frontend verification.
- →When the task is not related to build, test, or linting processes.
Limitations
- →It requires the `paryty-v1.0/frontend` directory structure.
- →It uses `npx tsc --noEmit` for TypeScript checks.
- →It uses `npx vitest run` for unit tests.
How it compares
This skill automates a multi-stage verification pipeline for frontend code, enforcing strict quality gates like zero type errors and lint errors, unlike a manual or less stringent review process.
Compared to similar skills
verify-frontend side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| verify-frontend (this skill) | 0 | 2mo | Review | Intermediate |
| feature-flags | 6 | 6mo | Review | Intermediate |
| frontend-review | 0 | 2mo | Review | Intermediate |
| ui-ux-expert-skill | 91 | 9mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by DeLaser123
View all by DeLaser123 →You might also like
feature-flags
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
frontend-review
yukihito-jokyu
フロントエンド（TypeScript/CSS/E2Eテスト）の変更点を自動検証（Biome/Playwright）および目視レビューし、プロジェクト特有のルールや一般的なベストプラクティスを検証するスキル。
ui-ux-expert-skill
fercracix33
Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
frontend-code-review
langgenius
Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.
react-best-practices
redpanda-data
Client-side React performance optimization patterns.