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 langflow-ai in langflow-ai/langflow

Review frontend code (.tsx, .ts, .js files) for quality, performance, and correctness against Langflow's frontend conventions.

MITAuto-check passedFrontend & Design

Install Frontend Code Review

skills CLI
$ npx skills add langflow-ai/langflow --skill frontend-code-review -a claude-code

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

GitHub CLI
$ gh skill install langflow-ai/langflow 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/langflow-ai/langflow.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
156k
Token cost
~1.6k tokens
SKILL.md length
740 words
Files
4 (incl. references)
Skills in repo
10
Repo updated
First seen
Licence
MIT

At a glance

Review frontend code (.tsx, .ts, .js files) for quality, performance, and correctness against Langflow's frontend conventions.

  • Works in 5 steps: Security Review → Accessibility Review → Code Quality Review → …
  • Tasks that involve React components
  • SKILL.md covers When to use this skill, How to use this skill, Checklist and General Review Rules, plus 1 more section
  • Calls npm

What it does

Frontend Code Review is an agent skill from langflow-ai/langflow. Review frontend code (.tsx, .ts, .js files) for quality, performance, and correctness against Langflow's frontend conventions. Supports pending-change reviews and file-targeted reviews.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/business-logic.md`, `references/code-quality.md` and `references/performance.md`).

It sits in Frontend & Design, covering React components and Code review. It works with React and TanStack. The repository describes itself as: Langflow is a powerful tool for building and deploying AI-powered agents and workflows. The licence is MIT.

When your agent uses it

  • Tasks that involve React components
  • Tasks that involve Code review

Example prompts

  • “/frontend-code-review”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Security Review
  2. Accessibility Review
  3. Code Quality Review
  4. Testing Impact Review
  5. Pre-Commit Verification

What it can do on your machine

Read from SKILL.md and the folder at commit 504c02f. 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

    Shell commands in SKILL.md call:

    • npm

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

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    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 1.6k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 52 tokens; SKILL.md has 740 words of instructions outside code blocks.

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

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

The full file from langflow-ai/langflow at commit 504c02f, republished under its MIT licence (© langflow-ai). 740 words, ~1,589 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-code-review/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
frontend-code-review
description
Review frontend code (.tsx, .ts, .js files) for quality, performance, and correctness against Langflow's frontend conventions. Supports pending-change reviews and file-targeted reviews.

Frontend Code Review

When to use this skill

Use this skill whenever the user asks to review, analyze, or improve frontend code (.tsx, .ts, .js files) under the src/frontend/ directory. Supports the following review modes:

  1. Pending-change review -- inspect staged or working-tree files slated for commit and flag checklist violations before submission.
  2. File-targeted review -- review the specific file(s) the user names and report the relevant checklist findings.

Do NOT use this skill when:

  • The request is about backend code (.py files under src/backend/).
  • The user is not asking for a review/analysis/improvement of frontend code.
  • The scope is outside src/frontend/ (unless the user explicitly asks to review frontend-related changes elsewhere).

How to use this skill

Follow these steps when using this skill:

  1. Identify the review mode (pending-change vs file-targeted) based on the user's input. Keep the scope tight: review only what the user provided or explicitly referenced.
  2. Follow the rules defined in the Checklist to perform the review. If no checklist rule matches, apply General Review Rules as a fallback.
  3. Compose the final output strictly following the Required Output Format.

Notes when using this skill:

  • Always include actionable fixes or suggestions (including possible code snippets).
  • Use File:Line references when a file path and line numbers are available; otherwise, use the most specific identifier you can.
  • The Langflow frontend uses React 19, TypeScript 5.4, Vite 7 with SWC, Zustand for state management, TanStack React Query for server state, @xyflow/react v12 for graph visualization, Radix UI + shadcn-ui components, Tailwind CSS v3, and Biome for linting/formatting.

Checklist

  • Code quality: For any reviewed file, follow references/code-quality.md to check styling conventions, TypeScript usage, Biome compliance, and component patterns.
  • Performance: If the review scope involves React components, hooks, Zustand stores, React Query usage, or @xyflow/react node rendering, follow references/performance.md to check for re-render issues, memoization, and data flow patterns.
  • Business logic: If the review scope involves custom nodes (GenericNode), flow state, API calls, the component system, global variables, or the inspection panel, follow references/business-logic.md to check for Langflow-specific correctness.
  • i18n: If the diff adds or changes user-facing text (labels, buttons, tooltips, modals, toasts, errors, placeholders, aria-labels), follow the frontend-i18n skill: no hardcoded UI strings — everything through t(...) — and every new key present in all locale files (src/frontend/src/locales/*.json).

General Review Rules

1. Security Review

Check for:

  • XSS vulnerabilities (dangerouslySetInnerHTML, unescaped user input)
  • Sensitive data exposure in client-side code
  • Insecure direct object references in API calls
  • Hardcoded secrets, tokens, or API keys
2. Accessibility Review

Check for:

  • Missing aria labels on interactive elements
  • Keyboard navigation support
  • Proper use of semantic HTML elements
  • Color contrast issues in custom styling
Show full SKILL.md (307 more words)Show less
3. Code Quality Review

Check for:

  • Code duplication (DRY violations — extract at 3+ identical usages)
  • Functions/components doing too much (SRP violations — if you need "and" to describe it, split it)
  • Deep nesting or complex conditionals (prefer early returns and guard clauses)
  • Magic numbers/strings without named constants
  • Poor naming: generic names (data, result, temp), missing verb prefixes on functions, missing is/has/can/should prefixes on booleans
  • Missing error handling or error boundaries
  • Incomplete TypeScript type coverage (no any, no as any casts)
  • Comments that explain WHAT instead of WHY
  • Commented-out code (use version control)
  • Boolean parameters that switch component behavior (use two components instead)
  • Mutable patterns where const or immutable alternatives exist
  • Production files exceeding ~500 lines (red flag at 600+)
  • console.log in production code (Biome flags this)
4. Testing Impact Review

Check for:

  • Changes to data-testid attributes that may break E2E tests
  • Modified component interfaces that require test updates
  • New interactive elements missing data-testid attributes
5. Pre-Commit Verification

For pending-change reviews, verify:

  • npm run format (Biome formatter) — zero diffs
  • npm run lint (Biome linter) — zero errors
  • npm test (Jest) — zero failures

Required Output Format

When this skill is invoked, the response must exactly follow one of the two templates:

Template A (any findings)
markdown
# Code Review

Found <N> urgent issues that need to be fixed:

## 1. <brief description of issue>

FilePath: <path> line <line>
<relevant code snippet or pointer>


### Suggested fix

<brief description of suggested fix with code example>

---

... (repeat for each urgent issue) ...

Found <M> suggestions for improvement:

## 1. <brief description of suggestion>

FilePath: <path> line <line>
<relevant code snippet or pointer>


### Suggested fix

<brief description of suggested fix with code example>

---

... (repeat for each suggestion) ...
  • If there are no urgent issues, omit that section. If there are no suggestions, omit that section.
  • If the issue count exceeds 10, summarize as "10+ urgent issues" or "10+ suggestions" and output only the first 10 items.
  • Do not compress the blank lines between sections; keep them as-is for readability.
  • If Template A is used (there are issues to fix) and at least one issue requires code changes, append a brief follow-up question after the structured output asking whether the user wants the suggested fixes applied. For example: "Would you like me to apply the suggested fixes to address these issues?"
Template B (no issues)
markdown
## Code Review

No issues found.

© langflow-ai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references) in .agents/skills/frontend-code-review of langflow-ai/langflow.

  • SKILL.md
  • references/business-logic.md
  • references/code-quality.md
  • references/performance.md

Open the folder on GitHubat commit 504c02f

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 skilllangflow-ai/langflow156k—~1.6kAutomated safety check: PassMIT
React Devdavila7/claude-code-templates32k2 repos~2.6kAutomated safety check: PassMIT
Moai Ref React Patternsmodu-ai/moai-adk1.2k—~1.8kAutomated safety check: PassApache-2.0
Wp Block Developmentjorgerosal/wordpress-skills100—~12kAutomated safety check: PassMIT
React Code Reviewgiuseppe-trisciuoglio/developer-kit355—~2.6kAutomated safety check: NotesMIT
@pierre/diffs Code Renderingpierrecomputer/pierre6.2k2 repos~803Automated safety check: PassApache-2.0

Similar skills

  • React Dev

    davila7/claude-code-templates

    This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned.

    32k GitHub starsUsed in 2 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Moai Ref React Patterns

    modu-ai/moai-adk

    React/Next.js component design patterns, state management strategies, and project structure reference for frontend development.

    1.2k GitHub stars~1.8k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Wp Block Development

    jorgerosal/wordpress-skills

    WordPress block editor code review and Gutenberg block development patterns for WordPress 6.x+.

    100 GitHub stars~12k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

  • 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

  • @pierre/diffs Code Rendering

    pierrecomputer/pierre

    Guides an agent through using @pierre/diffs to render syntax-highlighted files and diffs, and to build editing and review surfaces in React or plain JavaScript.

    6.2k GitHub starsUsed in 2 repos~803 tokens
    DevelopmentAuto-check passed

  • React Frontend Development Guidelines

    diet103/claude-code-infrastructure-showcase

    Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.

    10k GitHub starsUsed in 2 repos~2.9k tokens
    Frontend & DesignAuto-check passed

More from langflow-ai/langflow

All 10 skills in this repo

  • Backend Code Review

    langflow-ai/langflow

    Review backend code for quality, security, maintainability, and best practices based on established checklist rules.

    156k GitHub stars~3.5k tokensUpdated today
    Auto-check: notes

  • Component Refactoring

    langflow-ai/langflow

    Refactor high-complexity React components in Langflow frontend.

    156k GitHub stars~3.5k tokensUpdated today
    Auto-check passed

  • E2E Testing

    langflow-ai/langflow

    Write and review Playwright E2E tests for Langflow. An agent skill from langflow-ai/langflow.

    156k GitHub stars~3.3k tokensUpdated today
    Auto-check passed

  • Frontend Query Mutation

    langflow-ai/langflow

    Guide for implementing Langflow frontend query and mutation patterns with Axios and TanStack React Query v5.

    156k GitHub stars~979 tokensUpdated today
    Auto-check passed

  • Ibm A11y Level1 Audit

    langflow-ai/langflow

    Perform a scoped IBM Equal Access Level 1 compliance audit of a chosen Langflow frontend surface (routes, components, or a PR) and produce a findings report mapped to WCAG/IBM Level 1 criteria.

    156k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

  • Frontend I18n

    langflow-ai/langflow

    Add, change, or review user-facing text in the Langflow frontend using the i18n system (i18next / react-i18next).

    156k GitHub stars~1k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Frontend Code Review

What does Frontend Code Review do?

Review frontend code (.tsx, .ts, .js files) for quality, performance, and correctness against Langflow's frontend conventions. Frontend Code Review is an agent skill from langflow-ai/langflow.js files) for quality, performance, and correctness against Langflow's frontend conventions.

When should I use Frontend Code Review?

Frontend Code Review fits situations like: tasks that involve React components; tasks that involve Code review.

How do I install Frontend Code Review in Claude Code?

Run `npx skills add langflow-ai/langflow --skill frontend-code-review -a claude-code`. Or copy the skill folder (.agents/skills/frontend-code-review in langflow-ai/langflow) 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 langflow-ai/langflow --skill frontend-code-review -a codex`. Or copy the skill folder (.agents/skills/frontend-code-review in langflow-ai/langflow) 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 langflow-ai/langflow --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?

Going by SKILL.md and its folder, Frontend Code Review needs the command-line tools its instructions call (npm).

Does Frontend Code Review access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. 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 is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend Code Review use?

About 1.6k tokens (SKILL.md is roughly 6.4k 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 9.7k 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 Dev (davila7/claude-code-templates, 32k stars), Moai Ref React Patterns (modu-ai/moai-adk, 1.2k stars), Wp Block Development (jorgerosal/wordpress-skills, 100 stars) and React Code Review (giuseppe-trisciuoglio/developer-kit, 355 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?

langflow-ai (a GitHub organization) maintains it in langflow-ai/langflow, which has 155,554 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 7, 2026.

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