frontend/technical-spec

Environment variable enforcement in React involves configuring build tools like Vite to use import.meta.env for accessing variables, preventing secrets from being exposed in browser code. This Skill automates those rules across your TypeScript React application, ensuring variables are properly scoped and sensitive data stays server-side.

React component architecture using TypeScript and hooks follows a hierarchy: atoms (base components) → pages, enforced through Function Components with type-safe Props and State. This Skill defines and validates that pattern automatically, maintaining consistent structure across your codebase.

Secrets must never be committed to browser-accessible code. This Skill enforces that prohibition by scanning your React application, blocking hardcoded sensitive data, and directing you to use environment variables via build tool configuration instead.

Yes. This Skill is designed for TypeScript-based React applications using build tools like Vite. It sets up environment variable management, component architecture patterns, data flow rules, and build and test commands with coverage thresholds on new or existing projects.

Unidirectional data flow ensures state flows one way through your component tree, reducing bugs and improving predictability. This Skill enforces that pattern by validating Props and State management follow a top-down flow with no circular dependencies.

Build and test workflows need standardized commands and quality thresholds. This Skill defines and enforces those requirements—specifying which build and test commands to use and minimum coverage targets—so all contributors follow the same quality gates.