bootstrap-to-modern

# Bootstrap to Modern (Tailwind + Alpine.js) / Refaktor Bootstrap ke Modern [English](#english) | [Bahasa Indonesia](#bahasa-indonesia) --- <a name="english"></a> ## English ### Description This skill transforms legacy web applications styled with Bootstrap (jQuery-dependent or pure CSS) into a modern, utility-first architecture using **Tailwind CSS v4** for styling and **Alpine.js** for lightweight reactive behavior. ### Instructions 1. **Analyze the Legacy Structure**: - Identify the version of Bootstrap being used. - Locate custom CSS files that override Bootstrap defaults. - Identify interactive components (modals, dropdowns, tooltips, tabs, carousels) that rely on Bootstrap's JavaScript or jQuery. 2. **Setup Modern Tools**: - Ensure **Tailwind CSS v4** is properly set up in the project (e.g., via CDN for simple projects, or PostCSS/Vite for build steps). - Inject **Alpine.js** via CDN or module bundler to handle interactivity. 3. **Migration Strategy**: - **Grid & Layout**: Convert Bootstrap grids (`container`, `row`, `col-*`) to Tailwind flexbox (`flex`, `flex-col`, `gap-*`) or CSS Grid (`grid`, `grid-cols-*`). - **Spacing & Typography**: Map Bootstrap spacing (`m-3`, `p-4`) to Tailwind spacing (`m-4`, `p-6`—noting scale differences). Map typography utilities (`text-center`, `font-weight-bold`) to Tailwind equivalents (`text-center`, `font-bold`). - **Colors**: Update Bootstrap semantic colors (`primary`, `success`, `danger`) to Tailwind col...