@turquoisehealth/pit-viper 2.197.3-dev.2 → 2.199.0

package/claude-plugin/.claude-plugin/plugin.json

@@ -1,11 +0,0 @@
-{
-  "name": "pit-viper",
-  "version": "0.0.2",
-  "description": "Pit Viper design system tooling for Claude Code",
-  "marketplace": {
-    "type": "github",
-    "owner": "turquoisehealth",
-    "repo": "pit-viper",
-    "path": "claude-plugin"
-  }
-}

package/claude-plugin/.mcp.json

@@ -1,8 +0,0 @@
-{
-  "mcpServers": {
-    "figma": {
-      "type": "http",
-      "url": "https://mcp.figma.com/mcp"
-    }
-  }
-}

package/claude-plugin/CLAUDE.md

@@ -1,107 +0,0 @@
-# Pit Viper Design System
-
-Pit Viper is Turquoise Health's design system. Use it for all frontend work.
-
-## Philosophy
-
-Pit Viper enforces visual consistency across 50+ Turquoise Health apps by:
-
-- **Eliminating custom CSS** — Use only pv-* utility classes
-- **Replacing raw HTML elements** — Use semantic Pit Viper components
-- **Maintaining brand coherence** — Consistent colors, typography, spacing
-
-## Rules
-
-These are non-negotiable:
-
-1. **No custom CSS** — Only pv-* utility classes. No `<style>` blocks.
-2. **No Tailwind** — Pit Viper has its own utility system.
-3. **No raw form elements** — Use PvInput, PvButton, PvSelectButton, etc.
-4. **No guessing** — Verify icons and component names exist before using.
-
-## LLM Endpoints
-
-Use these to look up current component info (via WebFetch):
-
-| Endpoint | Purpose |
-|----------|---------|
-| `GET /llm/search?q={query}` | Search Vue + CSS components |
-| `GET /llm/component/{name}` | Get component props, stories, source |
-| `GET /llm/component` | List all Vue components |
-| `GET /llm/css/{component}` | Get CSS component docs |
-| `GET /llm/css` | List all CSS components |
-| `GET /llm/tokens?category={cat}` | Get design tokens (color, spacing, etc.) |
-
-Base URL: `https://pitviper.turquoise.health`
-
-Always search before assuming a component or class exists.
-
-## Quick Reference
-
-### Themes
-
-| Theme | CSS File | Use Case |
-|-------|----------|----------|
-| Platform | `pit-viper-v2.css` | Internal tools, dashboards |
-| Consumer | `pit-viper-consumer.css` | Marketing, public sites |
-
-### Common Classes
-
-**Typography:**
-- `.pv-heading-1` through `.pv-heading-5`
-- `.pv-text-body-md`, `.pv-text-body-sm`
-- `.pv-text-title-md`, `.pv-text-subdued`
-
-**Spacing (4px grid):**
-- `.pv-stack-8`, `.pv-stack-16`, `.pv-stack-24` (margin-bottom)
-- `.pv-inset-square-16`, `.pv-inset-squish-12` (padding)
-- `.pv-flow-16` (gap between children)
-
-**Layout:**
-- `.pv-flex`, `.pv-flex-vertical`
-- `.pv-space-between`
-- `.pv-container-md`, `.pv-container-lg`
-
-**Colors:**
-- `.pv-text-default`, `.pv-text-brand`, `.pv-text-subdued`
-- `.pv-surface`, `.pv-surface-accent`, `.pv-surface-brand`
-
-### Common Components
-
-| Need | Component |
-|------|-----------|
-| Button | `PvButton` |
-| Text input | `PvInput` |
-| Dropdown | `PvSelectButton` |
-| Multi-select | `PvMultiSelectButton` |
-| Data table | `PvDataTable` |
-| Chart | `PvChart` |
-| Modal | `PvModal` |
-| Drawer | `PvDrawer` |
-| Tabs | `PvTabs` |
-| Card | `PvCard` |
-
-### Import Paths
-
-```typescript
-// Base components
-import { PvButton, PvInput } from '@turquoisehealth/pit-viper/components'
-
-// Visualization components
-import { PvDataTable, PvChart } from '@turquoisehealth/pit-viper/components/visualizations'
-
-// Layout (direct import)
-import PvSidePanel from '@turquoisehealth/pit-viper/components/layout/PvSidePanel/PvSidePanel.vue'
-```
-
-## Resources
-
-- **Storybook:** https://pit-viper-storybook.netlify.app
-- **Icons:** https://pitviper.turquoise.health/visual-style/icons/
-- **LLM API:** https://pitviper.turquoise.health/llm
-
-## Skills
-
-- `/pit-viper` — Main skill for all FE work (implicit triggering)
-
-To audit files for compliance, ask the skill: "audit this file" or "check for pit viper violations".

package/claude-plugin/README.md

@@ -1,173 +0,0 @@
-# Pit Viper Claude Plugin
-
-Claude Code plugin for Pit Viper design system.
-
-## Installation
-
-### Option 1: Install from GitHub (recommended)
-
-**Step 1: Add the marketplace**
-
-Claude Code CLI:
-```bash
-/plugin
-```
-Then select **Marketplace** → **Add marketplace** → enter `turquoisehealth/pit-viper`
-
-Claude Code Desktop:
-Customize → Create plugin → Add marketplace → enter `turquoisehealth/pit-viper`
-
-**Step 2: Install the plugin**
-```bash
-/plugin install turquoisehealth@pit-viper
-```
-
-### Option 2: Clone and install locally
-
-```bash
-git clone https://github.com/turquoisehealth/pit-viper.git
-cd pit-viper
-/plugin add ./claude-plugin
-```
-
-## Prerequisites
-
-Your project should have `@turquoisehealth/pit-viper` installed:
-
-```bash
-npm install @turquoisehealth/pit-viper
-```
-
-For Figma integration, authenticate via `/mcp` in Claude Code.
-
-## Skills
-
-### `/pit-viper` (Implicit)
-
-The main skill triggers automatically on all frontend work — UI building, Vue/HTML editing, component usage, and visual interface work.
-
-**Output Modes:**
-- **Engineer Mode**: Vue 3 Composition API code (when editing .vue files)
-- **Prototype Mode**: HTML with pv-* classes (for quick prototypes, non-technical users)
-- **Design Review Mode**: Component selection rationale (for design discussions)
-
-**Workflow:**
-1. Searches for components via `/llm/search`
-2. Gets detailed props/usage via `/llm/component/{name}`
-3. Fetches CSS utilities and tokens via `/llm/css` and `/llm/tokens`
-4. Generates appropriate output based on context
-
-### Auditing Files
-
-To check files for design system compliance, ask the skill:
-- "audit this file for pit viper violations"
-- "check src/components/Foo.vue for compliance"
-- "fix any pit viper violations in changed files"
-
-The skill will check for custom CSS, raw HTML elements, invalid classes, and wrong imports — then auto-fix them.
-
-## LLM Endpoints
-
-The skill uses Pit Viper's `/llm` HTTP endpoints (via WebFetch) for dynamic component lookup:
-
-| Endpoint | Purpose |
-|----------|---------|
-| `GET /llm` | API index |
-| `GET /llm/search?q={query}` | Search across CSS and Vue components |
-| `GET /llm/component` | List all Vue components |
-| `GET /llm/component/{name}` | Get component details (props, stories, source) |
-| `GET /llm/component/{name}?web_component=true` | Get web component variant |
-| `GET /llm/css` | List all CSS components |
-| `GET /llm/css/{component}` | Get CSS component documentation |
-| `GET /llm/css/themes` | Get theme CDN URLs |
-| `GET /llm/tokens` | List all design tokens |
-| `GET /llm/tokens?category={cat}` | Filter tokens (color, spacing, typography, border, shadow) |
-
-Base URL: `https://pitviper.turquoise.health`
-
-## MCP Servers
-
-The plugin includes an MCP configuration for Figma integration:
-
-```json
-{
-  "mcpServers": {
-    "figma": {
-      "type": "http",
-      "url": "https://mcp.figma.com/mcp"
-    }
-  }
-}
-```
-
-To authenticate, run `/mcp` in Claude Code and follow the Figma OAuth flow.
-
-## Running Evals
-
-The plugin includes an eval suite to verify skill behavior. Evals are stored in `pit-viper-workspace/evals/`.
-
-### Using skill-creator
-
-```bash
-/skill-creator
-```
-
-Then follow the prompts to run evals against the pit-viper skill. The skill-creator will:
-1. Spawn test cases with and without the skill
-2. Grade assertions automatically
-3. Generate a benchmark report
-4. Open a viewer for qualitative review
-
-### Eval structure
-
-```
-pit-viper-workspace/
-├── evals/
-│   ├── evals.json         # Test cases with prompts and assertions
-│   └── fixtures/          # Vue files used as test inputs
-└── iteration-N/           # Results from each eval run
-    ├── eval-name/
-    │   ├── with_skill/
-    │   └── without_skill/
-    └── benchmark.json
-```
-
-### Eval categories
-
-| Category | Tests |
-|----------|-------|
-| Engineer (E1-E3) | Vue component generation, loading states, unknown components |
-| Prototype (P1-P3) | HTML generation, settings pages, iterative context |
-| Design (D1-D3) | Component selection, token validation, layout review |
-| Cross (X1-X4) | Tailwind avoidance, theme detection, mode ambiguity, icons |
-| Tables (T1-T4) | PvDataTable usage, PvChart usage, HTML tables, chart rejection |
-
-## Resources
-
-- **Storybook:** https://pit-viper-storybook.netlify.app
-- **Icons:** https://pitviper.turquoise.health/visual-style/icons/
-- **Design Tokens:** See `CLAUDE.md` for quick reference
-- **LLM API:** https://pitviper.turquoise.health/llm
-
-## Plugin Structure
-
-```
-claude-plugin/
-├── .claude-plugin/
-│   └── plugin.json              # Plugin metadata
-├── .mcp.json                    # MCP server configuration (Figma)
-├── CLAUDE.md                    # Philosophy, rules, quick reference
-├── README.md                    # This file
-├── skills/
-│   └── pit-viper/
-│       ├── SKILL.md             # Main skill (implicit triggering)
-│       └── references/
-│           ├── design-rules.md      # Mandatory spacing, typography, layout rules
-│           ├── patterns-core.md     # Universal utility class patterns (always loaded)
-│           ├── vue-guidelines.md    # Engineer Mode — Vue patterns + anti-patterns
-│           ├── html-patterns.md     # Prototype Mode — HTML patterns + anti-patterns
-│           ├── design-language.md   # Design Review Mode reference
-│           ├── layout-patterns.md   # Page layout patterns
-│           └── theme-guide.md       # Theme selection guide
-└── examples/                    # Example usage files
-```

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

@@ -1,182 +0,0 @@
----
-name: pit-viper
-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
----
-
-# Pit Viper Design System
-
-Fetch the endpoint index and orientation before starting:
-
-```
-WebFetch https://pitviper.turquoise.health/llms.txt
-```
-
-## Workflow
-
-### Step 0: Detect Output Mode
-
-Determine Vue or HTML based on explicit signals:
-
-| Mode | Signals | Output |
-|------|---------|--------|
-| **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 |
-
-**smol MCP always uses HTML Mode** — these are lightweight tools without bundlers.
-
-If unclear, ask explicitly: "Vue or HTML?"
-
-### Step 1: Search for Components
-
-Search across Vue components and CSS utilities:
-
-```
-WebFetch https://pitviper.turquoise.health/llm/search?q=dropdown
-WebFetch https://pitviper.turquoise.health/llm/search?q=data%20table
-```
-
-Returns matching components with names, descriptions, and categories.
-
-### Step 2: Get Component Details
-
-Get props, argTypes, stories, and source code for a specific component:
-
-```
-WebFetch https://pitviper.turquoise.health/llm/component/PvSelectButton
-WebFetch https://pitviper.turquoise.health/llm/component/PvDataTable
-```
-
-For web components, add `?web_component=true`:
-```
-WebFetch https://pitviper.turquoise.health/llm/component/PvButton?web_component=true
-```
-
-### Step 3: Fetch CSS Utilities
-
-Get CSS component documentation:
-
-```
-WebFetch https://pitviper.turquoise.health/llm/css/flex
-WebFetch https://pitviper.turquoise.health/llm/css/spacing
-WebFetch https://pitviper.turquoise.health/llm/css/buttons
-```
-
-Get design tokens (colors, spacing, typography):
-
-```
-WebFetch https://pitviper.turquoise.health/llm/tokens
-WebFetch https://pitviper.turquoise.health/llm/tokens?category=color
-WebFetch https://pitviper.turquoise.health/llm/tokens?category=spacing
-```
-
-### Step 4: Generate Output
-
-For all modes, first fetch the composition model:
-
-```
-WebFetch https://pitviper.turquoise.health/llm/composition
-```
-
-Then based on detected mode, read the appropriate reference and generate:
-
-- **Vue Mode**: WebFetch https://pitviper.turquoise.health/llm/guides/vue, produce Vue 3 SFC
-- **HTML Mode**: WebFetch https://pitviper.turquoise.health/llm/guides/html, produce HTML with pv-* classes. Starter template: `assets/pv-html-starter.html`. Full example: `examples/pv-html-example.html`
-- **Design Review**: WebFetch https://pitviper.turquoise.health/llm/guides/design-language, explain component selection
-
-For page-level layouts, also WebFetch https://pitviper.turquoise.health/llm/guides/layouts.
-For theme decisions, also WebFetch https://pitviper.turquoise.health/llm/guides/themes.
-
-## Anti-Patterns
-
-These are non-negotiable. Do not:
-
-- **Reach for Tailwind** — Pit Viper has its own utility system (pv-* classes)
-- **Invent component variants** — If it's not in Storybook, it doesn't exist. Search first.
-- **Use raw HTML form elements** — `<button>`, `<input>`, `<select>` have Pv equivalents
-- **Build custom tables** — Use PvDataTable (Vue) or pv-table classes (HTML). Never raw `<table>` with custom styling.
-- **Use third-party charting** — Use PvChart or PvDataTableWithChart (Vue only). No D3, Chart.js, or ApexCharts.
-- **Write custom CSS** — If a pv-* class doesn't exist, verify twice before adding styles
-- **Write custom table/chart CSS** — Tables and charts have complete Pit Viper styling. No custom styles.
-- **Guess icon names** — Verify at https://pitviper.turquoise.health/visual-style/icons/
-- **Import from barrel exports** — Import directly from component paths
-
-## When a Component Doesn't Exist
-
-If `/llm/search` returns no match for a legitimate UI need:
-
-1. Use the **closest existing component** + pv-* utility classes
-2. **Flag the gap** to the user: "Pit Viper doesn't have a dedicated X component — using PvY with custom layout. Consider requesting this from the design system team."
-3. Do NOT invent a fake component or silently use raw HTML
-
-## References
-
-### All modes — fetch first:
-- `WebFetch https://pitviper.turquoise.health/llm/composition` — composition mental model, custom property API, flow vs. stack, failure modes
-
-### Vue Mode — load these:
-1. WebFetch https://pitviper.turquoise.health/llm/guides/rules — spacing, typography, colors
-2. WebFetch https://pitviper.turquoise.health/llm/guides/patterns — utility class patterns
-3. WebFetch https://pitviper.turquoise.health/llm/guides/vue — Vue setup and patterns
-
-### HTML Mode — load these:
-1. WebFetch https://pitviper.turquoise.health/llm/guides/html — 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
-
-### Design Review — load these:
-1. WebFetch https://pitviper.turquoise.health/llm/guides/design-language — token validation, rationale
-2. WebFetch https://pitviper.turquoise.health/llm/guides/philosophy — full composition model, reasoning, and failure modes
-
-### Optional (any mode):
-- WebFetch https://pitviper.turquoise.health/llm/guides/layouts — full page or multi-component layouts
-- WebFetch https://pitviper.turquoise.health/llm/guides/philosophy — full philosophy doc when the user asks for design rationale or reasoning (not just code generation)
-- WebFetch https://pitviper.turquoise.health/llm/guides/themes — Platform vs Consumer theme selection
-
-## Quick Component Map
-
-Common UI needs and their Pit Viper equivalents:
-
-| Need | Component | Import | Notes |
-|------|-----------|--------|-------|
-| Button | `PvButton` | `@turquoisehealth/pit-viper/components` | |
-| Text input | `PvInput` | `@turquoisehealth/pit-viper/components` | |
-| Dropdown (single) | `PvSelectButton` | `@turquoisehealth/pit-viper/components` | |
-| Dropdown (multi) | `PvMultiSelectButton` | `@turquoisehealth/pit-viper/components` | |
-| Checkbox | `PvCheckbox` | `@turquoisehealth/pit-viper/components` | |
-| Toggle | `PvSwitch` | `@turquoisehealth/pit-viper/components` | |
-| Data table | `PvDataTable` | `@turquoisehealth/pit-viper/components/visualizations` | AG Grid wrapper — sorting, filtering, grouping |
-| Table + chart | `PvDataTableWithChart` | `@turquoisehealth/pit-viper/components/visualizations` | Combined table with integrated chart |
-| Chart | `PvChart` | `@turquoisehealth/pit-viper/components/visualizations` | AG Charts wrapper — bar, line, pie, etc. |
-| Modal | `PvModal` | `@turquoisehealth/pit-viper/components` | |
-| Drawer | `PvDrawer` | `@turquoisehealth/pit-viper/components` | |
-| Tabs | `PvTabs` | `@turquoisehealth/pit-viper/components` | |
-| Card | `PvCard` | `@turquoisehealth/pit-viper/components` | |
-| Toast | `PvToast` | `@turquoisehealth/pit-viper/components` | |
-| Tooltip | `PvTooltipV2` | `@turquoisehealth/pit-viper/components` | |
-
-**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 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.
-
-## Rules Summary
-
-1. **Pit Viper first** — Always use Pit Viper components and classes
-2. **Search before assuming** — Use `/llm/search` to verify components exist
-3. **Match the audience** — Engineer gets Vue, prototype gets HTML, design review gets rationale
-4. **No custom CSS** — Only pv-* utility classes
-5. **No guessing** — Verify icons, classes, and component names exist
-
-## Resources
-
-| Resource | URL |
-|----------|-----|
-| Storybook (setup, component docs) | https://pit-viper-storybook.netlify.app/?path=/docs/introduction--documentation |
-| CSS Documentation | https://pitviper.turquoise.health/ |
-| Icons | https://pitviper.turquoise.health/visual-style/icons/ |
-| LLM API | https://pitviper.turquoise.health/llm |
-| Vue + Vite Sandbox | https://stackblitz.com/edit/pv-sandbox-vue-vite |
-| Vue Browser Sandbox | https://stackblitz.com/edit/pv-sandbox-vue-browser |

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

@@ -1,77 +0,0 @@
-<!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>