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

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:

• Creating or editing HTML files with Bootstrap classes
• Discussing responsive layouts or breakpoints
• Working with Bootstrap JavaScript components
• Asking about Bootstrap customization or theming

Bootstrap Version

This plugin targets Bootstrap 5.3.8 and Bootstrap Icons 1.13.x.

All generated code, class names, and documentation align with these versions. When Bootstrap releases updates, this plugin will be updated accordingly.

Contributing

Contributions are welcome! Please read our Contributing Guide before submitting a Pull Request.

For security issues, please see our Security Policy.

License

MIT - see LICENSE for details.