Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add roedyrustam/vibes-plug --skill bootstrap-to-moderngit clone --depth 1 https://github.com/roedyrustam/vibes-plugWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/roedyrustam/vibes-plug/bootstrap-to-modern)<a href="https://agentmods.dev/skills/roedyrustam/vibes-plug/bootstrap-to-modern"><img src="https://agentmods.dev/badge/skills/roedyrustam/vibes-plug/bootstrap-to-modern/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/roedyrustam/vibes-plug/bootstrap-to-modern"><img src="https://agentmods.dev/badge/skills/roedyrustam/vibes-plug/bootstrap-to-modern.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00054 | $0.01727 |
| Opus 5 | $0.00027 | $0.00864 |
| Sonnet 5 | $0.00011 | $0.00345 |
| Haiku 4.5 | $0.00005 | $0.00173 |
Grade A, and why
bootstrap-to-modern scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 95 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Bootstrap to Modern (Tailwind + Alpine.js) / Refaktor Bootstrap ke Modern
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
- 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.
- 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.
- 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 color palettes (e.g.,blue-600,green-500,red-500) or define custom themes in CSS variables for Tailwind v4. - Components: Rebuild Bootstrap components (cards, buttons, alerts, navbars) using Tailwind utility classes to match or improve the original design.
- Grid & Layout: Convert Bootstrap grids (
- Interactivity with Alpine.js:
- Remove jQuery and Bootstrap JS dependencies.
- Replace interactive Bootstrap components with Alpine.js data and directives.
- Dropdowns: Use
x-data="{ open: false }"and@click="open = !open". - Modals: Use Alpine.js to manage the open state and handle background overlays and click-away events (
@click.outside). - Tabs: Manage active tab state with
x-data="{ tab: 'home' }".
- UI/UX Modernization & Skill Integration:
- Do NOT just do a 1:1 translation of Bootstrap classes. The goal is to elevate the design.
- You MUST orchestrate and apply guidelines from other UI/UX skills (
ui-ux-expert,ui-ux-pro-max, andhig). - Implement Human Interface Guidelines (HIG) principles: Hierarchy, Harmony, and Consistency.
- Use vibrant colors, smooth micro-animations, glassmorphism (if appropriate), and modern typography to "WOW" the user.
- Quality Assurance:
- Verify that responsive design behaves correctly across breakpoints (
sm:,md:,lg:). - Ensure interactive components (modals, dropdowns) feel premium with Alpine.js transitions (
x-transition).
- Verify that responsive design behaves correctly across breakpoints (
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 95 lines · 54 tokens per session scan A cd522479ebd9
bootstrap-to-modern is a skill published in the GitHub repository roedyrustam/vibes-plug (50 stars, last pushed 2d ago), licensed MIT. It adds 54 tokens to every session and 1,727 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
frontend-ui-engineering
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
animated-sketch-diagram
A tool for making animated diagrams and flowcharts in a hand-drawn ink style, with paper-like backgrounds, simple icons, and moving dots along connections. It produces a self-contained HTML file and can also create a looping GIF.
taste
Use when improving the visual taste, positioning, polish, trust, and conversion clarity of a website or product UI. Runs a category-first visual audit, applies a decisive design pass, and verifies the result with screenshots rather than subjective vibes.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build landing pages, websites, dashboards, web components, or any frontend UI. Generates creative, polished code that avoids generic AI aesthetics.
frontend-blueprint
AI frontend specialist and design consultant that guides users through a structured discovery process before generating any code. Collects visual references, design tokens, typography, icons, layout preferences, and brand guidelines to ensure the final output matches the user's vision with high fidelity. Use when the…
core-web-vitals
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts". Focuses specifically on the three Core Web Vitals metrics. Do NOT use for general web…