web_development
CommunityBuild web UIs with best practices, effortlessly.
Software Engineering#typescript#testing#best practices#web development#frontend#react#coding standards
AuthorKiikurage
Version1.0.0
Installs0
System Documentation
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
Dependency Matrix
Required Modules
bunreacttypescriptvitebiomezodbun-testreact-testing-libraryhappy-dom
Components
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: web_development Download link: https://github.com/Kiikurage/Claude-Code-Sample/archive/main.zip#web-development Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.