web-projects

What problem does it solve?

This Skill provides a structured approach to web development, ensuring consistency across different frameworks and package managers, and guiding the AI to follow established project patterns for components, styling, and testing. It streamlines your web development workflow, reducing errors and improving maintainability.

Core Features & Use Cases

• Framework & Package Manager Detection: Automatically identifies npm, yarn, pnpm, and frameworks like React, Next.js, Vue, or Angular to adapt its workflow to your project's specific needs.
• Workflow Standardization: Guides on using common scripts (dev, build, test, lint) and respecting project-specific configurations (tsconfig.json, .eslintrc), ensuring consistent development practices.
• Code Pattern Adherence: Ensures new code follows existing component structures, styling approaches (CSS Modules, Tailwind), and testing setups (Jest, Vitest), maintaining code quality and readability.
• Use Case: You're working on a React project using yarn. This skill will ensure the AI uses yarn for all package operations, respects the existing component structure, and runs tests using the project's configured test runner, saving you from correcting inconsistent practices and ensuring smooth collaboration.

Quick Start

Set up the web project in the current directory. Install all dependencies and start the development server. Ensure existing code patterns are respected.