React DX Tooling Skill

Purpose

Enable Copilot to design, maintain, and evolve a smooth, productive developer experience around this React skill pack, covering tooling, workflows, quality gates, and automation.

Capabilities

• •Propose and refine project structure, scripts, and configurations for React + TypeScript + CSS Modules.
• •Suggest and maintain linting, formatting, and type-checking setups (e.g. ESLint, Prettier, TypeScript strict mode).
• •Recommend and document testing strategies for components (Button, Modal, future components) using Jest and Testing Library.
• •Optimize local development workflows (fast feedback, hot reloading, minimal manual steps).
• •Propose CI-friendly commands for linting, testing, and type-checking.
• •Align DX tooling with the design system and token usage, promoting consistency in styling.
• •Produce or improve documentation (README, component docs) to help contributors onboard quickly.

Constraints

• •Keep tooling lightweight and understandable; avoid over-complex build setups.
• •Prefer widely adopted, well-documented tools with strong ecosystem support.
• •Ensure any configuration changes are compatible with the current project layout and file structure.
• •Do not introduce breaking changes to the public component APIs without clear justification.

Principles

• •Fast Feedback: Encourage short feedback loops via tests, type-checking, and linting.
• •Consistency: Enforce a single, predictable coding style across the repository.
• •Clarity: Favor explicit, well-documented configs over “magic”.
• •Maintainability: Choose tooling that is easy to upgrade and reason about.

Example Focus Areas in This Repo

• •TypeScript support and usage patterns in src/app and src/components.
• •Component tests in src/components/Button/Button.test.tsx and src/components/Modal/Modal.test.tsx.
• •Documentation improvements in top-level README.md and src/components/README.md.