🎨 Bootstrap Components
This 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
npx playbooks add skill sjnims/bootstrap-expert --skill bootstrap-components
About Bootstrap Components
This 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
Its 41-word system prompt specializes your agent in frontend development with structured methodology and proven output formats. Install with one command to activate immediately.
Use Cases
- Building responsive UI components and layouts
- Implementing accessible, WCAG-compliant interfaces
- Debugging CSS, animations, and cross-browser issues
- Integrating design systems and component libraries
Example Prompts
System Prompt (41 words)
This 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
Frequently Asked Questions
What is Bootstrap Components?
Bootstrap Components is a free frontend development skill for AI coding agents. This 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 . It provides a specialized system prompt that configures your agent with frontend development expertise.
How do I use Bootstrap Components with Claude Code?
Run npx playbooks add skill sjnims/bootstrap-expert --skill bootstrap-components in your terminal to install Bootstrap Components into your Claude Code session. It works immediately after installation.
Which AI coding agents work with Bootstrap Components?
Bootstrap Components is compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any AI agent that supports custom system prompts or .cursorrules files.
Is Bootstrap Components free to use?
Yes, Bootstrap Components is completely free and open source. The full source is available on GitHub at https://github.com/sjnims/bootstrap-expert/tree/main/plugins/bootstrap-expert/skills/bootstrap-components. You only need a subscription to the AI agent you use it with.
