Claude Marketplaces
SkillsMCP serversMarketplacesDigestTools
Submit

This week in Claude

Every Monday: Claude Code, Agent SDK, MCP, and the Anthropic platform moves worth your time.

Skills by category
Frontend DevelopmentBackend & APIsTesting & QASecurityDevOps & CI/CDGit & Pull RequestsDocumentationCode Review & QualityAI & Agent BuildingSkill Development
MCP servers by category
Sales & MarketingWeb & Browser AutomationDatabasesAI & LLM ToolsCloud & InfrastructureCommunication & MessagingDeveloper ToolsDesign & CreativeDocuments & KnowledgeSearch & Web Crawling
Marketplaces by category
AI Agents & OrchestrationLLM IntegrationDevelopment ToolsFrontend & UIBackend & APIsDatabasesTesting & Code QualityDevOps & CloudSecurity & ComplianceGit & Version Control
Claude Marketplaces

An independent directory of skills, plugins and MCP servers for Claude Code. Not affiliated with Anthropic.

Browse

  • Skills
  • MCP servers
  • Marketplaces
  • Weekly digest
  • Skill index
  • MCP index
  • Marketplace index

Site

  • About
  • Tools
  • Submit
  • Feedback
  • Privacy
  • llms.txt
  • Plugins reference

Maker

  • Snug
  • Agent Caffeine
  • knobs
  • Wax
  • Vectoys
  • mertduzgun.com
Crafted at
Skills/Frontend Development
langgenius avatar

Frontend Code Review

langgenius/difyOfficial

A structured frontend code reviewer that runs your TypeScript, JavaScript, and TSX files through a comprehensive checklist covering code quality, performance, and business logic issues. It handles two modes: reviewing staged changes before commits or analyzing specific files you point to. The output is consistently formatted with urgent issues flagged separately from suggestions, complete with file paths, line numbers, and actionable fixes. Each violation gets tagged with urgency metadata for prioritization. After finding issues that need code changes, it offers to automatically apply the suggested fixes, making it a complete review-and-remediate workflow rather than just a linting tool.

installs
10.1K
GitHub stars
159.6K
last updated
Aug 21, 2026
View on GitHubSave

Install

$ npx -y skills add langgenius/dify --skill frontend-code-review --agent claude-code

Installs into .claude/skills of the current project.

Files

Frontend Code Review

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.

Evidence First

  1. Resolve the requested target and scope. For a PR or branch, establish its actual base and head; do not assume the tracking branch is the review base. Include local edits only when they belong to the requested scope. Give delegated reviewers the same scope and revisions.
  2. Read the changed code, its behavior owner, and the applicable scoped AGENTS.md. For a diff review, distinguish introduced or re-exposed defects from unrelated existing issues; a file audit may include existing defects.
  3. Trace affected consumers and contracts. When logic is removed or moved, identify the behavior it preserved and where that responsibility now lives. Check affected public types, examples, and tests when they decide correctness.
  4. Verify candidates against actual defaults, guards, reachable states, and documented exceptions. Report an observable failure, security boundary violation, or concrete maintenance cost. Explicit team conventions are also contracts: establish their scope without inventing user impact to justify them.

Rule Routing

Read only the packs for contracts affected by the change, not every topic present in a file:

  • Changes to semantics, naming, keyboard/focus, forms, pending states, or responsive interaction: references/accessibility-ui.md
  • Changes to Dify UI composition, public API, primitive behavior, or state styling: references/dify-ui.md
  • Changes to component/module ownership, props, state, Effects, or navigation: 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
  • Changes to type boundaries, styling composition, or localized copy not covered above: references/code-quality.md

Follow a known contract directly; use an index only to discover its owner. Project documents define local requirements; installed dependencies and their public APIs establish version-specific behavior. Resolve disagreements with implementation and tests rather than treating existing code as the standard. For unresolved framework, browser, or accessibility behavior, consult current official documentation or standards; use a targeted guidance search when it helps locate them.

Severity And Output

  • P0: critical impact requiring immediate intervention, such as widespread unavailability, severe data loss, or a security/privacy breach.
  • P1: major reachable failure of a primary workflow or public contract that should block delivery.
  • P2: narrower correctness, accessibility, performance, or test defect; concrete maintenance cost; or a material violation of an explicit project contract.
  • P3: minor actionable cleanup; omit unless the user requested a thorough audit.

Choose severity by impact, reachability, and recovery, not by topic; accessibility failures are correctness defects. Lead with verified findings ordered by severity. Include a tight file and line reference, the triggering scenario or applicable project rule, and a concrete fix direction. Deduplicate findings with the same cause. State material verification gaps separately; lack of verification is not itself a defect. When no findings remain, say so briefly. Do not add praise sections, speculative risks, or an unsolicited offer to implement fixes.

Sponsors

SnugThe clipboard manager you and your agent can use, safelyAgent CaffeineClose your lid, come back to finished workWaxBlock anything with supervision, without erasing your iPhoneOpen StepsSponsoredFree and open-source skills that make AI coding agents easier to understand, verify, and control.

Details

Repository
github.com/langgenius/dify
Categories
Frontend Development, Backend & APIs, Git & Pull Requests, Code Review & Quality

More from langgenius/dify

All 8
  • Frontend Testing3.8K
  • Component Refactoring3.7K
  • Backend Code Review2.1K
  • Skill Creator755
  • Orpc Contract First713
  • Web Design Guidelines688
  • Vercel React Best Practices612

Recommended

More Frontend Development
1github avatarmarkdown-to-htmlgithub/awesome-copilotConvert Markdown files to HTML similar to `marked.js`, `pandoc`, `gomarkdown/markdown`, or similar tools; or writing custom script to convert markdown to html a9.9Kinstalls
2dotneet avatartypescript-react-reviewerdotneet/claude-code-marketplaceExpert code reviewer for TypeScript + React 19 applications. Use when reviewing React code, identifying anti-patterns, evaluating state management, or assessing9Kinstalls
3analogjs avatarangular-signalsanalogjs/angular-skillsImplement signal-based reactive state management in Angular v20+. Use for creating reactive state with signal(), derived state with computed(), dependent state 8.8Kinstalls
4affaan-m avatarfrontend-patternsaffaan-m/everything-claude-codefrontend patterns8.6Kinstalls
5ibelick avatarui-skills-rootibelick/ui-skillsUse before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.7.2Kinstalls
6analogjs avatarangular-formsanalogjs/angular-skillsBuild signal-based forms in Angular v21+ using the new Signal Forms API. Use for form creation with automatic two-way binding, schema-based validation, field st7.1Kinstalls