Agent skill

ekoen-frontend-code-review

Production-grade code review for the eKoEN frontend codebase. Use when asked to review, audit, inspect, or harden eKoEN React/Next.js frontend code, pages, components, hooks, API clients, or state layers for bugs, performance bottlenecks, TypeScript safety issues, request inefficiency, state-management risks, memory leaks, rendering regressions, error-handling gaps, duplication, or maintainability problems, especially when a structured severity-ranked report with code locations, root causes, suggested fixes, and example refactors is required.

Stars 0
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/shaowei-g/codex-skills/tree/main/skills/ekoen-frontend-code-review

SKILL.md

eKoEN Frontend Code Review

Overview

Act as a senior frontend engineer performing a production review. Prefer concrete, user-impacting findings over stylistic suggestions, and keep the report focused on correctness, performance, resilience, and maintainability.

Review Workflow

  1. Define the scope from the user request.
  2. Inspect the current repo layout, package boundaries, and changed files before judging implementation details.
  3. Read references/repo-layout.md when the target is the eKoEN monorepo so you start in the right packages and use the right commands.
  4. Read references/review-checklist.md before writing findings so the review stays aligned with the required categories and report shape.
  5. Gather evidence from source files, related types, hooks, tests, API callers, and state containers. Follow data flow instead of reviewing a file in isolation.
  6. Run cheap validation commands when they help confirm impact. Prefer targeted commands over broad ones, and never claim a command ran if it did not.
  7. Report findings ordered by severity. Put findings first. Keep summaries brief.

Review Priorities

Prioritize these classes of issues:

  • Broken or fragile behavior in user flows, state transitions, permissions, or data mapping
  • Performance regressions caused by repeated rendering, expensive calculations, large client bundles, or duplicated network traffic
  • TypeScript unsafety such as any, unchecked casts, nullable hazards, mismatched API contracts, and inferred unknown values used unsafely
  • Request inefficiency such as duplicate fetches, missing cache keys, stale invalidation logic, unnecessary waterfalls, and over-fetching
  • State management problems such as derived state drift, stale closures, mutation bugs, race conditions, and global state coupling
  • Memory leaks from uncleared timers, subscriptions, observers, or event listeners
  • React rendering issues such as unstable props, context over-rendering, client/server boundary mistakes, or unnecessary client components
  • Missing or weak error handling, especially swallowed errors, impossible states, and missing loading, empty, or retry states
  • Code duplication that increases regression risk
  • Readability and maintainability issues that materially slow safe changes

Validate Findings

Only report issues you can support with code evidence. Avoid speculative comments such as "might be slow" unless you can point to the mechanism and likely impact.

For each finding:

  1. Point to the exact file and line.
  2. Explain the concrete failure mode or regression risk.
  3. State why it happens.
  4. Suggest the smallest fix that aligns with surrounding patterns.
  5. Include a short refactored code example when it improves clarity.

If you do not find any actionable issues, say so explicitly and mention residual risks such as untested flows, missing benchmarks, or commands you did not run.

Investigation Heuristics

Use these heuristics while tracing the code:

  • Follow fetchers through API wrappers, React Query hooks, server actions, and consuming components to spot duplicate requests and cache misses.
  • Check useEffect, subscriptions, timers, IntersectionObserver, ResizeObserver, and DOM listeners for missing cleanup or unstable dependencies.
  • Check list rendering, large tables, charts, and dashboards for repeated transformations, inline object creation, and unnecessary client-side work.
  • Compare component props and context values to see whether a broad provider is forcing subtree rerenders.
  • Inspect type definitions near API boundaries and form parsing code for unsafe narrowing or data coercion.
  • Confirm error paths handle rejected promises, partial data, and permission failures.
  • Treat duplicated business logic across pages, hooks, and helpers as a maintainability bug when it can diverge.

Output Requirements

Produce a structured Markdown report that includes:

  • Issue summary
  • Severity as Low, Medium, High, or Critical
  • Code location
  • Root cause
  • Suggested solution
  • Example refactored code

Use the report template in references/review-checklist.md. Keep code examples short, compilable in spirit, and consistent with local conventions.

Expand your agent's capabilities with these related and highly-rated skills.

shaowei-g/codex-skills

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

0 0
Explore
shaowei-g/codex-skills

ekoen-backend.doc.route-error

Add HttpErrorRes responses to eKoEN backend routes when controllers can throw errors from app/util/errors/index.ts

0 0
Explore
shaowei-g/codex-skills

conventional-commit-helper

Generate and validate Conventional Commit messages for semantic-release workflows. Use when a user asks to write a commit message, asks to commit changes, asks for commit type/scope selection, or asks to enforce Conventional Commits consistency.

0 0
Explore
shaowei-g/codex-skills

codex-cli-subagent-transport

Use only when native subagent execution is unavailable and the caller needs one deterministic Codex CLI run with repo-local artifacts and a manifest-based result contract.

0 0
Explore
shaowei-g/codex-skills

skill-usage-logger

All skill MUST use this logger to record usage events in NDJSON format.Log Codex skill usage events to NDJSON with safe concurrent appends.

0 0
Explore
shaowei-g/codex-skills

nodejs-package-json

Patch a Node.js project's package.json for standard build automation. Use when asked to add/standardize package.json scripts like prebuild/postbuild for TypeScript builds (rimraf dist + tsc-alias), adjust prebuild for Next.js (rimraf dist .next), or ensure an existing package.json pkg config includes required scripts/assets/targets/outputPath.

0 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results