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.