Frontend Development Skill
Overview
This skill provides universal patterns for front-end development workflow, focusing on componentization, state management, testing, and deployment. It is technology-agnostic and emphasizes maintainability, scalability, and quality.
When to Use
- Building, refactoring, or scaling front-end applications
- Managing state, side effects, or data flow
- Preparing for deployment or CI/CD
- Reviewing or improving code quality and structure
Critical Patterns
Componentization
- Build small, reusable components with clear responsibilities
- Use composition over inheritance
- Separate UI, logic, and data concerns
State Management
- Use local state for isolated logic, global state for shared data
- Avoid prop drilling by using context or stores
- Keep state immutable and predictable
Testing
- Write unit and integration tests for components and logic
- Use user-centric testing (simulate real interactions)
- Automate tests in CI pipelines
Deployment
- Automate build, test, and deploy steps
- Use environment variables for config
- Monitor deployments for errors and rollbacks
Decision Tree
- New feature? → Create isolated, testable component
- State needed? → Use local or global store
- Deployment? → Automate with CI/CD
- Bug found? → Add/expand test coverage
Edge Cases
- State sync bugs (race conditions, stale data)
- Build pipeline failures (misconfig, env issues)
- Cross-browser or device-specific issues
Practical Examples
Before (monolithic component)
Large component with mixed UI, logic, and data fetching.
After (modularized)
Split into small components: UI, logic, and data separated, easier to test and maintain.
Before (no tests)
Features shipped without automated tests, leading to regressions.
After (tested)
Each component and logic path has unit/integration tests, CI runs on every PR.
References
- Use with conventions, architecture-patterns, and a11y for best results.
1---2name: frontend-dev-43description: Front-end development workflow and best practices. Componentization, state management, testing, and deployment. Trigger: When building, refactoring, or scaling front-end applications.4---5
6# Frontend Development Skill
7
8## Overview
9
10This skill provides universal patterns for front-end development workflow, focusing on componentization, state management, testing, and deployment. It is technology-agnostic and emphasizes maintainability, scalability, and quality.
11
12## When to Use
13
14- Building, refactoring, or scaling front-end applications
15- Managing state, side effects, or data flow
16- Preparing for deployment or CI/CD
17- Reviewing or improving code quality and structure
18
19## Critical Patterns
20
21### Componentization
22
23- Build small, reusable components with clear responsibilities
24- Use composition over inheritance
25- Separate UI, logic, and data concerns
26
27### State Management
28
29- Use local state for isolated logic, global state for shared data
30- Avoid prop drilling by using context or stores
31- Keep state immutable and predictable
32
33### Testing
34
35- Write unit and integration tests for components and logic
36- Use user-centric testing (simulate real interactions)
37- Automate tests in CI pipelines
38
39### Deployment
40
41- Automate build, test, and deploy steps
42- Use environment variables for config
43- Monitor deployments for errors and rollbacks
44
45## Decision Tree
46
47- New feature? → Create isolated, testable component
48- State needed? → Use local or global store
49- Deployment? → Automate with CI/CD
50- Bug found? → Add/expand test coverage
51
52## Edge Cases
53
54- State sync bugs (race conditions, stale data)
55- Build pipeline failures (misconfig, env issues)
56- Cross-browser or device-specific issues
57
58## Practical Examples
59
60### Before (monolithic component)
61
62> Large component with mixed UI, logic, and data fetching.
63
64### After (modularized)
65
66> Split into small components: UI, logic, and data separated, easier to test and maintain.
67
68### Before (no tests)
69
70> Features shipped without automated tests, leading to regressions.
71
72### After (tested)
73
74> Each component and logic path has unit/integration tests, CI runs on every PR.
75
76## References
77
78- Use with conventions, architecture-patterns, and a11y for best results.
majiayu000