New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Frontend Code Review

by langgenius in langgenius/dify

Reviews frontend changes under `web/` or `packages/dify-ui/` for concrete defects and broken project contracts, using routed rule packs and a severity scale for findings.

Custom licenceAuto-check passedDevelopment

Install Frontend Code Review

skills CLI
$ npx skills add langgenius/dify --skill frontend-code-review -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install langgenius/dify frontend-code-review --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/langgenius/dify.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/frontend-code-review .claude/skills/frontend-code-review && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
frontend-code-review
GitHub stars
158k
Token cost
~938 tokens
SKILL.md length
379 words
Files
9 (incl. references)
Skills in repo
6
Repo updated
First seen
Licence
Custom licence

At a glance

Reviews frontend changes under `web/` or `packages/dify-ui/` for concrete defects and broken project contracts, using routed rule packs and a severity scale for findings.

  • Works in 4 steps: Establish the review scope from the… → Read the changed lines, their behavior… → Trace public consumers, generated… → …
  • Reviewing a pull request that touches the web frontend
  • SKILL.md covers Evidence First, Rule Routing and Severity And Output
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

The skill runs only when you explicitly ask for a review or audit, on pending changes, named files or a pasted diff, and it is not for implementation-only requests, diagnosis without review intent or backend-only code. It starts from evidence: set the scope from the requested files or current diff, read the changed lines, the code that owns the behavior and the nearest scoped `AGENTS.md`, and trace consumers or generated contracts only when they decide correctness. Findings must tie to an observable failure, a violated contract, a security boundary or a demonstrated maintenance risk, and explicit team conventions count as contracts without invented user impact.

Rule routing keeps reading small: the agent opens only the reference packs matched by the diff, covering accessibility and focus, the Dify UI primitives and overlays, component architecture and state, data queries and generated clients, tests, performance, Dify runtime invariants and general TypeScript and styling quality. Output uses a severity scale that starts with P0 for security or privacy leaks, data loss, production crashes and inaccessible critical workflows, then P1 for user-visible regressions, invalid API or authorization contracts, hydration failures and broken primary interactions.

When your agent uses it

  • Reviewing a pull request that touches the web frontend
  • Auditing a component for accessibility and focus handling
  • Checking data-fetching and mutation code for contract violations

Example prompts

  • “Review my pending changes under web/ for accessibility and component architecture problems.”
  • “Audit the overlay components in packages/dify-ui/ for focus and keyboard issues.”
  • “Review this pasted diff and rank the findings by severity.”

Requirements

  • The repository's `web/` or `packages/dify-ui/` code and its scoped `AGENTS.md` files

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Establish the review scope from the requested files or current diff.
  2. Read the changed lines, their behavior owner, and the nearest scoped AGENTS.md.
  3. Trace public consumers, generated contracts, primitive APIs, or runtime configuration only when they decide correctness.
  4. Report findings tied to an observable failure, violated contract, security boundary, or demonstrated maintenance risk. Explicit team…

What it can do on your machine

Read from SKILL.md and the folder at commit e7d9c88. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend Code Review loads about 938 tokens when it runs, and up to ~7.5k if it reads all its reference files. Until then it costs about 75 tokens; SKILL.md has 379 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~75
When it runs · the whole SKILL.md, loaded when a task matches
~938
With references · SKILL.md plus every file in references/, read only if the agent opens them
~7.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 379 words (~938 tokens).

“Review the requested scope for concrete defects and violations of explicit project contracts. This skill owns review decisions; its references route to canonical rules without activating another skill's implementation workflow.”

— opening of SKILL.md by langgenius, Custom licence
name
frontend-code-review

Read the full SKILL.md on GitHub

Files

SKILL.md and 8 other files (references) in .agents/skills/frontend-code-review of langgenius/dify.

  • SKILL.md
  • references/accessibility-ui.md
  • references/code-quality.md
  • references/component-architecture.md
  • references/data-query-contracts.md
  • references/dify-invariants.md
  • references/dify-ui.md
  • references/performance.md
  • references/testing.md

Open the folder on GitHubat commit e7d9c88

Compare with similar skills

Frontend Code Review next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Frontend Code Review compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Code Review this skilllanggenius/dify158k—~938Automated safety check: PassCustom licence
React Code Reviewgiuseppe-trisciuoglio/developer-kit355—~2.6kAutomated safety check: NotesMIT
Handsontable Renderer Developmenthandsontable/handsontable22k—~789Automated safety check: PassCustom licence
Frontend Engineer Workflownanocoai/nanoclaw31k—~1.5kAutomated safety check: PassMIT
Tsh Reviewing FrontendTheSoftwareHouse/copilot-collections284—~4.4kAutomated safety check: PassMIT
Senior Frontendborghei/Claude-Skills874—~1.7kAutomated safety check: PassMIT

Similar skills

  • React Code Review

    giuseppe-trisciuoglio/developer-kit

    Provides comprehensive code review capability for React applications, validates component architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility…

    355 GitHub stars~2.6k tokensUpdated 27 days ago
    Frontend & DesignAuto-check: notes

  • Handsontable Renderer Development

    handsontable/handsontable

    Rules for writing a Handsontable cell renderer: a pure function that calls baseRenderer first, sets text safely and stays cheap because it runs for every visible cell.

    22k GitHub stars~789 tokensUpdated today
    DevelopmentAuto-check passed

  • Frontend Engineer Workflow

    nanocoai/nanoclaw

    Sets a build, test and verify routine for web projects: write typed, accessible code and never call work done until it is checked in a real browser with screenshots.

    31k GitHub stars~1.5k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Tsh Reviewing Frontend

    TheSoftwareHouse/copilot-collections

    Frontend-specific code review criteria, component anti-patterns, hooks quality, rendering correctness, accessibility and performance spot-checks, and module organization issues.

    284 GitHub stars~4.4k tokensUpdated 2 days ago
    DevelopmentAuto-check passed

  • Senior Frontend

    borghei/Claude-Skills

    Frontend development for React, Next.js, TypeScript, and Tailwind CSS.

    874 GitHub stars~1.7k tokensUpdated today
    Frontend & DesignAuto-check passed

  • 05 Review

    ai-driven-dev/framework

    Review a diff read-only on three axes, code, behavior versus the plan, and relevancy, into one verdict report.

    510 GitHub stars~750 tokensUpdated today
    DevelopmentAuto-check passed

More from langgenius/dify

  • Backend Code Review

    langgenius/dify

    Reviews backend code under api/ for concrete, reproducible defects, routes to rule packs for architecture, schema, repositories and SQLAlchemy, and ranks findings from P0 to P3.

    158k GitHub stars~676 tokensUpdated today
    Auto-check passed

  • Cucumber and Playwright E2E Tests

    langgenius/dify

    Guides changes and reviews of the Cucumber and Playwright end-to-end suite under `e2e/`: feature files, step definitions, support code, tags, locators and assertions.

    158k GitHub stars~682 tokensUpdated today
    Auto-check passed

  • Dify Component Writing Guide

    langgenius/dify

    Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…

    158k GitHub stars~626 tokensUpdated today
    Auto-check passed

  • Dify Command Line with difyctl

    langgenius/dify

    Base skill for the difyctl CLI: discover a Dify server's operations through help output and run them as commands, always with JSON output.

    158k GitHub stars~1.4k tokensUpdated today
    Auto-check passed

  • Dify Frontend Testing

    langgenius/dify

    Use when writing or changing Vitest or React Testing Library tests under `web/` or `packages/dify-ui/`, or when the user explicitly requests frontend test…

    158k GitHub stars~242 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Frontend Code Review

What does Frontend Code Review do?

Reviews frontend changes under `web/` or `packages/dify-ui/` for concrete defects and broken project contracts, using routed rule packs and a severity scale for findings. The skill runs only when you explicitly ask for a review or audit, on pending changes, named files or a pasted diff, and it is not for implementation-only requests, diagnosis without review intent or backend-only code.md`, and trace consumers or generated contracts only when they decide correctness.

When should I use Frontend Code Review?

Frontend Code Review fits situations like: reviewing a pull request that touches the web frontend; auditing a component for accessibility and focus handling; checking data-fetching and mutation code for contract violations.

How do I install Frontend Code Review in Claude Code?

Run `npx skills add langgenius/dify --skill frontend-code-review -a claude-code`. Or copy the skill folder (.agents/skills/frontend-code-review in langgenius/dify) into .claude/skills/frontend-code-review in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Code Review in Codex?

Run `npx skills add langgenius/dify --skill frontend-code-review -a codex`. Or copy the skill folder (.agents/skills/frontend-code-review in langgenius/dify) into .agents/skills/frontend-code-review in your project. Codex loads it when a task matches its description.

Can I use Frontend Code Review in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add langgenius/dify --skill frontend-code-review -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-code-review, .gemini/skills/frontend-code-review, .github/skills/frontend-code-review and .opencode/skills/frontend-code-review in your project.

What does Frontend Code Review need to run?

SKILL.md names no scripts, command-line tools or credentials: Frontend Code Review is instructions for the agent only. Our summary lists: The repository's `web/` or `packages/dify-ui/` code and its scoped `AGENTS.md` files.

Does Frontend Code Review access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Frontend Code Review safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Frontend Code Review use?

Frontend Code Review has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Frontend Code Review use?

About 938 tokens (SKILL.md is roughly 3.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 6.5k tokens, read only when the agent opens those files.

What are the alternatives to Frontend Code Review?

Skills that share tags, products or a category with Frontend Code Review: React Code Review (giuseppe-trisciuoglio/developer-kit, 355 stars), Handsontable Renderer Development (handsontable/handsontable, 22k stars), Frontend Engineer Workflow (nanocoai/nanoclaw, 31k stars) and Tsh Reviewing Frontend (TheSoftwareHouse/copilot-collections, 284 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Code Review?

langgenius (a GitHub organization) maintains it in langgenius/dify, which has 157,975 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 7, 2026.

Source: langgenius/dify on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.