Frontend H5 Code Review Guide
Paste the following prompt into your AI chat to install this skill:
Please install @user_6519e987/h5-code-review according to https://skillhub.cn/install/skillhub.md.
About this skill
What It Solves
Frontend H5 code review often lacks a consistent standard: component structure, TypeScript types, style naming, performance, and security issues end up scattered across PR comments. This skill separates merge-blocking defects from improvement suggestions, giving engineers a clear reference when reviewing React/Vue components, public APIs, list rendering, useEffect dependencies, image lazy loading, dangerouslySetInnerHTML, hardcoded secrets, and common H5 concerns.
How It Works
The skill centers on review guidelines and a checklist, including GUIDELINES.md, CHECKLIST.md, and config references such as .eslintrc.json, .prettierrc, and stylelint.config.js. A practical review workflow starts by classifying issues:
- Must-fix items: TypeScript errors, use of any, XSS risks, hardcoded sensitive data, unhandled exceptions, memory-leak risks, and missing tests for critical paths.
- Should-improve items: readability, comments, performance opportunities, DRY, error handling, and test coverage.
- Framework checkpoints: function components with Hooks, useMemo/useCallback, stable list keys, image lazy loading, lazy-loaded large components, and API debouncing or caching.
It can also support project setup, onboarding, and CI rule discussions by making targets like zero ESLint/TypeScript errors and coverage above 80% explicit.
Boundaries
It fits React, Vue, and TypeScript web teams, especially H5 projects, but is not a substitute for architecture review or business acceptance. Strictness should be adjusted by project stage: internal tools may relax coverage targets, while core H5 features should keep security and performance checks. If the repo already has ESLint, Prettier, or Stylelint configs, follow the existing rules first and introduce the checklist gradually.
Use Cases
- While reviewing a React component PR, check Hook dependencies, list keys, re-renders, and XSS risk, then report blocking issues.
- During Vue project review, compare component design, reactivity, style rules, and performance suggestions to flag merge blockers.
- When initializing an H5 project, use ESLint, Prettier, Stylelint references and the checklist to set team review baselines.
- Before CI integration, identify TypeScript errors, hardcoded secrets, exception handling gaps, and missing tests for a PR checklist.
Best For
- Frontend engineers reviewing web PRs who need to separate blocking defects from later optimization items.
- Frontend leads maintaining React or Vue component libraries who need to formalize type, performance, and security checks.
- Developers or tech leads initializing H5 projects who need to set baselines for ESLint, Prettier, and review flow.
- Technical mentors preparing frontend onboarding who need a checklist for components, TypeScript, and common security issues.
Related Skills
Automatically indexes Gradle-cached AAR/JAR dependency classes and returns library coordinates, versions, and public APIs by fully qualified name, using only the Python standard library.
Codifies AMT and YourMT3 training conventions, script patterns, hyperparameters, precision, checkpoints, and NaN safeguards.
Retrieve relevant chunks from a customer-managed PKM dataset by dataset_id and return concise, source-annotated answers.
Convert PRDs, user stories, or functional specs into prioritized test-point checklists covering functional, business-rule, boundary, exception, and non-functional dimensions.