What problem does it solve?
Ensures all web frontend development adheres to strict coding standards, best practices, and verification methods, reducing errors and improving code quality. It acts as a comprehensive knowledge base and checklist for frontend tasks, letting you focus on features, not flaws.
Core Features & Use Cases
- Coding Guidelines: Provides detailed rules for TypeScript, React, HTML, and CSS, including JSDoc comments, URL design, and recommended libraries.
- Design Patterns & Idioms: Guides on React component structure, state management (Context), accessibility, and nullish value handling.
- Mandatory Verification Workflow: Outlines a strict pre-commit checklist including linting, type checking, testing, and building, ensuring high-quality deliverables.
- Use Case: When developing a new React component, this skill provides the necessary guidelines for implementation, testing, and ensures all quality checks are passed before committing, guaranteeing robust and maintainable code.
Quick Start
To ensure all web development tasks follow best practices:
Always refer to the knowledge base before coding:
.claude/skills/web_development/web_development.md
After any code change, run these commands IN ORDER before committing:
bun run lint
bun run check
cd packages/web && bun test
bun run build
