skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

frontend-code-review

Reviews frontend code diffs against bundled accessibility, architecture, and performance rule packs.

1|Updated Aug 18, 2026
Search Tags:#typescript#code review#performance#pull request#accessibility#frontend#react
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill frontend-code-review-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-code-review
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/frontend-code-review
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill frontend-code-review-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend code reviews often miss concrete regressions because reviewers lack a consistent, evidence-based checklist across accessibility, component architecture, data contracts, and performance. This Skill turns review requests into structured findings with severity levels, file-line references, and concrete fix directions. ## Core Features & Use Cases - Scoped Rule Routing: Reads only the rule packs matched by the diff, covering accessibility, component architecture, data/query contracts, testing, performance, and code quality. - Severity-Ranked Findings: Reports P0-P3 findings tied to observable failures, violated contracts, or demonstrated maintenance risks, each with reproduction path and fix direction. - Dify-Specific Packs: Ships optional rule packs for Dify UI primitives and runtime invariants, which are skipped when reviewing non-Dify projects. - Use Case: Paste a pull request diff for a React form component and receive findings such as missing label relationships, incorrect disabled-state handling, or effects that should be event handlers, ordered by severity. ## Quick Start Review the current pending changes in my frontend project and report any accessibility, architecture, or performance issues with severity levels.

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 a frontend pull request for accessibility issues?▼

Provide the diff or changed files and request a review. The accessibility rule pack flags broken keyboard access, missing labels, focus loss, unreachable popup content, and incorrect disabled or loading states as first-class findings with severity levels.

What does a frontend code review check in React components?▼

The review checks state ownership, prop drilling, unnecessary effects, derived state, navigation semantics, and component boundaries. It also covers TanStack Query usage, mutation handling, URL state, and bundle or rendering performance when evidence supports a finding.

Can I use this review skill on non-Dify projects?▼

Yes. The Dify-specific rule packs (dify-ui and dify-invariants) are skipped on non-Dify projects, and Dify path references are mapped to the reviewed project's own structure. The generic accessibility, architecture, data, testing, and performance packs still apply.

When should I not use this code review skill?▼

Do not use it for implementation-only requests or backend-only code. It owns the review phase and reports findings; for combined review-and-fix requests, findings are established before any implementation guidance is applied.

How are code review findings prioritized?▼

Findings use four severity levels: P0 for security leaks or crashes, P1 for user-visible regressions or broken interactions, P2 for concrete maintainability or accessibility defects, and P3 for minor cleanup reported only in thorough audits.

Related Skills

Explore More Software Engineering Skills→
snqbsnqb
1

code-review

Analyze code changes and provide structured feedback on diffs or files.

Community
Intermediate
alo-expalo-exp
6

gsd-review-fix

Apply atomic fixes with DCO sign-off and verify via tests and re-review.

Official
Advanced
Smooth-OperationSmooth-Operation

lighthouse-performance-optimization

Automate Lighthouse audits to measure web performance and generate reports.

Official
Advanced
lucasolslucasols

fix-lint

Detect and correct ESLint violations and type errors in TypeScript projects.

Community
Intermediate