Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By sjnims
Bootstrap 5.3.8 and Bootstrap Icons front-end development expert plugin providing comprehensive guidance, best practices, and code generation for Bootstrap development.
npx claudepluginhub sjnims/bootstrap-expert --plugin bootstrap-expertThis skill should be used when the user asks about Bootstrap components, "how to create a modal", "navbar not collapsing", "carousel autoplay", "responsive card grid", "toast notifications", "dropdown menu", "accordion FAQ", "offcanvas sidebar", "tab navigation", "tooltip not showing", "popover not working", Bootstrap accordion, alerts, badges, breadcrumb, buttons, button groups, cards, carousel, close button, collapse, dropdowns, list group, modal, navbar, navs and tabs, offcanvas, pagination, placeholders, popovers, progress, scrollspy, spinners, toasts, tooltips, or needs help implementing any Bootstrap UI component.
This skill should be used when the user asks about Bootstrap typography, "how do I style text in Bootstrap", "show me Bootstrap heading styles", "Bootstrap text looks wrong", "text not wrapping in Bootstrap", "how to create responsive tables", "Bootstrap table not responsive", "Bootstrap table overflowing on mobile", "how do I format code blocks", "Bootstrap images not responsive", "why is my Bootstrap image not scaling", "how to center images in Bootstrap", "image thumbnail not working", "how to add figure captions", "figure caption not showing", display headings, lead text, text alignment, text formatting, tables, table styling, responsive images, figures, code blocks, blockquotes, lists, abbreviations, horizontal rules, Reboot CSS reset, or when help is needed styling text, tables, images, and other content elements in Bootstrap.
This skill should be used when the user asks "how do I customize Bootstrap", "how to create a custom Bootstrap theme", "what Sass variables can I override", "how to implement dark mode in Bootstrap", "how to change Bootstrap colors", "how to override Bootstrap defaults", "how to add custom colors to Bootstrap", "how to enable Bootstrap shadows", "how to compile Bootstrap Sass", "how to use Bootstrap CSS variables", or needs help with Bootstrap theming, Sass variable overrides, CSS custom properties, or color mode implementation.
This skill should be used when the user asks about Bootstrap forms, Bootstrap form controls, Bootstrap input fields, Bootstrap select, Bootstrap checkboxes, Bootstrap radio buttons, Bootstrap switches, Bootstrap range inputs, Bootstrap input groups, Bootstrap floating labels, Bootstrap form validation, Bootstrap form layout, Bootstrap toggle buttons, how to create Bootstrap forms, needs help with form styling and validation in Bootstrap, wants to create a form, add form validation, style form inputs, make an inline form, add floating labels to inputs, create a login form, build a registration form, or validate user input.
This skill should be used when the user asks about Bootstrap helpers, Bootstrap clearfix, Bootstrap color and background helpers, Bootstrap colored links, Bootstrap focus ring, Bootstrap icon link, Bootstrap position helpers, Bootstrap ratio helpers, Bootstrap stacks, Bootstrap stretched link, Bootstrap text truncation, Bootstrap vertical rule, Bootstrap visually hidden, or needs help with Bootstrap helper classes.
Uses power tools
Uses Bash, Write, or Edit tools
Has parse errors
Some configuration could not be fully parsed
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Frontend component development with accessibility and responsive design
Web development tools including frontend design workflows
Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency.
Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. This agent specializes in creating beautiful, functional interfaces that can be implemented quickly within 6-day sprints. Examples:\n\n<example>\nContext: Starting a new app or feature design
Advanced frontend design plugin with interactive wizard, trend research, moodboard creation, color/typography selection, and browser-based inspiration analysis
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Comprehensive toolkit for developing Claude Code plugins. Includes 10 expert skills covering hooks, MCP integration, LSP servers, commands, agents, marketplaces, and best practices, plus a guide skill for navigation. AI-assisted plugin creation and validation.
Transforms Claude's responses to use Gen Alpha/brainrot internet slang. No cap, this plugin hits different fr fr.
A comprehensive requirements management plugin that guides users through the full requirements lifecycle (vision → epics → user stories → tasks) using GitHub Projects for complete traceability and collaboration
Chart.js expert Claude Code plugin providing comprehensive guidance, best practices, and code generation for Chart.js
A comprehensive Claude Code plugin for Bootstrap 5.3.8 and Bootstrap Icons front-end development.
# Add the marketplace
/plugin marketplace add sjnims/bootstrap-expert
# Install the plugin
/plugin install bootstrap-expert@bootstrap-expert-marketplace
Or use the full URL:
/plugin marketplace add https://github.com/sjnims/bootstrap-expert
/plugin install bootstrap-expert@bootstrap-expert-marketplace
claude --plugin-dir /path/to/bootstrap-expert
Once the plugin is loaded, you can:
Ask Bootstrap questions - Skills load automatically based on your question:
"How do I create a responsive navbar?"
"What's the Bootstrap grid system?"
"How do I add form validation?"
Generate components - Use the command to create Bootstrap components:
/bootstrap-expert:component navbar
/bootstrap-expert:component modal --centered --scrollable
/bootstrap-expert:component card --with-image --horizontal
Get proactive help - The agent triggers automatically when you're working on Bootstrap-related tasks.
| Skill | Description |
|---|---|
bootstrap-overview | Getting started, installation, project setup, browser support |
bootstrap-customize | Sass variables, CSS custom properties, theming, color modes |
bootstrap-layout | Grid system, containers, breakpoints, columns, CSS Grid |
bootstrap-content | Typography, images, tables, figures, Reboot |
bootstrap-forms | Form controls, validation, input groups, floating labels |
bootstrap-components | All UI components (modals, navbars, cards, accordions, etc.) |
bootstrap-helpers | Clearfix, ratios, stacks, stretched links, visually hidden |
bootstrap-utilities | Spacing, colors, display, flex, position, sizing, text |
bootstrap-icons | Icons library installation, usage, styling, accessibility |
/bootstrap-expert:component [component-name]Generate Bootstrap component code interactively or with full arguments.
Interactive mode:
/bootstrap-expert:component navbar
With arguments:
/bootstrap-expert:component navbar --dark --fixed-top --with-search
Supported components:
accordion - Collapsible content panelsalert - Alert messagesbadge - Contextual labels and countersbreadcrumb - Breadcrumb navigationbutton / buttons - Button variants and stylesbutton-group - Grouped buttonscard - Card layouts with images, headers, footerscarousel - Image/content sliderscollapse - Collapsible content sectionsdropdown - Dropdown menusform - Form layouts with validationlist-group - List items with actionsmodal - Modal dialogs with customizable optionsnavbar - Navigation bars with various configurationsoffcanvas - Offcanvas sidebarspagination - Page navigationplaceholders - Loading placeholder animationspopover - Pop-up information boxesprogress - Progress barsspinner - Loading indicatorstable - Responsive data tablestabs / nav-tabs - Tabbed navigationtoast - Toast notificationstooltip - Hover tooltipsThe bootstrap-expert agent triggers proactively when Bootstrap-related work is detected, helping with:
Example triggers: