stitch-ui-design-spec-bootstrap
Bootstrap-Vue (Bootstrap 5/Vue) design spec for Stitch screen generation. Use when the user mentions Bootstrap, bootstrap-vue, bs-vue, or bs5 in a Stitch design request. Outputs a hard-constraints prefix with Bootstrap tokens (Primary #0d6efd, b-container/b-row/b-col/b-button components, mobile-first grid) or a CONTRACT_SELECTION_JSON_V1 selector.
Best use case
stitch-ui-design-spec-bootstrap is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Bootstrap-Vue (Bootstrap 5/Vue) design spec for Stitch screen generation. Use when the user mentions Bootstrap, bootstrap-vue, bs-vue, or bs5 in a Stitch design request. Outputs a hard-constraints prefix with Bootstrap tokens (Primary #0d6efd, b-container/b-row/b-col/b-button components, mobile-first grid) or a CONTRACT_SELECTION_JSON_V1 selector.
Bootstrap-Vue (Bootstrap 5/Vue) design spec for Stitch screen generation. Use when the user mentions Bootstrap, bootstrap-vue, bs-vue, or bs5 in a Stitch design request. Outputs a hard-constraints prefix with Bootstrap tokens (Primary #0d6efd, b-container/b-row/b-col/b-button components, mobile-first grid) or a CONTRACT_SELECTION_JSON_V1 selector.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "stitch-ui-design-spec-bootstrap" skill to help with this workflow task. Context: Bootstrap-Vue (Bootstrap 5/Vue) design spec for Stitch screen generation. Use when the user mentions Bootstrap, bootstrap-vue, bs-vue, or bs5 in a Stitch design request. Outputs a hard-constraints prefix with Bootstrap tokens (Primary #0d6efd, b-container/b-row/b-col/b-button components, mobile-first grid) or a CONTRACT_SELECTION_JSON_V1 selector.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/stitch-ui-design-spec-bootstrap/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How stitch-ui-design-spec-bootstrap Compares
| Feature / Agent | stitch-ui-design-spec-bootstrap | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Bootstrap-Vue (Bootstrap 5/Vue) design spec for Stitch screen generation. Use when the user mentions Bootstrap, bootstrap-vue, bs-vue, or bs5 in a Stitch design request. Outputs a hard-constraints prefix with Bootstrap tokens (Primary #0d6efd, b-container/b-row/b-col/b-button components, mobile-first grid) or a CONTRACT_SELECTION_JSON_V1 selector.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Bootstrap Design Spec (Bootstrap 5 / Vue)
**Constraint**: Only use this skill when the user explicitly mentions "Stitch".
## Purpose
This skill makes the Bootstrap design spec executable in two modes:
1) **Prefix mode**: output a paste-ready **Hard constraints prefix** for Stitch `[Context]`.
2) **Selector mode**: output `CONTRACT_SELECTION_JSON_V1` and then an assembled Stitch prompt that injects only the required component/state snippets.
## Trigger Keywords
Prefer this skill when the user request includes any of:
- `bootstrap`, `bootstrap-vue`, `bs-vue`, `bs5`
Chinese trigger keywords (only for triggering):
- `bootstrap 风格`
- `响应式布局` (if context implies Bootstrap)
## Source of Truth
- `references/contract.md`
- `references/examples.md`
- `references/official.md`
## Output (STRICT)
Decide the mode by the user intent:
- If the user asks for **beautify/polish/refine an existing screen**, or asks for **selector / JSON / contracts.include / states.include** → use **Selector mode**.
- Otherwise → use **Prefix mode**.
### Prefix mode
Return exactly one code block:
```text
[Hard constraints prefix]
- Framework: BootstrapVue (Vue 3 compatible / Bootstrap 5).
- Design Tokens:
- Colors: Primary=#0d6efd, Secondary=#6c757d, Success=#198754, Danger=#dc3545, Warning=#ffc107, Info=#0dcaf0.
- Spacing: STRICTLY use utility classes (m-*, p-*, gap-*). Scale: 1=0.25rem, 2=0.5rem, 3=1rem (default), 4=1.5rem, 5=3rem.
- Radius: rounded (0.25rem), rounded-pill, rounded-circle.
- Shadows: shadow-sm, shadow, shadow-lg.
- Component Contracts:
- Layout: Use <b-container>, <b-row>, <b-col cols="..." md="...">. NO raw CSS grid.
- Buttons: Use <b-button variant="primary" size="sm/lg">. NO <button class="btn">.
- Forms: Use <b-form-group>, <b-form-input>, <b-form-select>.
- Cards: Use <b-card title="..." img-src="...">.
- Tables: Use <b-table striped hover :items="...">.
- Layout Invariants:
- Mobile-first responsive classes (e.g., col-12 col-md-6).
- Use d-flex utilities for alignment.
```
### Selector mode
Return exactly two code blocks, in this order, with no extra prose:
1) Contract selection JSON:
```json
{
"version": "CONTRACT_SELECTION_JSON_V1",
"designSystem": "bootstrap-vue",
"mode": "selector",
"contracts": { "include": [] },
"states": { "include": [] }
}
```
2) Final Stitch prompt:
```text
[Context]
(Paste Hard Constraints Prefix here)
(Add "Layout Invariants" from contract.md if beautifying)
[Layout]
(Describe the macro layout structure, e.g., "Responsive Grid System with Container")
[Components]
(Inject component snippets matching the JSON selection above)
```
## References
- [Contract](references/contract.md)
- [Examples](references/examples.md)
- [Official Docs](references/official.md)Related Skills
bootstrap-vue3
Provides comprehensive guidance for Bootstrap Vue 3 component library including Bootstrap components, grid system, utilities, and Vue 3 integration. Use when the user asks about Bootstrap Vue 3, needs to use Bootstrap components in Vue 3, or implement responsive layouts.
course-designer
Design structured courses including syllabi, learning objectives using Bloom's taxonomy, lesson plans, and assessment rubrics. Use when the user asks about course design, needs to create a curriculum, write learning objectives, structure educational modules, or build assessment plans.
stitch-vue-vant-components
Convert Stitch designs into modular Vite + Vue 3 + Vant 4 mobile components. Use when the user mentions Vant or Vue Mobile conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Vant tokens (mobile-first 375px, safe area), enforces Vue SFC structure with Vant 4 components (van-button, van-field, van-nav-bar, van-tabbar).
stitch-vue-layui-components
Convert Stitch designs into modular Vite + Vue 3 + Layui-Vue components. Use when the user mentions Layui conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Layui tokens (2px/4px radius), enforces Vue SFC structure with Layui-Vue components (layui-btn, layui-input, lay-card, lay-page-header).
stitch-vue-element-components
Convert Stitch designs into modular Vite + Vue 3 + Element Plus components. Use when the user mentions Element Plus, element-ui, or Vue Desktop conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Element Plus tokens, enforces Vue SFC structure with el-* components (el-button, el-form, el-table, el-card, el-menu).
stitch-vue-bootstrap-components
Convert Stitch designs into modular Vite + Vue 3 + BootstrapVue/BootstrapVueNext components. Use when the user mentions Bootstrap or BootstrapVue conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Bootstrap utilities, enforces Vue SFC structure with Bootstrap components (b-container, b-row, b-col, b-button, b-card).
stitch-uviewpro-components
Convert Stitch designs into uni-app + Vue 3 + uView Pro pages and components. Use when the user mentions uView Pro, uviewpro, or uni-app Vue 3 conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to rpx/theme, enforces u-* component contracts (u-tabs, u-form, u-picker, u-card) with script setup.
stitch-uview-components
Convert Stitch designs into uni-app + Vue 2 + uView 2.0 pages and components. Use when the user mentions uView, uView 2, or uni-app Vue 2 conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to rpx/theme, enforces uni-app page structure with uView 2 u-* components (u-navbar, u-form, u-button, u-cell-group).
stitch-ui-prompt-architect
Build Stitch-ready prompts from vague UI ideas (Path A) or from a Design Spec plus user request (Path B). Use when polishing a UI prompt before Stitch generation, improving a prompt that produced poor results, or merging a Design Spec with framework contracts (uView, Element Plus, Layui, Bootstrap, Vant) into a sectioned Context/Layout/Components prompt.
stitch-ui-designer
Master orchestrator for end-to-end Stitch UI design and generation. Use when the user asks to design, create, or make a UI screen using Stitch. Coordinates design spec generation, framework contract injection, prompt assembly, and MCP execution (create_project, generate_screen_from_text, get_screen) in a single workflow.
stitch-ui-design-variants
Generate alternative Stitch design variant prompts for A/B testing and creative exploration. Use when the user wants multiple style, layout, or content options for a Stitch screen. Takes a base Design Spec or prompt and produces 3 distinct variants (layout, style, or content variations).
stitch-ui-design-spec-vant
Vant 4 (Vue 3/Mobile) design spec for Stitch screen generation. Use when the user mentions Vant, vant4, or vant-ui in a Stitch design request. Outputs a hard-constraints prefix with Vant tokens (Primary #1989fa, van-button/van-field/van-nav-bar components, mobile-first 375px) or a CONTRACT_SELECTION_JSON_V1 selector.