📦
component-refactoring
75Refactor React Components Safely
Large React components slow review, testing, and maintenance. This skill guides hook extraction, component splitting, and Dify-aligned verification.
Coding & Development View
Skills frontend-code-review
📦
frontend-code-review
Content revision r1 Safe 🌐 Network access⚙️ External commands
Review Dify Frontend Changes
Frontend reviews often miss accessibility, data boundary, and component ownership issues. This skill gives Claude and Codex a focused checklist for Dify React and Next.js code reviews.
Supports: Claude Codex Code(CC)
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Agent request
Review the Skillstore skill "frontend-code-review" from https://skillstore.io/skills/langgenius-frontend-code-review.md and its manifest at https://skillstore.io/api/skills/langgenius-frontend-code-review/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "frontend-code-review". Review the pending changes to a settings dialog.
Expected outcome:
- Findings are ordered by severity.
- Each finding includes a file and line when available.
- The response explains why the issue matters and gives a concrete fix direction.
Using "frontend-code-review". Review a component refactor with no issues found.
Expected outcome:
No issues found. The response also notes which tests were not run and any residual review limits.
Using "frontend-code-review". Audit a form that uses custom controls.
Expected outcome:
- The review checks accessible names, field labels, keyboard behavior, disabled states, and error recovery.
- It avoids style-only feedback unless it causes a user-visible issue.
Security Audit
Safev6 • 7/9/2026 Open versioned report
All static findings are false positives from Markdown formatting, repository path references, a public guideline URL, and frontend review prose. No evidence found of executable command use, covert network behavior, prompt injection, or malicious intent in the reviewed files.
9
Files scanned
753
Lines analyzed
0
Review items
0
False positives ignored
Risk Factors
🌐 Network access (3)
No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.
Audited by: claude View Audit History →
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/langgenius-frontend-code-review/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/langgenius-frontend-code-review?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/langgenius-frontend-code-review?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/langgenius-frontend-code-review/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/langgenius-frontend-code-review.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
langgenius. (2026). frontend-code-review security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/langgenius-frontend-code-review/audits/6BibTeX citation
@techreport{langgenius-langgenius-frontend-code-review-2026,
author = {langgenius},
title = {frontend-code-review security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/langgenius-frontend-code-review/audits/6},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-code-review security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "langgenius"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/langgenius-frontend-code-review/audits/6"
identifiers:
- type: other
value: "skillstore:langgenius-frontend-code-review:audit:6"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: High 45
Architecture
85
Maintainability
87
Content
70
Community
83
Spec Compliance
What You Can Build
Review a pull request before merge
Check changed React and Next.js files for user-visible regressions, accessibility problems, and test gaps.
Audit a Dify UI component refactor
Verify that component ownership, primitive usage, focus behavior, and interaction contracts remain correct.
Validate risky frontend data flows
Review query keys, mutations, SSR boundaries, URL state, and workspace or auth assumptions before release.
Try These Prompts
Review my pending frontend changes
Use the frontend-code-review skill to review my pending Dify frontend changes. Focus on correctness, accessibility, and clear fixes.
Review a specific component file
Use the frontend-code-review skill to review web/path/to/component.tsx. Check component ownership, Dify UI usage, accessibility, and test coverage.
Audit an overlay or form flow
Use the frontend-code-review skill to audit this dialog or form flow. Verify labels, focus behavior, keyboard access, disabled states, and popup reachability.
Perform a release-blocking frontend review
Use the frontend-code-review skill for a thorough release-blocking review. Prioritize P0 and P1 issues in data contracts, SSR behavior, accessibility, performance, and tests.
Best Practices
- Provide the exact files, diff, or pull request scope you want reviewed.
- Mention whether the review should be quick, thorough, or release-blocking.
- Run relevant tests or share test constraints so the review can include residual risk.
Avoid
- Do not use it for backend-only code under api paths.
- Do not ask for broad style preferences without a concrete frontend risk.
- Do not treat pasted snippets as complete when surrounding ownership or accessibility context matters.
Frequently Asked Questions
What projects is this skill designed for?
It is designed for Dify frontend code, especially web, packages/dify-ui, React, Next.js, and TypeScript changes.
Can it review accessibility issues?
Yes. It treats keyboard access, focus behavior, labels, disabled states, and popup reachability as correctness concerns.
Does it run tests automatically?
No. It guides review and may recommend tests, but test execution depends on the user request and available project setup.
Will it fix the findings?
Not by default. The skill asks the assistant to report findings unless the user explicitly requests implementation.
Why does it reference external guidelines?
It asks reviewers to fetch current Web Interface Guidelines when UI or accessibility findings need the latest baseline.
Can Codex use this skill?
Yes. The report lists Claude, Codex, and Claude Code as supported tools.
Developer Details
Author
langgeniusLicense
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Ref
1ffa7643651792ccb4bd3b15d924d2c97edff755
Maintenance freshness
7/18/2026
Usage
103 downloads · 212 views
File structure
More from langgenius
View allRelated Skills
View all📦
vercel-react-best-practices
80Optimize React and Next.js Code
by vercel-labs
React and Next.js applications often lose performance through waterfalls, large bundles, and avoidable re-renders. This skill gives Claude, Codex, and Claude Code concrete review rules for faster frontend work.
Coding & Development View
📦
vercel-react-view-transitions
82Implement React View Transitions
by vercel-labs
React view transitions are easy to misplace, causing silent or noisy animations. This skill guides route, Suspense, list, and shared element animation choices.
Coding & Development View
📦
senior-frontend
81Build Frontend Apps Faster
by davila7
Frontend work often needs consistent React patterns, performance checks, and project scaffolding. This skill gives Claude and compatible agents practical guidance and local helper scripts for modern web application development.
Coding & Development View
📦
senior-fullstack
82Build Fullstack Apps With Senior Guidance
by alirezarezvani
Fullstack projects often need consistent setup, architecture choices, and quality checks. This skill provides scripts and references for React, Next.js, Node.js, GraphQL, and PostgreSQL work.
Coding & Development View
📦
code-reviewer
83Review Code with Structured Quality Checks
by alirezarezvani
Code reviews can miss quality, security, and maintainability issues. This skill guides structured reviews with scripts, checklists, and report generation.
Coding & Development View
📦
react-dev
82Build Type-Safe React Components
by softaworks
React TypeScript work often needs precise event, hook, and route types. This skill provides focused patterns for typed components, React 19 APIs, and routing.
Coding & Development View