菜单
Expert skill to refactor and migrate legacy Bootstrap CSS applications to modern stacks using Tailwind CSS v4 and Alpine.js / Skill ahli untuk melakukan refaktor dan migrasi aplikasi Bootstrap CSS lama ke stack modern menggunakan Tailwind CSS v4 dan Alpine.js.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Supabase security expert to audit RLS (Row Level Security), RBAC, relational databases, prevent data leakage, and utilize Supabase Linter / Ahli keamanan Supabase untuk audit RLS (Row Level Security), RBAC, database relasional, pencegahan kebocoran data, dan pemanfaatan Supabase Linter.
Expert guide for checking and improving the 4 main pillars of UI components: input controls, navigation, information, and containers. / Panduan ahli untuk memeriksa dan meningkatkan 4 pilar utama komponen UI: kontrol input, navigasi, informasi, dan kontainer.
Expert guide for designing and managing scalable monorepos using Turborepo, pnpm workspaces, and shared packages / Panduan ahli untuk merancang dan mengelola monorepo skalabel menggunakan Turborepo dan pnpm workspaces.
Master orchestrator to build an application from scratch to a production-ready release, enforcing strict step-by-step progression and continuous documentation / Orkestrator utama untuk membangun aplikasi dari nol hingga rilis siap produksi dengan dokumentasi bertahap.
Design and implement multi-tenant SaaS architectures with RLS, tenant isolation, and PostgreSQL / Desain dan implementasikan arsitektur SaaS multi-tenant dengan RLS, isolasi tenant, dan PostgreSQL.
Structured roadmap and design to plan and launch a SaaS MVP from scratch / Panduan terstruktur untuk merencanakan dan meluncurkan SaaS MVP dari nol.
| name | bootstrap-to-modern |
| description | Expert skill to refactor and migrate legacy Bootstrap CSS applications to modern stacks using Tailwind CSS v4 and Alpine.js / Skill ahli untuk melakukan refaktor dan migrasi aplikasi Bootstrap CSS lama ke stack modern menggunakan Tailwind CSS v4 dan Alpine.js. |
| author | Roedy Rustam |
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.
container, row, col-*) to Tailwind flexbox (flex, flex-col, gap-*) or CSS Grid (grid, grid-cols-*).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).primary, success, danger) to Tailwind color palettes (e.g., blue-600, green-500, red-500) or define custom themes in CSS variables for Tailwind v4.x-data="{ open: false }" and @click="open = !open".@click.outside).x-data="{ tab: 'home' }".ui_ux_expert, ui-ux-pro-max, and hig).sm:, md:, lg:).x-transition).Active whenever the user asks to migrate, refactor, or update a Bootstrap project to Tailwind CSS, or modernize legacy CSS/JS.
Skill ini mengubah aplikasi web lama yang di-style dengan Bootstrap (baik yang bergantung pada jQuery maupun murni CSS) menjadi arsitektur modern berbasis utility menggunakan Tailwind CSS v4 untuk styling dan Alpine.js untuk behavior reaktif yang ringan.
container, row, col-*) menjadi flexbox Tailwind (flex, flex-col, gap-*) atau CSS Grid (grid, grid-cols-*).m-3, p-4) ke Tailwind (m-4, p-6—perhatikan perbedaan skala). Petakan utilitas teks (text-center, font-weight-bold) ke padanan Tailwind (text-center, font-bold).primary, success, danger) ke palet warna Tailwind (misal: blue-600, green-500, red-500) atau definisikan tema kustom di variabel CSS untuk Tailwind v4.x-data="{ open: false }" dan @click="open = !open".@click.outside).x-data="{ tab: 'home' }".ui_ux_expert, ui-ux-pro-max, dan hig).sm:, md:, lg:).x-transition).Aktif setiap kali pengguna meminta untuk memigrasi, merefaktor, atau memperbarui proyek Bootstrap ke Tailwind CSS, atau memodernisasi CSS/JS lama.