Organize React TSX components with colocated patterns and flat directories.
npx skills add https://github.com/lucas-barake/dotai --skill react-lucas-barake
Please help me install this Agent Skill. Skill: react Source: https://github.com/lucas-barake/dotai/tree/main/canonical/skills/react Command: npx skills add https://github.com/lucas-barake/dotai --skill react-lucas-barake
React projects often suffer from tangled component trees and inconsistent patterns across teams. This Skill provides proven frontend patterns to improve organization and reusability.
Organize your next React component into a single-file pattern with a root component and its subcomponents as properties.
High-intent search queries and answers about installing and using this skill.
Organize React components by enforcing colocated patterns, keeping related components in a single TSX file to simplify maintenance and reduce file navigation. This approach establishes clear component boundaries and predictable structure across your project.
The colocation pattern keeps a root component and its related subcomponents together within a single TSX file. By treating subcomponents as properties of the root, it reduces file navigation and simplifies long-term maintenance of your React frontend.
Structure TanStack Router routes by using a flat directory structure with dedicated -lib areas for clean routing. This organization avoids barrel files and ensures predictable component boundaries across your React application.
No, this React component pattern does not require external tools beyond standard React tooling. It relies on frontmatter-guided guidance in SKILL.md and naming rules to enforce structure, working natively with TSX files and TanStack Router.
Avoid barrel files to maintain a flat directory structure that keeps your React codebase concise and easily navigable. Enforcing direct imports without barrel files prevents tangled component trees and ensures predictable project organization.
Yes, these React component patterns are designed for TypeScript projects using TSX files. The structural rules apply directly to TSX component composition, ensuring clear boundaries and maintainable frontend architecture without conflicting with TypeScript configurations.
ByeongminLeeReview React TSX files for best practices and remediation guidance.
AndyMarigoldLabsImplement type-safe file-based routing with TanStack Router in React applications.
KurrawongProvide headless Vue 3 component primitives with WAI-ARIA compliance.
bennybennisonSplit large source files into modules while preserving imports via barrel re-exports.
