frontend-code-review

Review frontend .tsx, .ts, and .js files for quality, performance, and correctness.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/bayazknn/elciai-platform-analysis --skill frontend-code-review-bayazknn
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-code-review
Source: https://github.com/bayazknn/elciai-platform-analysis/tree/main/langflow/.agents/skills/frontend-code-review
Command: npx skills add https://github.com/bayazknn/elciai-platform-analysis --skill frontend-code-review-bayazknn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Ensures frontend code in Langflow meets project conventions, performance expectations, and accessibility and security standards so regressions and style drift are caught early. It centralizes checklist-driven reviews to reduce inconsistent feedback and avoid common runtime or UX issues introduced by poorly typed, unmemoized, or insecure code.

Core Features & Use Cases

  • Pending-change reviews: Inspect staged or working-tree changes before commit and verify Biome formatting, lint rules, and test expectations.
  • File-targeted reviews: Analyze specific .tsx, .ts, or .js files the user names and report checklist violations with file:line references.
  • Checklist-driven checks: Enforce Code Quality, Performance, and Business Logic rules (including Tailwind/design-token usage, Zustand/React Query patterns, @xyflow/react optimizations, and accessibility checks).
  • Actionable fixes: Provide clear suggested fixes, short code snippets, and follow-up prompts to apply fixes if requested.

Quick Start

Review the specified src/frontend/ .tsx/.ts/.js files or staged frontend changes for Langflow conventions, performance, accessibility, and security issues and return findings using the required template with file:line pointers.

Frequently Asked Questions about frontend-code-review

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

FAQPage Schema
How do I review staged frontend changes for code quality and performance issues?

To review staged frontend changes, inspect pending working-tree modifications in .tsx, .ts, and .js files to verify Biome formatting, lint rules, and test expectations while enforcing performance, accessibility, and security standards.

What does a checklist-driven frontend code review cover in TypeScript and React files?

A checklist-driven frontend code review covers TypeScript and React files by enforcing code quality, performance, and business logic rules, including Tailwind design-token usage, Zustand and React Query patterns, @xyflow/react optimizations, and accessibility compliance.

Can I target specific .tsx or .ts files for a frontend code review?

Yes, you can target specific .tsx or .ts files for review. File-targeted reviews analyze user-named files within the src/frontend/ directory and report checklist violations with file:line references and actionable suggested fixes.

Does the frontend code review verify Biome formatting and linting rules?

Yes, the frontend code review verifies Biome formatting and linting rules. For pending-change reviews, it checks staged or working-tree changes against Biome expectations and test run requirements to catch style drift and regressions early.

Why do I need to check Zustand and React Query patterns during a frontend code review?

Checking Zustand and React Query patterns during a frontend code review ensures state management and data fetching logic meets project conventions. This prevents common runtime issues and performance regressions caused by poorly optimized or unmemoized code.