Apply when writing or editing frontend assets in a Rails + Vite + Tailwind app (.erb, .js, .css under app/frontend). Covers file structure, Tailwind conventions, Flowbite integration, and accessibility.
app/frontend
├── components/ # Reusable frontend components (JS or ViewComponents)
│ └── dropdown/
│ ├── dropdown.js
│ └── dropdown.html.erb
├── controllers/
│ ├── application.js # Stimulus setup for debug mode
│ ├── index.js # Auto-registers controllers; imports Flowbite
│ └── sidebar_controller.js
├── entrypoints/
│ └── application.js # Main JS entry: imports controllers, Turbo, CSS
├── images/
│ └── svg/
├── stylesheets/
│ └── application.tailwind.css # Tailwind imports + theme variables
└── utils/
└── helpers.js
app/frontend/entrypoints/application.js imports , Stimulus controllers, and Turbo.application.tailwind.cssapp/frontend/stylesheets/application.tailwind.css holds Tailwind directives, theme variables, and plugins (@tailwindcss/forms, @tailwindcss/typography).--color-* and --size-* CSS variables for theming.aria-labels; semantic HTML.en.yml.