Enterprise Front-end Development Specification

Why Does a Unified Front-end Development Specification Matter?

In collaborative front-end projects, a common and thorny issue is the lack of coding standardization. This manifests as inconsistent directory structures, varied naming conventions, arbitrary CSS class naming, and divergent JavaScript writing styles. This disorder directly reduces code readability, hinders component reuse, slows down onboarding for new developers, and introduces numerous potential bugs during later maintenance. A clear, unified development specification is fundamental to maintaining the health of large-scale front-end projects.

Core Capabilities and How This Skill Works

This skill (@user_27ccabd4/frontend-spec) is not a code generator or dependency, but rather a comprehensive, actionable set of enterprise-level front-end development conventions. It provides clear coding guidelines for teams through detailed descriptions and examples. Its core capabilities and key steps are as follows:

• Establishes a Clear Project Skeleton: It first defines a standardized src/ directory structure. For instance, using api/ for interface requests, components/ for shared components, and store/ for state management code. This fundamentally resolves issues of chaotic project organization.
• Unifies Coding Detail Conventions: It specifies detailed naming standards for files, variables, components, and even comments (e.g., components in PascalCase UserList.vue, constants in UPPER_SNAKE_CASE MAX_COUNT), eliminating differences caused by individual habits.
• Standardizes Language and Framework Practices: It provides concrete best practice guidelines for HTML (semantic tags), CSS/SCSS (BEM naming, prohibiting deep nesting), JavaScript/TypeScript (banning var, preferring async/await), and major frameworks like Vue or React.
• Integrates Engineering Workflows: It incorporates engineering processes like Git commit messages (e.g., feat(scope): content) and ESLint/Prettier formatting rules (e.g., 2-space indentation, single quotes) into the specification, ensuring consistency from writing to submission.
• Covers Quality and Security Baselines: The specification finally emphasizes non-negotiable bottom-line rules for performance optimization (e.g., image lazy loading, virtual scrolling) and security hardening (e.g., preventing XSS, prohibiting plaintext storage of keys/tokens in the front end).

Applicability and Considerations

This specification is primarily designed for mid-to-backoffice applications, mobile web apps, or standard web projects using Vue or React tech stacks. Please note, this is a recommended set of conventions. Teams need to discuss and reach a consensus before adopting it, incorporating it as part of the project's CONTRIBUTING.md or Wiki. For legacy projects or special scenarios, teams may selectively adopt certain clauses for a smooth transition. The vitality of a specification lies in its continuous adherence and appropriate evolution, not in a one-time, forceful imposition.