About this skill

What problem it solves

A mobile H5 project is usually not a single script, but a full engineering flow that includes pages, components, API calls, builds, and deployment. Common risks include mixed CSS units causing layout shifts across devices, unclear component ownership leading to duplication, inconsistent async error handling, Git commits that are hard to trace, and missing pre-release checks for performance, bundle size, and security. Frontend H5 Code Standards aims to turn those conventions into executable team rules instead of informal expectations.

Core capabilities and workflow

HTML and mobile UX: it requires semantic tags, image alt text, touch-action, -webkit-tap-highlight-color, and controls for zoom and phone/email auto-detection to reduce tap, form, and compatibility issues.
CSS and performance: it recommends BEM naming, rem / vw responsive units, limited nesting depth, avoidance of the * selector, and CSS variables for theme colors and critical style loading.
JavaScript and Vue 3: it constrains const / let usage, template strings, try-catch handling, debounce/throttle patterns, event cleanup, and the boundary between basic components, business components, and page components, including props / events / slots data flow.
Engineering and release checks: it covers commit types, README structure, component docs, API docs, deployment checklists, and measurable targets such as FCP < 1.5s, LCP < 2.5s, FID < 100ms, CLS < 0.1, and bundle size < 500KB.

Fit and caveats

This standard is best suited for campaign pages, mid-level admin pages, or business H5 apps targeting iOS Safari 12+ and Android Chrome 70+. If a team already uses ESLint, Prettier, Stylelint, or Vue documentation tools, this can serve as a supplement for mobile and Vue 3 conventions; React, desktop, or pure backend projects should map the relevant principles rather than copy the Vue 3 and H5 rules directly.

Screenshots

Use Cases

Before releasing a Vue 3 campaign page, check bundle size, FCP, LCP, CLS, and deployment items.
When refactoring mobile CSS, enforce BEM naming, rem/vw units, and selector nesting limits.
When building buttons, inputs, or modals, define props, events, slots, and controlled state.
Before pushing Git commits, use feat/fix/refactor commit types and run the pre-submit checklist.

Best For

Frontend engineers building mobile campaign pages who need consistent HTML, CSS, and touch UX rules.
Vue 3 maintainers working on admin pages who need component boundaries, Pinia state, and routing conventions.
Tech leads running small H5 release cycles who need actionable Code Review and deployment checklists.
New developers joining the project who need quick alignment with ESLint, commit, and documentation standards.