bootstrap-expert-marketplace

Bootstrap Expert Plugin

A comprehensive Claude Code plugin for Bootstrap 5.3.8 and Bootstrap Icons front-end development.

Table of Contents

• Features
• Prerequisites
• Installation
• Quick Start
• Skills
• Commands
• Agent
• Bootstrap Version
• Contributing
• License

Features

• 9 Specialized Skills - Deep expertise aligned with Bootstrap's documentation structure
• Component Generator - Interactive command to generate Bootstrap components
• Proactive Agent - Autonomous assistant for Bootstrap development tasks

Prerequisites

• Claude Code installed and configured

Installation

From GitHub (Recommended)

# 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

Local Development

claude --plugin-dir /path/to/bootstrap-expert

Quick Start

Once the plugin is loaded, you can:

1. 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?"
   

2. 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
   

3. Get proactive help - The agent triggers automatically when you're working on Bootstrap-related tasks.

Skills

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

Commands

/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 panels
• alert - Alert messages
• badge - Contextual labels and counters
• breadcrumb - Breadcrumb navigation
• button / buttons - Button variants and styles
• button-group - Grouped buttons
• card - Card layouts with images, headers, footers
• carousel - Image/content sliders
• collapse - Collapsible content sections
• dropdown - Dropdown menus
• form - Form layouts with validation
• list-group - List items with actions
• modal - Modal dialogs with customizable options
• navbar - Navigation bars with various configurations
• offcanvas - Offcanvas sidebars
• pagination - Page navigation
• placeholders - Loading placeholder animations
• popover - Pop-up information boxes
• progress - Progress bars
• spinner - Loading indicators
• table - Responsive data tables
• tabs / nav-tabs - Tabbed navigation
• toast - Toast notifications
• tooltip - Hover tooltips

Agent

The bootstrap-expert agent triggers proactively when Bootstrap-related work is detected, helping with:

• Component Implementation - Guidance on implementing Bootstrap components correctly
• Layout Troubleshooting - Solving grid system and responsive design issues
• Accessibility - Ensuring components meet WCAG guidelines with proper ARIA attributes
• Code Review - Reviewing Bootstrap code for best practices and optimization

Example triggers: