react-tailwind-layered-web

name

react-tailwind-layered-web

description

Build, refactor, review, or organize a React + Tailwind web app using a layered UI architecture: `src/foundations`, `src/primitives`, `src/patterns`, `src/features`, `src/pages`, `src/shell`, and `src/shared`. Use this skill whenever the user asks to create or change pages, routes, layouts, components, styling, feature UI, or app structure, especially when deciding where code belongs, how dependencies should flow, how to keep routes thin, or how to avoid dumping code into catch-all folders like `components` or `lib`.

React Tailwind Layered Web

Use this skill to keep React + Tailwind apps organized around clear ownership, thin route composition, and one-way imports.

Apply When

Apply when work touches:

• app setup, routing, layouts, or page composition
• React components, Tailwind styling, or UI refactors
• feature-specific UI and behavior
• folder placement, module ownership, or import direction

Skip when the task is backend-only, infra-only, or unrelated to the web UI.

Core Rules

• Keep the top-level router thin.
• Keep route files thin; they should mostly compose shell and feature workspaces.
• Keep domain contracts explicit; do not invent browser-only domain behavior when ownership belongs to shared contracts or the backend.
• Prefer the lowest valid layer; do not promote code upward just because it might be reused later.
• Do not create or grow catch-all folders like components or lib when a clearer layer exists.

Layer Map

Layer	Purpose	Allowed contents	Disallowed contents
src/foundations/	Visual foundations	design tokens, Tailwind imports, base styles