skills.rest
takemo101
takemo101COMMUNITY
Explore all skills by this author →
GitHub

frontend-reviewer

Review React, Vue, and Next.js frontend code for UI/UX, accessibility, and performance.

Updated Jan 8, 2026
Search Tags:#code review#performance#accessibility#frontend#react#ui/ux#vue
One-click install
npx skills add https://github.com/takemo101/compose-workflow --skill frontend-reviewer-takemo101
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-reviewer
Source: https://github.com/takemo101/compose-workflow/tree/main/.pi/skills/frontend-reviewer
Command: npx skills add https://github.com/takemo101/compose-workflow --skill frontend-reviewer-takemo101

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the review of frontend code and screen designs, ensuring high standards in UI/UX, accessibility, and performance, thereby improving the quality and user-friendliness of web applications.

Core Features & Use Cases

  • Code and Design Review: Evaluates React, Vue, and Next.js codebases against best practices.
  • UI/UX and Accessibility Audits: Checks for usability, responsiveness, WCAG compliance, and Core Web Vitals.
  • Use Case: A lead engineer uses this Skill to perform a thorough review of a new feature's UI components and associated screen designs before merging, catching critical issues early.

Quick Start

Review the attached screen design document and the corresponding React component code.

Frequently Asked Questions about frontend-reviewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review React components for UI/UX and accessibility issues?▼

You can review React components for UI/UX and accessibility by evaluating component design, keyboard navigation, and WCAG compliance. This process identifies missing loading and error states while ensuring high standards in web application responsiveness.

What does a frontend code review check for performance optimization?▼

A frontend code review checks for performance optimization by validating code against Core Web Vitals. It assesses component design to identify performance bottlenecks in React, Vue, and Next.js web applications before merging.

Can I use this to audit Vue component design and screen designs?▼

Yes, you can audit Vue component design and screen designs. The review evaluates Vue codebases against best practices, checking usability and critical UI/UX validations to improve overall web application quality.

How do I validate Next.js codebases against critical UI checks?▼

Validate Next.js codebases against critical UI checks by assessing component design and screen documents. This verifies loading states, error states, and keyboard navigation to ensure features meet UI/UX and accessibility standards.

When do I need an automated frontend code and design review?▼

You need an automated frontend code and design review when merging new features. It evaluates UI components and associated screen designs, catching critical accessibility and performance issues early to improve application quality.

Related Skills

Explore More Software Engineering Skills→
Foo-xFoo-x
2

screen-transition-diagram

Generate Mermaid screen transition diagrams and event tables from frontend codebases.

Community
Advanced
gaia-reactgaia-react
21

a11y-fixes

Resolve axe-core accessibility violations with standardized WCAG AA code patterns.

Official
Intermediate
GainInsightDevGainInsightDev

af-ux-design-expertise

Enforce UX design principles with Atomic Design and Storybook components.

Official
Advanced
hongmaple0820hongmaple0820
9

ux-ui-design-system

Audit interfaces for WCAG 2.2 AA compliance and design consistency.

Community
Advanced