@turquoisehealth/pit-viper 2.181.2 → 2.182.0

package/claude-plugin/skills/pit-viper/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: pit-viper
-description: Use for all frontend work in a Turquoise Health codebase — UI building, Vue/HTML editing, component usage, and visual interface work.
+description: Grounds frontend work in Turquoise Health's Pit Viper design system. Looks up real components, CSS utilities, and design tokens via the Pit Viper LLM API, then generates Vue 3 SFCs or HTML with web components using only pv-* utility classes and existing Pit Viper components — never invents components or writes custom CSS. Use when editing .vue files, building UI, writing HTML prototypes, or doing any frontend/UI work in a Turquoise Health codebase.
 allowed-tools: Read Glob Grep Write Edit WebFetch
 ---
 
@@ -12,15 +12,17 @@ Use Pit Viper for all frontend work. This skill grounds you in what actually exi
 
 ### Step 0: Detect Output Mode
 
-Read context signals to determine the appropriate output:
+Determine Vue or HTML based on explicit signals:
 
 | Mode | Signals | Output |
 |------|---------|--------|
-| **Engineer** | Editing .vue files, mentions "props", "emit", "component", Vue project context | Idiomatic Vue 3 Composition API code |
-| **Prototype** | "Quick prototype", "HTML", "no framework", non-technical user, unclear technical level | Plain HTML with pv-* classes and web components |
+| **Vue** | Editing .vue files, Vue project context, mentions "props", "emit", "component", bundler present | Vue 3 Composition API SFC |
+| **HTML** | "HTML", "CDN", "unpkg", "no bundler", "standalone", plain .html file, no framework, **smol MCP** | Plain HTML with pv-* classes + web components |
 | **Design Review** | "What component for...", "does this work with...", design discussion | Component selection rationale only — no code |
 
-If unclear, ask. If still unclear, default to **Prototype Mode** (most portable).
+**smol MCP always uses HTML Mode** — these are lightweight tools without bundlers.
+
+If unclear, ask explicitly: "Vue or HTML?"
 
 ### Step 1: Search for Components
 
@@ -87,9 +89,9 @@ Add `?web_component=true` to component endpoints for web component variants.
 
 Based on detected mode, read the appropriate reference and generate:
 
-- **Engineer Mode**: Read `references/vue-guidelines.md`, produce Vue 3 SFC
-- **Prototype Mode**: Read `references/html-patterns.md`, produce HTML with pv-* classes
-- **Design Review Mode**: Read `references/design-language.md`, explain component selection
+- **Vue Mode**: Read `references/vue-guidelines.md`, produce Vue 3 SFC
+- **HTML Mode**: Read `references/html-patterns.md`, produce HTML with pv-* classes. Starter template: `assets/pv-html-starter.html`. Full example: `examples/pv-html-example.html`
+- **Design Review**: Read `references/design-language.md`, explain component selection
 
 For page-level layouts, also read `references/layout-patterns.md`.
 For theme decisions, also read `references/theme-guide.md`.
@@ -118,19 +120,22 @@ If `/llm/search` returns no match for a legitimate UI need:
 
 ## References
 
-Load these only when the specific condition applies:
+### Vue Mode — load these:
+1. `references/design-rules.md` — spacing, typography, colors
+2. `references/patterns-core.md` — utility class patterns
+3. `references/vue-guidelines.md` — Vue setup and patterns
+
+### HTML Mode — load these:
+1. `references/html-patterns.md` — CDN setup, web components, vanilla JS patterns
+2. Starter template: `assets/pv-html-starter.html`
+3. Full example: `examples/pv-html-example.html` — complete layout with nav, filters, table, sidebar
 
-| File | Load when... |
-|------|--------------|
-| `references/design-rules.md` | **ALWAYS** — mandatory rules for spacing, typography, colors, layout |
-| `references/patterns-core.md` | **ALWAYS** — universal utility class patterns and anti-patterns |
-| `references/vue-guidelines.md` | Engineer Mode — Vue setup, patterns, and anti-patterns |
-| `references/html-patterns.md` | Prototype Mode — HTML/web component patterns and anti-patterns |
-| `references/design-language.md` | Design Review Mode — validating tokens or explaining layout rationale |
-| `references/layout-patterns.md` | Building a full page or multi-component layout (not single components) |
-| `references/theme-guide.md` | Choosing between Platform/Consumer CSS, or token values are ambiguous |
+### Design Review — load these:
+1. `references/design-language.md` — token validation, rationale
 
-**Important:** `design-rules.md` and `patterns-core.md` must be loaded for ANY code generation (Engineer or Prototype mode). Mode-specific files (`vue-guidelines.md` or `html-patterns.md`) contain both patterns and anti-patterns for that output format.
+### Optional (any mode):
+- `references/layout-patterns.md` — full page or multi-component layouts
+- `references/theme-guide.md` — Platform vs Consumer theme selection
 
 ## Quick Component Map
 
@@ -156,7 +161,7 @@ Common UI needs and their Pit Viper equivalents:
 
 **Tables & Charts (Vue only):** Always use PvDataTable for tabular data. Use PvChart for standalone charts. Use PvDataTableWithChart when you need both together. Never use D3, Chart.js, ApexCharts, or custom `<table>` markup.
 
-**Tables (HTML/Prototype):** Use `.pv-table` CSS classes for static tables. Charting is NOT available in HTML mode — charts require Vue components.
+**Tables (HTML Mode):** Use `.pv-table` CSS classes for static tables. Charting is NOT available in HTML mode — charts require Vue.
 
 Always verify with `/llm/component/{name}` before using — props and APIs may have changed.
 

package/claude-plugin/skills/pit-viper/assets/pv-html-starter.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pit Viper HTML Starter</title>
+
+  <!-- v2 Platform theme (internal tools, dashboards) -->
+  <link rel="stylesheet" href="https://unpkg.com/@turquoisehealth/pit-viper@latest/_site/assets/css/pit-viper-v2.css">
+
+  <!-- v2 Marketing/Consumer theme (marketing sites, public-facing pages)
+  <link rel="stylesheet" href="https://unpkg.com/@turquoisehealth/pit-viper@latest/_site/assets/css/pit-viper-consumer.css">
+  -->
+
+  <!-- SVG sprite path for icons -->
+  <script>
+    window.__PV_GLOBAL_SPRITE_PATH__ = 'https://unpkg.com/@turquoisehealth/pit-viper@latest/_site/assets/sprite-v2.svg';
+  </script>
+
+  <!-- Web components for interactive elements -->
+  <script src="https://unpkg.com/@turquoisehealth/pit-viper@latest/pv-components/dist/web/pv-components.iife.js"></script>
+</head>
+<body>
+  <div class="pv-layout-primary">
+    <aside data-grid-area="sidebar">
+      <!-- Org selector -->
+      <nav class="pv-popover-menu">
+        <button class="pv-org-switch" style="width: 100%;">
+          <div class="pv-company-xl"><img src="" alt=""></div>
+          <div>
+            <p class="pv-text-title-sm">Organization Name</p>
+            <p class="pv-text-title-xs pv-text-subdued">Location</p>
+          </div>
+          <svg class="pv-icon-16" aria-hidden="true" tabindex="-1">
+            <use xlink:href="#"></use>
+          </svg>
+        </button>
+        <div class="pv-popover" style="margin-left: 20px; margin-top: -20px; --width: 300px; max-height: 400px;">
+          <ul role="list" class="pv-popover-list">
+            <!-- Org list items -->
+          </ul>
+        </div>
+      </nav>
+
+      <!-- Navigation -->
+      <div class="pv-nav-container">
+        <ul role="list" class="pv-nav-list">
+          <!-- Nav items -->
+        </ul>
+      </div>
+    </aside>
+
+    <div data-grid-area="content" class="pv-inset-square">
+      <!-- Page content -->
+    </div>
+  </div>
+
+  <script>
+    // Org selector toggle
+    document.querySelectorAll('.pv-popover-menu').forEach(menu => {
+      const trigger = menu.querySelector('.pv-org-switch')
+      const popover = menu.querySelector('.pv-popover')
+      if (!trigger || !popover) return
+
+      trigger.addEventListener('click', () => {
+        popover.toggleAttribute('data-visible')
+      })
+
+      document.addEventListener('click', (e) => {
+        if (!menu.contains(e.target)) {
+          popover.removeAttribute('data-visible')
+        }
+      })
+    })
+  </script>
+</body>
+</html>

package/claude-plugin/skills/pit-viper/examples/pv-html-example.html

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pit Viper HTML Example</title>
+
+  <!-- v2 Platform theme (internal tools, dashboards) -->
+  <link rel="stylesheet" href="https://unpkg.com/@turquoisehealth/pit-viper@latest/_site/assets/css/pit-viper-v2.css">
+
+  <!-- v2 Marketing/Consumer theme (marketing sites, public-facing pages)
+  <link rel="stylesheet" href="https://unpkg.com/@turquoisehealth/pit-viper@latest/_site/assets/css/pit-viper-consumer.css">
+  -->
+
+  <!-- SVG sprite path for icons -->
+  <script>
+    window.__PV_GLOBAL_SPRITE_PATH__ = 'https://unpkg.com/@turquoisehealth/pit-viper@latest/_site/assets/sprite-v2.svg';
+  </script>
+
+  <!-- Web components for interactive elements -->
+  <script src="https://unpkg.com/@turquoisehealth/pit-viper@latest/pv-components/dist/web/pv-components.iife.js"></script>
+</head>
+<body>
+  <div class="pv-layout-primary">
+    <aside data-grid-area="sidebar">
+      <nav class="pv-popover-menu">
+        <button class="pv-org-switch" style="width: 100%;">
+          <div class="pv-company-xl"><img src="" alt=""></div>
+          <div>
+            <p class="pv-text-title-sm">Organization Name</p>
+            <p class="pv-text-title-xs pv-text-subdued">Location</p>
+          </div>
+          <svg class="pv-icon-16" aria-hidden="true" tabindex="-1">
+            <use xlink:href="#"></use>
+          </svg>
+        </button>
+        <div class="pv-popover" style="margin-left: 20px; margin-top: -20px; --width: 300px; max-height: 400px;">
+          <ul role="list" class="pv-popover-list">
+            <li>
+              <a class="pv-flex" href="#">
+                <div class="pv-avatar-xs"><span>O</span></div>
+                <span class="pv-truncate pv-flex-item">Other Organization</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="pv-nav-container">
+        <ul role="list" class="pv-nav-list">
+          <li>
+            <a href="#" title="Dashboard">
+              <svg class="pv-icon" aria-hidden="true" tabindex="-1">
+                <use xlink:href="#"></use>
+              </svg>
+              <span>Dashboard</span>
+            </a>
+          </li>
+          <li>
+            <details>
+              <summary title="Search">
+                <svg class="pv-icon" aria-hidden="true" tabindex="-1">
+                  <use xlink:href="#"></use>
+                </svg>
+                <span>Search</span>
+              </summary>
+              <ul role="list" class="pv-nav-list">
+                <li>
+                  <a href="#"><span>Rates</span></a>
+                </li>
+                <li>
+                  <a href="#"><span>Provisions</span></a>
+                </li>
+              </ul>
+            </details>
+          </li>
+          <li>
+            <a href="#" title="Analyze">
+              <svg class="pv-icon" aria-hidden="true" tabindex="-1">
+                <use xlink:href="#"></use>
+              </svg>
+              <span>Analyze</span>
+            </a>
+          </li>
+          <li>
+            <details open>
+              <summary title="Clear Contracts">
+                <svg class="pv-icon" aria-hidden="true" tabindex="-1">
+                  <use xlink:href="#"></use>
+                </svg>
+                <span>Clear Contracts</span>
+              </summary>
+              <ul role="list" class="pv-nav-list nested-nav">
+                <li>
+                  <a href="#" aria-current="page"><span>Manage</span></a>
+                </li>
+                <li>
+                  <a href="#"><span>Matrix</span></a>
+                </li>
+                <li>
+                  <a href="#"><span>Model</span></a>
+                </li>
+              </ul>
+            </details>
+          </li>
+          <li>
+            <a href="#" title="Settings">
+              <svg class="pv-icon" aria-hidden="true" tabindex="-1">
+                <use xlink:href="#"></use>
+              </svg>
+              <span>Settings</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </aside>
+    <div data-grid-area="content">
+      <!-- Page header with filters -->
+      <div class="pv-inset-squish pv-flex-responsive pv-border-bottom">
+        <div class="pv-flex pv-flex-item pv-flow-8">
+          <div class="pv-dropdown"><button class="pv-select-multiple pv-input-small">Providers</button></div>
+          <div class="pv-dropdown"><button class="pv-select-multiple pv-input-small">Payers</button></div>
+          <div class="pv-dropdown"><button class="pv-select-multiple pv-input-small">Plans</button></div>
+          <button class="pv-button-primary-outline pv-button-small">Apply Filters</button>
+          <button class="pv-button-ghost pv-button-small">Clear</button>
+        </div>
+        <div class="pv-flex pv-flow-8">
+          <select class="pv-select pv-input-small">
+            <option selected>Default View</option>
+            <option>Custom View 1</option>
+          </select>
+        </div>
+      </div>
+
+      <!-- Content with sidebar -->
+      <div class="pv-layout-sidebar">
+        <div data-grid-area="main" class="pv-inset-square-24">
+          <h1 class="pv-heading-2 pv-stack-16">Contracts</h1>
+
+          <table class="pv-table">
+            <thead>
+              <tr>
+                <th>Contract Name</th>
+                <th>Provider</th>
+                <th>Effective Date</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><a href="#">UHC - California Hospital</a></td>
+                <td>California Hospital Medical Center</td>
+                <td>April 1, 2024</td>
+                <td><span class="pv-pill pv-pill-success">Active</span></td>
+              </tr>
+              <tr>
+                <td><a href="#">UHC - St. Francis</a></td>
+                <td>St. Francis Medical Center</td>
+                <td>Sept. 1, 2023</td>
+                <td><span class="pv-pill pv-pill-success">Active</span></td>
+              </tr>
+              <tr>
+                <td><a href="#">Aetna - Regional</a></td>
+                <td>Regional Health System</td>
+                <td>Jan. 1, 2024</td>
+                <td><span class="pv-pill pv-pill-warning">Pending</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div data-grid-area="sidebar">
+          <div class="pv-border-bottom pv-inset-square-16">
+            <div class="pv-flex pv-flow-8">
+              <button class="pv-button-ghost pv-button-small" aria-pressed="true">Summary</button>
+              <button class="pv-button-ghost pv-button-small">Details</button>
+              <button class="pv-button-ghost pv-button-small">History</button>
+            </div>
+          </div>
+          <div class="pv-layout-two-row">
+            <div class="pv-flex-item pv-border-bottom pv-inset-square-16">
+              <p class="pv-heading-5 pv-stack-8">Summary</p>
+              <dl class="pv-flow-4">
+                <div class="pv-flex pv-space-between">
+                  <dt class="pv-text-subdued">Total Contracts</dt>
+                  <dd class="pv-text-title-sm">24</dd>
+                </div>
+                <div class="pv-flex pv-space-between">
+                  <dt class="pv-text-subdued">Active</dt>
+                  <dd class="pv-text-title-sm">18</dd>
+                </div>
+                <div class="pv-flex pv-space-between">
+                  <dt class="pv-text-subdued">Pending Review</dt>
+                  <dd class="pv-text-title-sm">6</dd>
+                </div>
+              </dl>
+            </div>
+            <div class="pv-inset-square-16">
+              <p class="pv-heading-5 pv-stack-8">Actions</p>
+              <div class="pv-flex pv-flex-vertical pv-flow-8">
+                <button class="pv-button-primary">Add Contract</button>
+                <button class="pv-button-secondary">Export</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // Org selector toggle
+    document.querySelectorAll('.pv-popover-menu').forEach(menu => {
+      const trigger = menu.querySelector('.pv-org-switch')
+      const popover = menu.querySelector('.pv-popover')
+      if (!trigger || !popover) return
+
+      trigger.addEventListener('click', () => {
+        popover.toggleAttribute('data-visible')
+      })
+
+      document.addEventListener('click', (e) => {
+        if (!menu.contains(e.target)) {
+          popover.removeAttribute('data-visible')
+        }
+      })
+    })
+  </script>
+</body>
+</html>

package/claude-plugin/skills/pit-viper/references/design-rules.md

@@ -2,6 +2,17 @@
 
 Prescriptive rules for consistent visual output. These are mandatory — follow them exactly.
 
+## Contents
+
+- Spacing (vertical `pv-stack-*`, padding `pv-inset-*`, flow `pv-flow-*`)
+- Typography (heading hierarchy, body text, labels, text modifiers)
+- Colors (backgrounds `pv-surface-*`, status colors)
+- Layout (page structure, containers, flex)
+- Cards, Forms, Tables
+- Borders & Radius
+- Allowed Inline Styles
+- Checklist (run before finalizing)
+
 ## Spacing
 
 Use pv-* spacing classes. Never use raw `padding`, `margin`, `gap`, or pixel values.
@@ -74,7 +85,7 @@ Use pv-* typography classes. Never use raw `font-size`, `font-weight`, or `line-
 | De-emphasize | `pv-text-subdued` |
 | On dark backgrounds | `pv-text-inverse` |
 | Brand color | `pv-text-brand` |
-| Error message | `pv-text-error` |
+| Error message | `pv-text-critical` |
 | Success message | `pv-text-success` |
 | Warning message | `pv-text-warning` |
 
@@ -90,7 +101,7 @@ Use semantic classes. Never hardcode hex values.
 | Elevated card | `pv-surface-raised` |
 | Subtle highlight | `pv-surface-accent` |
 | Brand header | `pv-surface-brand` |
-| Error state | `pv-surface-error` |
+| Error state | `pv-surface-critical` |
 | Success state | `pv-surface-success` |
 | Warning state | `pv-surface-warning` |
 | Code/mono areas | `pv-surface-gray` or background token |
@@ -100,7 +111,7 @@ Use semantic classes. Never hardcode hex values.
 | State | Text Class | Background Class |
 |-------|------------|------------------|
 | Success | `pv-text-success` | `pv-surface-success` |
-| Error | `pv-text-error` | `pv-surface-error` |
+| Error | `pv-text-critical` | `pv-surface-critical` |
 | Warning | `pv-text-warning` | `pv-surface-warning` |
 | Info | `pv-text-brand` | `pv-surface-accent` |
 

package/claude-plugin/skills/pit-viper/references/html-patterns.md

@@ -1,6 +1,19 @@
 # HTML / Web Component Patterns
 
-Use this reference when generating HTML with Pit Viper CSS classes and web components (Prototype Mode).
+Use this reference when generating HTML with Pit Viper CSS classes and web components (HTML Mode). For smol MCP tools, always use this mode.
+
+## Contents
+
+- Adding Pit Viper (CSS theme + web component bundle)
+- Naming Conventions (kebab-case tags and attributes)
+- Web Component Best Practices (closing tags, slot wrappers, complex props via JS)
+- Component Examples (button, input, card)
+- Event Handling
+- CSS Classes (pv-* utilities)
+- Tables (pv-table variants)
+- Limitations (vs Vue)
+- Complete Example
+- Anti-Patterns / Good Patterns
 
 ## Adding Pit Viper to Your Project
 
@@ -15,17 +28,11 @@ Choose one CSS theme based on your use case:
 
 ### Step 2: Include Web Components
 
-**Option A: Combined bundle (recommended for 2+ components)**
 ```html
-<script src="https://unpkg.com/@turquoisehealth/pit-viper/pv-components/dist/web/pv-components.iife.js"></script>
+<script src="https://unpkg.com/@turquoisehealth/pit-viper@latest/pv-components/dist/web/pv-components.iife.js"></script>
 ```
-Includes all base components. The Vue runtime (~16kb) is bundled automatically.
 
-**Option B: Standalone components (for minimal usage)**
-```html
-<script src="https://unpkg.com/@turquoisehealth/pit-viper/pv-components/dist/web/pv-button/pv-button.js"></script>
-```
-Import only specific components. Note: each standalone component bundles the Vue runtime, so use the combined bundle if using more than a few components.
+This includes all base components with the Vue runtime bundled.
 
 ### Complete Setup Example
 
@@ -37,13 +44,20 @@ Import only specific components. Note: each standalone component bundles the Vue
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Page Title</title>
   
-  <!-- Pit Viper CSS (choose one) -->
-  <link rel="stylesheet" href="https://pitviper.turquoise.health/assets/css/pit-viper-v2.css">
-  <!-- OR for consumer/marketing sites: -->
-  <!-- <link rel="stylesheet" href="https://pitviper.turquoise.health/assets/css/pit-viper-consumer.css"> -->
+  <!-- v2 Platform theme (internal tools, dashboards) -->
+  <link rel="stylesheet" href="https://unpkg.com/@turquoisehealth/pit-viper@latest/_site/assets/css/pit-viper-v2.css">
+  
+  <!-- v2 Marketing/Consumer theme (marketing sites, public-facing pages)
+  <link rel="stylesheet" href="https://unpkg.com/@turquoisehealth/pit-viper@latest/_site/assets/css/pit-viper-consumer.css">
+  -->
   
-  <!-- Pit Viper Web Components (combined bundle) -->
-  <script src="https://unpkg.com/@turquoisehealth/pit-viper/pv-components/dist/web/pv-components.iife.js"></script>
+  <!-- SVG sprite path for icons -->
+  <script>
+    window.__PV_GLOBAL_SPRITE_PATH__ = 'https://unpkg.com/@turquoisehealth/pit-viper@latest/_site/assets/sprite-v2.svg';
+  </script>
+  
+  <!-- Web components for interactive elements -->
+  <script src="https://unpkg.com/@turquoisehealth/pit-viper@latest/pv-components/dist/web/pv-components.iife.js"></script>
 </head>
 <body>
   <!-- Your content here -->
@@ -310,7 +324,7 @@ Use `data-sort` attribute for sort indicators:
 
 If the user requests a chart in HTML mode:
 1. Explain that charts require Vue components
-2. Offer to switch to Vue (Engineer Mode) if appropriate
+2. Offer to switch to Vue Mode if appropriate
 3. Or use a placeholder with a note: "Chart visualization requires Vue implementation"
 
 ## Limitations
@@ -335,8 +349,11 @@ Web components have some differences from Vue components:
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Login</title>
-  <link rel="stylesheet" href="https://pitviper.turquoise.health/assets/css/pit-viper-v2.css">
-  <script src="https://unpkg.com/@turquoisehealth/pit-viper/pv-components/dist/web/pv-components.iife.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/@turquoisehealth/pit-viper@latest/_site/assets/css/pit-viper-v2.css">
+  <script>
+    window.__PV_GLOBAL_SPRITE_PATH__ = 'https://unpkg.com/@turquoisehealth/pit-viper@latest/_site/assets/sprite-v2.svg';
+  </script>
+  <script src="https://unpkg.com/@turquoisehealth/pit-viper@latest/pv-components/dist/web/pv-components.iife.js"></script>
 </head>
 <body class="pv-surface-accent">
   <div class="pv-flex" style="min-height: 100vh; align-items: center; justify-content: center;">

package/claude-plugin/skills/pit-viper/references/layout-patterns.md

@@ -2,6 +2,14 @@
 
 Use this reference when building page-level layouts in any output mode.
 
+## Contents
+
+- Dashboard Pattern (sidebar + main + optional panel) — Vue
+- Form Pattern (card with inputs and actions) — Vue
+- Settings Pattern (tabs + accordion) — Vue
+- Marketing Pattern (hero + features + CTA) — HTML
+- List-Detail Pattern (table + drawer) — Vue
+
 ## Dashboard Pattern
 
 Three-column layout with navigation sidebar, main content, and optional right panel.

package/claude-plugin/skills/pit-viper/references/patterns-core.md

@@ -69,7 +69,7 @@ Never use hex values. Use semantic color classes.
 
 <!-- GOOD: Semantic classes -->
 <span class="pv-text-success">Success!</span>
-<span class="pv-text-error">Error!</span>
+<span class="pv-text-critical">Error!</span>
 <div class="pv-surface-accent">Content</div>
 ```
 

package/claude-plugin/skills/pit-viper/references/theme-guide.md

@@ -2,6 +2,17 @@
 
 Use this reference when choosing between Platform and Consumer themes or applying design tokens.
 
+## Contents
+
+- Theme Comparison (Platform vs Consumer)
+- Theme URLs (CDN hrefs)
+- Auto-Detection Keywords
+- Typography Scale
+- Spacing System (4px grid)
+- Color Palette
+- Border Radius
+- Layout Classes
+
 ## Theme Comparison
 
 | Aspect | Platform | Consumer |

package/claude-plugin/skills/pit-viper/references/vue-guidelines.md

@@ -1,6 +1,19 @@
 # Vue Guidelines for Pit Viper
 
-Use this reference when generating Vue SFC code (Engineer Mode).
+Use this reference when generating Vue SFC code (Vue Mode).
+
+## Contents
+
+- Adding Pit Viper (install, CSS, imports)
+- File Structure (script/template/style order)
+- Import Paths (base, visualizations, layout)
+- Props, Emits, Generics Patterns
+- v-model Patterns (input, select, modal, tabs)
+- Naming Conventions
+- Common Mistakes
+- Styling (pv-* classes only)
+- Tables & Charts (PvDataTable, PvChart)
+- Anti-Patterns / Good Patterns
 
 ## Adding Pit Viper to a Vue Project
 
@@ -327,7 +340,7 @@ Never add `<style>` blocks with custom styling. This defeats the design system.
 
 <!-- GOOD: Pit Viper classes only -->
 <template>
-  <div class="pv-flex pv-text-error" style="--flex-gap: 0.5rem;">
+  <div class="pv-flex pv-text-critical" style="--flex-gap: 0.5rem;">
     <PvIcon name="info-circle" />
     <span class="pv-text-body-md">{{ message }}</span>
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turquoisehealth/pit-viper",
-  "version": "2.181.2",
+  "version": "2.182.0",
   "description": "Turquoise Health's design system.",
   "main": "README.md",
   "publishConfig": {