imhcode 1.0.0

package/skills/best-practice/claude-skills.md

@@ -0,0 +1,58 @@
+# Skills Best Practice
+
+![Last Updated](https://img.shields.io/badge/Last_Updated-May%2012%2C%202026%2011%3A36%20PM%20PKT-white?style=flat&labelColor=555) ![Version](https://img.shields.io/badge/Claude_Code-v2.1.139-blue?style=flat&labelColor=555)<br>
+[![Implemented](https://img.shields.io/badge/Implemented-2ea44f?style=flat)](../implementation/claude-skills-implementation.md)
+
+Claude Code skills — frontmatter fields and official bundled skills.
+
+<table width="100%">
+<tr>
+<td><a href="../">← Back to Claude Code Best Practice</a></td>
+<td align="right"><img src="../!/claude-jumping.svg" alt="Claude" width="60" /></td>
+</tr>
+</table>
+
+---
+
+## Frontmatter Fields (15)
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `name` | string | No | Display name and `/slash-command` identifier. Defaults to the directory name if omitted |
+| `description` | string | Recommended | What the skill does. Shown in autocomplete and used by Claude for auto-discovery |
+| `when_to_use` | string | No | Additional context for when Claude should invoke the skill — trigger phrases and example requests. Appended to `description` in the skill listing, counts toward the 1,536-character cap |
+| `argument-hint` | string | No | Hint shown during autocomplete (e.g., `[issue-number]`, `[filename]`) |
+| `arguments` | string/list | No | Named positional arguments for `$name` substitution in the skill content. Accepts a space-separated string or a YAML list — names map to argument positions in order |
+| `disable-model-invocation` | boolean | No | Set `true` to prevent Claude from automatically invoking this skill |
+| `user-invocable` | boolean | No | Set `false` to hide from the `/` menu — skill becomes background knowledge only, intended for agent preloading |
+| `allowed-tools` | string | No | Tools allowed without permission prompts when this skill is active |
+| `model` | string | No | Model to use when this skill runs (e.g., `haiku`, `sonnet`, `opus`) |
+| `effort` | string | No | Override the model effort level when invoked (`low`, `medium`, `high`, `xhigh`, `max`) |
+| `context` | string | No | Set to `fork` to run the skill in an isolated subagent context |
+| `agent` | string | No | Subagent type when `context: fork` is set (default: `general-purpose`) |
+| `hooks` | object | No | Lifecycle hooks scoped to this skill |
+| `paths` | string/list | No | Glob patterns that limit when the skill auto-activates. Accepts a comma-separated string or YAML list — Claude loads the skill only when working with matching files |
+| `shell` | string | No | Shell for `` !`command` `` blocks — `bash` (default) or `powershell`. Requires `CLAUDE_CODE_USE_POWERSHELL_TOOL=1` |
+
+---
+
+## ![Official](../!/tags/official.svg) **(6)**
+
+| # | Skill | Description |
+|---|-------|-------------|
+| 1 | `simplify` | Review changed code for reuse, quality, and efficiency — refactors to eliminate duplication |
+| 2 | `batch` | Run commands across multiple files in bulk |
+| 3 | `debug` | Debug failing commands or code issues |
+| 4 | `loop` | Run a prompt or slash command on a recurring interval (up to 3 days) |
+| 5 | `claude-api` | Build apps with the Claude API or Anthropic SDK — triggers on `anthropic` / `@anthropic-ai/sdk` imports |
+| 6 | `fewer-permission-prompts` | Scan transcripts for common read-only Bash/MCP calls and add a prioritized allowlist to `.claude/settings.json` to reduce permission prompts |
+
+See also: [Official Skills Repository](https://github.com/anthropics/skills/tree/main/skills) for community-maintained installable skills.
+
+---
+
+## Sources
+
+- [Claude Code Skills — Docs](https://code.claude.com/docs/en/skills)
+- [Skills Discovery in Monorepos](../reports/claude-skills-for-larger-mono-repos.md)
+- [Claude Code CHANGELOG](https://github.com/anthropics/claude-code/blob/main/CHANGELOG.md)

package/skills/best-practice/claude-subagents.md

@@ -0,0 +1,56 @@
+# Sub-agents Best Practice
+
+![Last Updated](https://img.shields.io/badge/Last_Updated-May%2012%2C%202026%2011%3A38%20PM%20PKT-white?style=flat&labelColor=555) ![Version](https://img.shields.io/badge/Claude_Code-v2.1.139-blue?style=flat&labelColor=555)<br>
+[![Implemented](https://img.shields.io/badge/Implemented-2ea44f?style=flat)](../implementation/claude-subagents-implementation.md)
+
+Claude Code subagents — frontmatter fields and official built-in agent types.
+
+<table width="100%">
+<tr>
+<td><a href="../">← Back to Claude Code Best Practice</a></td>
+<td align="right"><img src="../!/claude-jumping.svg" alt="Claude" width="60" /></td>
+</tr>
+</table>
+
+---
+
+## Frontmatter Fields (16)
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `name` | string | Yes | Unique identifier using lowercase letters and hyphens |
+| `description` | string | Yes | When to invoke. Use `"PROACTIVELY"` for auto-invocation by Claude |
+| `tools` | string/list | No | Comma-separated allowlist of tools (e.g., `Read, Write, Edit, Bash`). Inherits all tools if omitted. Supports `Agent(agent_type)` syntax to restrict spawnable subagents; the older `Task(agent_type)` alias still works |
+| `disallowedTools` | string/list | No | Tools to deny, removed from inherited or specified list |
+| `model` | string | No | Model to use: `sonnet`, `opus`, `haiku`, a full model ID (e.g., `claude-opus-4-6`), or `inherit` (default: `inherit`) |
+| `permissionMode` | string | No | Permission mode: `default`, `acceptEdits`, `auto`, `dontAsk`, `bypassPermissions`, or `plan` |
+| `maxTurns` | integer | No | Maximum number of agentic turns before the subagent stops |
+| `skills` | list | No | Skill names to preload into agent context at startup (full content injected, not just made available) |
+| `mcpServers` | list | No | MCP servers for this subagent — server name strings or inline `{name: config}` objects |
+| `hooks` | object | No | Lifecycle hooks scoped to this subagent. All hook events are supported; `PreToolUse`, `PostToolUse`, and `Stop` are the most common |
+| `memory` | string | No | Persistent memory scope: `user`, `project`, or `local` |
+| `background` | boolean | No | Set to `true` to always run as a background task (default: `false`) |
+| `effort` | string | No | Effort level override when this subagent is active: `low`, `medium`, `high`, `xhigh`, `max` (Opus 4.6 only). Default: inherits from session |
+| `isolation` | string | No | Set to `"worktree"` to run in a temporary git worktree (auto-cleaned if no changes) |
+| `initialPrompt` | string | No | Auto-submitted as the first user turn when this agent runs as the main session agent (via `--agent` or the `agent` setting). Commands and skills are processed. Prepended to any user-provided prompt |
+| `color` | string | No | Display color for the subagent in the task list and transcript: `red`, `blue`, `green`, `yellow`, `purple`, `orange`, `pink`, or `cyan` |
+
+---
+
+## ![Official](../!/tags/official.svg) **(5)**
+
+| # | Agent | Model | Tools | Description |
+|---|-------|-------|-------|-------------|
+| 1 | `general-purpose` | inherit | All | Complex multi-step tasks — the default agent type for research, code search, and autonomous work |
+| 2 | `Explore` | haiku | Read-only (no Write, Edit) | Fast codebase search and exploration — optimized for finding files, searching code, and answering codebase questions |
+| 3 | `Plan` | inherit | Read-only (no Write, Edit) | Pre-planning research in plan mode — explores the codebase and designs implementation approaches before writing code |
+| 4 | `statusline-setup` | sonnet | Read, Edit | Configures the user's Claude Code status line setting |
+| 5 | `claude-code-guide` | haiku | Glob, Grep, Read, WebFetch, WebSearch | Answers questions about Claude Code features, Agent SDK, and Claude API |
+
+---
+
+## Sources
+
+- [Create custom subagents — Claude Code Docs](https://code.claude.com/docs/en/sub-agents)
+- [CLI reference — Claude Code Docs](https://code.claude.com/docs/en/cli-reference)
+- [Claude Code CHANGELOG](https://github.com/anthropics/claude-code/blob/main/CHANGELOG.md)

package/skills/blender-motion-state-inspection/SKILL.md

@@ -0,0 +1,164 @@
+---
+name: blender-motion-state-inspection
+description: Use this skill when inspecting Blender characters, rigs, poses, animation retargeting, ground contact, facing direction, or model-vs-motion alignment where screenshots alone are not enough.
+origin: ECC
+tools: Read, Write, Edit, Bash, Grep, Glob
+---
+
+# Blender Motion State Inspection
+
+## When to Use
+
+- A Blender character looks twisted, mirrored, flattened, offset, or foot-sliding in an animation.
+- A user asks whether an imported avatar, armature, or retargeted motion matches an expected pose.
+- You need to compare rendered evidence with structured facts such as bones, bounding boxes, contacts, and facing vectors.
+- A workflow depends on deciding whether a model is a character, prop, proxy mesh, control rig, or broken import.
+
+## Core Principle
+
+Do not judge animated 3D assets only from screenshots. Screenshots are review evidence, but they hide axis conventions, bone names, object scale, local transforms, parented meshes, material slots, and frame-by-frame contact state.
+
+First extract structured Blender state, then use viewport screenshots or renders to confirm what the facts imply.
+
+## How It Works
+
+1. Establish the clean scene and asset baseline before judging motion.
+2. Extract structured facts from Blender using an exporter or Blender Python run inside Blender's own interpreter.
+3. Sample the frames most likely to expose contact, orientation, scale, and retargeting errors.
+4. Compare the measured facts against the user's expected pose, direction, ground plane, and render goal.
+5. Return a concise report that separates confirmed facts, likely causes, and required fixes.
+
+## Inspection Workflow
+
+1. Inventory the scene.
+   - List meshes, armatures, empties, cameras, lights, modifiers, parent relationships, and hidden objects.
+   - Separate character meshes from helper/proxy geometry before judging the avatar.
+   - Record object-space and world-space bounding boxes.
+
+2. Identify the skeleton.
+   - Capture armature names, pose bones, bone heads/tails, roll, parent chains, constraints, and rest-pose axes.
+   - Map semantic bones such as hips, spine, neck, head, shoulders, elbows, hands, thighs, knees, ankles, and feet.
+   - Flag missing left/right pairs and unusual naming schemes.
+
+3. Determine forward, up, and side axes.
+   - Use the pelvis, spine, shoulders, hips, head, and feet together; do not rely on a single mesh normal.
+   - Compare local armature axes with world axes and imported file conventions such as glTF Y-up vs Blender Z-up.
+   - Mark likely mirrored or backwards imports when face/head/feet direction conflicts with root motion.
+
+4. Sample animation frames.
+   - Inspect first, middle, contact, airborne, and extreme frames.
+   - Record root location, root heading, pelvis height, torso lean, limb directions, foot clearance, and mesh bounds.
+   - For long or fast motion, sample more densely around flips, landings, turns, collisions, and floor contacts.
+
+5. Check model integrity before retargeting blame.
+   - Confirm the clean baseline shape before applying animation.
+   - Preserve original mesh, materials, armature, and skinning unless the user explicitly asks for repair.
+   - Treat unexplained sphere-like blobs, giant proxy meshes, or crushed bodies as import/selection issues until proven otherwise.
+
+6. Diagnose contact and motion issues.
+   - Ground penetration: compare lowest foot or shoe vertices with floor height per frame.
+   - Foot sliding: compare foot world positions across planted frames.
+   - Leg crossover: compare left/right thigh, knee, ankle, and foot side ordering.
+   - Twist damage: compare bone swing direction separately from roll/twist around the limb axis.
+   - Scale drift: compare animated mesh bounds against the clean baseline bounds.
+
+7. Report facts before opinions.
+   - Include frame numbers, object names, bone names, world coordinates, and thresholds.
+   - Separate confirmed failures from visual suspicions.
+   - Attach screenshots only after the structured state explains what to look for.
+
+## Recommended Report Shape
+
+```markdown
+## Blender Motion Inspection
+
+### Scene Inventory
+- Character candidates:
+- Armatures:
+- Helper/proxy objects:
+- Cameras/lights:
+
+### Orientation
+- World up:
+- Character forward:
+- Root heading:
+- Mirrored/backwards risk:
+
+### Baseline Integrity
+- Clean mesh bounds:
+- Animated mesh bounds:
+- Materials/skin preserved:
+- Suspicious non-character meshes:
+
+### Frame Findings
+| Frame | Finding | Evidence |
+| --- | --- | --- |
+| 1 | Clean baseline pose | hips/spine/feet aligned |
+| 96 | Foot penetrates floor | left_foot min_z = -0.04 |
+
+### Verdict
+- Pass/fail:
+- Required fix:
+- Render readiness:
+```
+
+## Examples
+
+### Walk Cycle With Foot Sliding
+
+Scenario: a retargeted character appears to skate during a walk cycle, but the front camera angle makes the foot contact hard to judge.
+
+Apply the workflow:
+- Inventory the scene: character mesh `HeroBody`, armature `HeroRig`, ground plane `Floor`, no hidden proxy meshes.
+- Identify the skeleton: semantic feet are `foot.L` and `foot.R`; hips are `pelvis`; root bone is `root`.
+- Sample animation frames: inspect frames 1, 18, 24, 30, 42, and 48 around planted-foot moments.
+- Diagnose contact and motion issues: compare world-space foot locations during planted frames.
+
+Extracted facts:
+
+| Frame | Fact | Evidence |
+| --- | --- | --- |
+| 18 | Left foot is planted | `foot.L min_z = 0.004`, toe and heel both near floor |
+| 24 | Left foot slides while planted | `foot.L x = 0.21 -> 0.28` over six frames |
+| 30 | Pelvis keeps moving forward | `pelvis y = 1.14 -> 1.31` |
+
+Verdict: fail for render readiness. The motion needs foot-lock cleanup or retargeting constraint review; the body mesh does not need proportion changes.
+
+### Backwards Imported Character
+
+Scenario: a character looks correct in a still frame, but the animation moves opposite the expected travel direction.
+
+Apply the workflow:
+- Determine forward, up, and side axes: compare head, chest, feet, and root motion.
+- Sample animation frames: inspect frame 1 and the midpoint of the travel path.
+- Report facts before opinions: include the root heading and model-facing direction separately.
+
+Extracted facts:
+
+| Frame | Fact | Evidence |
+| --- | --- | --- |
+| 1 | Character face points toward world `-Y` | head/chest vector from `neck` to `head` resolves to `-Y` |
+| 72 | Root motion travels toward world `+Y` | `root y = 0.0 -> 2.8` |
+| 72 | Feet remain visually forward-facing opposite travel | toe bones point `-Y` while displacement is `+Y` |
+
+Verdict: likely backwards import or retargeting forward-axis mismatch. Fix the import/retarget axis mapping before editing animation curves.
+
+## Practical Thresholds
+
+- Assume Blender's default meter-scale units unless the scene unit scale says otherwise.
+- Treat ground penetration above 1-2 cm as visible unless the floor is soft or intentionally stylized.
+- Treat a sudden scale change above 5% as a likely rig, constraint, or transform inheritance problem.
+- Treat left/right ankle side-order flips during airborne inverted motion as leg crossover risk even if it recovers later.
+- Treat root heading jumps above 30 degrees per frame as suspicious unless the source motion includes a snap turn.
+
+## Anti-Patterns
+
+- Do not modify body proportions to force pose matching unless the task is explicitly mesh repair.
+- Do not bake away the clean baseline before recording it.
+- Do not use one rendered camera angle as proof that a pose is correct.
+- Do not delete helper objects until you have recorded why they are not part of the character.
+- Do not assume an avatar faces +Y, -Y, +X, or -X without checking head, feet, torso, and root motion together.
+
+## Tooling Notes
+
+If a Blender state exporter is available, prefer JSON that includes meshes, armatures, pose bones, materials, contacts, bounding boxes, and sampled animation frames. If no exporter exists, run a small Blender Python script through Blender itself, for example `blender --background scene.blend --python collect_motion_state.py`, because `bpy` is not available in a normal system Python interpreter.

package/skills/bootstrap-patterns/SKILL.md

@@ -0,0 +1,316 @@
+---
+name: bootstrap-patterns
+description: >-
+  Bootstrap 5 patterns for responsive grid layouts, utility API, SCSS theming,
+  component customization, dark mode, and performance optimization. Activate when
+  building Bootstrap-based UIs, admin dashboards, or rapid-prototyping with Bootstrap.
+---
+
+# Bootstrap 5 Patterns
+
+## Overview
+
+Bootstrap 5 is a mature, utility-rich CSS framework with a 12-column grid, extensive component library, and deep SCSS customization. Unlike utility-first frameworks (Tailwind), Bootstrap provides opinionated, pre-styled components that can be deeply customized via SCSS variables and the utility API.
+
+## When to Use
+
+- Building admin dashboards, internal tools, or enterprise UIs
+- Rapid prototyping with pre-built components
+- Projects requiring broad browser support and accessibility out of the box
+- Teams familiar with Bootstrap's class naming conventions
+- Landing pages, marketing sites, or multi-page applications
+- Projects where you need a component library without React/Vue dependency
+
+## Installation
+
+```bash
+# npm
+npm install bootstrap @popperjs/core
+
+# With SCSS customization (recommended)
+npm install bootstrap sass
+
+# CDN (quick prototyping only)
+# <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+# <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+```
+
+## Key Patterns
+
+### Grid System
+
+```html
+<!-- Responsive 12-column grid -->
+<div class="container">
+  <div class="row g-4">
+    <div class="col-12 col-md-8 col-lg-6">Main content</div>
+    <div class="col-12 col-md-4 col-lg-6">Sidebar</div>
+  </div>
+</div>
+
+<!-- Container variants -->
+<div class="container"><!-- max-width at breakpoints --></div>
+<div class="container-fluid"><!-- full width always --></div>
+<div class="container-lg"><!-- full width until lg breakpoint --></div>
+
+<!-- Auto-layout columns -->
+<div class="row">
+  <div class="col">Equal</div>
+  <div class="col">Equal</div>
+  <div class="col">Equal</div>
+</div>
+
+<!-- Offset and ordering -->
+<div class="row">
+  <div class="col-md-4 offset-md-4">Centered column</div>
+  <div class="col order-md-2">Appears second on md+</div>
+  <div class="col order-md-1">Appears first on md+</div>
+</div>
+```
+
+### SCSS Theming
+
+```scss
+// custom.scss — Import BEFORE bootstrap to override defaults
+// 1. Override variables
+$primary: #6366f1;
+$secondary: #8b5cf6;
+$success: #10b981;
+$danger: #ef4444;
+$warning: #f59e0b;
+$info: #06b6d4;
+
+$body-bg: #0f172a;
+$body-color: #e2e8f0;
+
+$font-family-base: 'Inter', system-ui, sans-serif;
+$font-size-base: 1rem;
+$border-radius: 0.75rem;
+$border-radius-lg: 1rem;
+
+$enable-dark-mode: true;
+$enable-shadows: true;
+$enable-gradients: false;
+$enable-negative-margins: true;
+
+// 2. Import Bootstrap
+@import "bootstrap/scss/bootstrap";
+
+// 3. Custom component overrides AFTER import
+.btn-primary {
+  --bs-btn-bg: #{$primary};
+  --bs-btn-border-color: #{$primary};
+  --bs-btn-hover-bg: #{darken($primary, 8%)};
+  --bs-btn-hover-border-color: #{darken($primary, 10%)};
+}
+```
+
+### CSS Variable Overrides (No SCSS)
+
+```css
+/* Override Bootstrap's CSS variables directly */
+[data-bs-theme="light"] {
+  --bs-primary: #6366f1;
+  --bs-primary-rgb: 99, 102, 241;
+  --bs-body-font-family: 'Inter', system-ui, sans-serif;
+  --bs-border-radius: 0.75rem;
+}
+
+[data-bs-theme="dark"] {
+  --bs-body-bg: #0f172a;
+  --bs-body-color: #e2e8f0;
+  --bs-primary: #818cf8;
+  --bs-primary-rgb: 129, 140, 248;
+}
+```
+
+### Dark Mode
+
+```html
+<!-- Set theme at document level -->
+<html data-bs-theme="dark">
+
+<!-- Per-component theme -->
+<div data-bs-theme="light" class="card">
+  <div class="card-body">This card is always light</div>
+</div>
+```
+
+```javascript
+// Toggle dark mode programmatically
+function toggleTheme() {
+  const html = document.documentElement;
+  const current = html.getAttribute('data-bs-theme');
+  html.setAttribute('data-bs-theme', current === 'dark' ? 'light' : 'dark');
+}
+
+// Respect system preference
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+document.documentElement.setAttribute('data-bs-theme', prefersDark ? 'dark' : 'light');
+```
+
+### Utility API (Custom Utilities)
+
+```scss
+// Generate custom utilities via the utility API
+$utilities: map-merge(
+  $utilities,
+  (
+    "custom-opacity": (
+      property: opacity,
+      class: o,
+      values: (
+        10: .1,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1,
+      ),
+    ),
+    "backdrop-blur": (
+      property: backdrop-filter,
+      class: blur,
+      values: (
+        sm: blur(4px),
+        md: blur(8px),
+        lg: blur(16px),
+        xl: blur(24px),
+      ),
+    ),
+  )
+);
+```
+
+### Component Customization
+
+```html
+<!-- Card with glassmorphism -->
+<div class="card border-0" style="
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+">
+  <div class="card-body">
+    <h5 class="card-title">Premium Card</h5>
+    <p class="card-text text-body-secondary">Glass effect panel</p>
+  </div>
+</div>
+
+<!-- Modal with custom animation -->
+<div class="modal fade" id="premiumModal" tabindex="-1">
+  <div class="modal-dialog modal-dialog-centered modal-lg">
+    <div class="modal-content border-0 shadow-lg">
+      <div class="modal-header border-bottom-0">
+        <h5 class="modal-title">Title</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body">Content</div>
+    </div>
+  </div>
+</div>
+
+<!-- Offcanvas sidebar -->
+<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title">Navigation</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
+  </div>
+  <div class="offcanvas-body">
+    <nav class="nav flex-column">
+      <a class="nav-link active" href="#">Dashboard</a>
+      <a class="nav-link" href="#">Analytics</a>
+      <a class="nav-link" href="#">Settings</a>
+    </nav>
+  </div>
+</div>
+```
+
+### JavaScript API
+
+```javascript
+// Programmatic component initialization
+import { Modal, Toast, Tooltip, Popover, Collapse } from 'bootstrap';
+
+// Initialize all tooltips
+document.querySelectorAll('[data-bs-toggle="tooltip"]')
+  .forEach(el => new Tooltip(el));
+
+// Modal control
+const modal = Modal.getOrCreateInstance('#myModal');
+modal.show();
+modal.hide();
+
+// Toast notifications
+const toast = new Toast(document.getElementById('liveToast'));
+toast.show();
+
+// Listen for Bootstrap events
+document.getElementById('myModal').addEventListener('shown.bs.modal', () => {
+  // Focus first input when modal opens
+  document.querySelector('#myModal input')?.focus();
+});
+```
+
+### Performance Optimization
+
+```scss
+// Import only what you need (tree-shaking via SCSS)
+// Instead of: @import "bootstrap/scss/bootstrap";
+
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+
+// Only the components you use
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+
+// Generate only needed utilities
+@import "bootstrap/scss/utilities/api";
+```
+
+```javascript
+// Import only needed JS components
+import Modal from 'bootstrap/js/dist/modal';
+import Toast from 'bootstrap/js/dist/toast';
+// NOT: import 'bootstrap'; // imports everything
+```
+
+## Guidelines
+
+1. **Always use SCSS** for production — override variables before importing Bootstrap
+2. **Use CSS variables** for runtime theming (dark mode, brand switching)
+3. **Use the utility API** to generate project-specific utilities, not custom CSS
+4. **Use `data-bs-theme`** for dark mode — never toggle classes manually
+5. **Import selectively** — only the SCSS partials and JS modules you need
+6. **Use `g-*` gutter classes** instead of padding/margin hacks on rows/columns
+7. **Use responsive breakpoint suffixes** consistently (`-sm`, `-md`, `-lg`, `-xl`, `-xxl`)
+
+## Anti-Patterns
+
+- ❌ Overriding Bootstrap classes with `!important` — use SCSS variable overrides instead
+- ❌ Using CDN links in production without SRI hashes
+- ❌ Importing the full `bootstrap.bundle.min.js` when you only need Modal
+- ❌ Mixing Bootstrap grid with custom float-based layouts
+- ❌ Using inline styles to override Bootstrap's design tokens
+- ❌ Ignoring `data-bs-theme` and rolling custom dark mode toggles
+- ❌ Nesting `.container` inside `.container` (use `.container-fluid` inside `.container` if needed)
+- ❌ Using Bootstrap's JS API without checking for existing instances (`getOrCreateInstance`)
+
+## Related Skills
+
+- `tailwindcss-v4` — utility-first CSS alternative
+- `frontend-design` — design anchor selection
+- `ui-ux-pro-max` — color palettes, typography, and UX guidelines
+- `accessibility` — ARIA and keyboard navigation beyond Bootstrap defaults