frontend-code-review
Conducts detailed code reviews for frontend files to ensure quality and compliance with UI guidelines.
Install
mkdir -p .claude/skills/frontend-code-review && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/559" && unzip -o skill.zip -d .claude/skills/frontend-code-review && rm skill.zipInstalls to .claude/skills/frontend-code-review
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.
Review Dify frontend code for correctness, accessibility, component design, dify-ui usage, data/query boundaries, performance, and tests. Trigger for `.tsx`, `.ts`, `.js`, UI, React, Next.js, pending-change, or focused frontend review requests.Key capabilities
- →Review frontend code for accessibility and semantic HTML
- →Audit component architecture and state management
- →Validate data query contracts and API integration
- →Check performance against Vercel-based guidelines
- →Identify security and authorization leaks in UI code
How it works
The skill applies a set of rule packs covering accessibility, component architecture, and performance to the provided code. It identifies issues by comparing the code against established Dify-specific invariants and industry standards.
Inputs & outputs
When to use frontend-code-review
- →Reviewing component code
- →Auditing frontend accessibility
- →Checking performance standards
- →Validating UI implementation
About this skill
Frontend Code Review
Review the requested scope for concrete, reproducible regressions. This skill owns the review phase and routes directly to its bundled rule packs. For a combined review-and-fix request, establish findings before applying implementation or testing guidance.
Evidence First
- Establish the review scope from the requested files or current diff.
- Read the changed lines, their behavior owner, and the nearest scoped
AGENTS.md. - Trace public consumers, generated contracts, primitive APIs, or runtime configuration only when they decide correctness.
- Report only findings tied to an observable failure, violated contract, security boundary, or demonstrated maintenance risk.
Rule Routing
Read only the packs matched by the diff:
- DOM semantics, focus, keyboard, forms, disabled state, or visible interaction:
references/accessibility-ui.md - Dify UI imports, Base UI wrappers, overlays, tokens, or primitive contracts:
references/dify-ui.md - Component ownership, props, state, Effects, navigation, or module boundaries:
references/component-architecture.md - Generated clients, Query, mutations, auth, SSR, URL state, or persistence:
references/data-query-contracts.md - Test files or a concrete missing-regression-test finding:
references/testing.md - Bundle, waterfall, rendering, or subscription cost supported by evidence:
references/performance.md - Stable Dify runtime invariants in the named paths:
references/dify-invariants.md - General TypeScript or styling quality not owned above:
references/code-quality.md
Read packages/dify-ui/README.md, packages/dify-ui/AGENTS.md, web/docs/overlay.md, or web/docs/test.md only when the reviewed code falls under that contract. Check current official documentation when local code and bundled references do not settle a framework, browser, or accessibility behavior.
Severity And Output
- P0: security or privacy leak, data loss, production crash, or inaccessible critical workflow.
- P1: user-visible regression, invalid API or authorization contract, hydration failure, or broken primary interaction.
- P2: concrete maintainability, performance, test, or accessibility defect likely to cause incorrect behavior.
- P3: minor actionable cleanup; omit unless the user requested a thorough audit.
Lead with findings ordered by severity. Include a tight file and line reference, the failing contract or reproduction path, impact, and a concrete fix direction. If there are no findings, say No issues found. and state any material verification gap. Do not add praise sections, speculative risks, or an unsolicited offer to implement fixes.
When not to use it
- →Reviewing backend-only code under api/
Prerequisites
Limitations
- →Does not automatically implement fixes
- →Requires specific local documentation context for full accuracy
How it compares
It automates the application of specific project-wide coding standards and design system rules rather than relying on generic linting.
Compared to similar skills
frontend-code-review side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| frontend-code-review (this skill) | 11 | 2mo | No flags | Advanced |
| frontend-developer | 27 | 4mo | No flags | Intermediate |
| frontend-patterns | 11 | 2mo | Review | Intermediate |
| next-best-practices | 0 | 3mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by langgenius
View all by langgenius →You might also like
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
frontend-patterns
affaan-m
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
next-best-practices
pedronauck
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
senior-frontend
FISCFED9
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
frontend-patterns
forgivesam168
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
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.