@turquoisehealth/pit-viper 2.182.1-dev.5 → 2.183.1-dev.0

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

@@ -1,80 +0,0 @@
-# Design Language Reference
-
-Use this reference in Design Review Mode — when validating designs or explaining layout rationale without generating code.
-
-For component selection, use `/llm/search` first. This reference covers layout patterns and token validation.
-
-## Layout Patterns
-
-| Pattern | Structure | Best For |
-|---------|-----------|----------|
-| **Dashboard** | `PvSidePanel` (nav) + main content area | Multi-page apps with persistent navigation |
-| **Form** | `PvCard` with header/body/footer slots | Data entry, settings, editing |
-| **List-detail** | Table on left, `PvDrawer` or `PvModal` for details | Browse-and-edit workflows |
-| **Settings** | `PvTabs` with `PvAccordion` sections | Complex configuration with many options |
-| **Marketing** | Full-width sections, Consumer theme | Public-facing, consumer-oriented pages |
-
-## Token Validation
-
-When reviewing designs for Pit Viper compliance:
-
-### Colors
-
-Fetch current palette:
-```
-WebFetch https://pitviper.turquoise.health/llm/tokens?category=color
-```
-
-Key values:
-- Primary Brand: `#176F6F` (interactive elements, links)
-- Secondary Brand: `#02363D` (body text, dark surfaces)
-- Error: `#DA1E28`
-- Warning: `#896000`
-- Success: `#0E6027`
-
-### Spacing
-
-4px base grid. Valid values: 4, 8, 12, 16, 20, 24, 32, 64, 128 pixels.
-
-| Value | Use Case |
-|-------|----------|
-| 4-8px | Tight spacing, icons, inline elements |
-| 12-16px | Component padding, section spacing |
-| 24-32px | Major sections, page-level spacing |
-| 64-128px | Hero sections, large separators |
-
-### Typography
-
-| Style | Platform Size | Consumer Size | Weight |
-|-------|---------------|---------------|--------|
-| Heading 1 | 20px | 62px | 600 |
-| Heading 2 | 16px | 16px | 600 |
-| Body MD | 12px | 16px | 400 |
-| Body SM | 11px | 11px | 400 |
-
-### Border Radius
-
-- Small: 2px
-- Default: 5px
-- Large: 12px
-
-### Shadows
-
-Four elevation levels exist (button, popover, elevated hover, modal). Don't invent custom shadows.
-
-## Review Checklist
-
-1. **Does the component exist?** Search `/llm/search?q={name}` first.
-2. **Are tokens valid?** Check colors, spacing, typography against values above.
-3. **Is the pattern established?** Match to layout patterns table.
-4. **Is the 4px grid respected?** Flag spacing values that aren't multiples of 4.
-
-## When to Escalate
-
-Flag for design system review if the design requires:
-- Colors not in the palette
-- Spacing values not on the 4px grid
-- Components that don't exist in Pit Viper
-- Patterns that diverge significantly from established layouts
-
-Don't silently work around these — they indicate a design system gap.

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

@@ -1,265 +0,0 @@
-# Design Rules
-
-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.
-
-### Vertical Spacing (pv-stack-*)
-
-| Context | Class | When |
-|---------|-------|------|
-| Page sections | `pv-stack-32` | Between major content blocks |
-| Within sections | `pv-stack-24` | Between card/groups inside a section |
-| Related elements | `pv-stack-16` | Between form fields, list items |
-| Tight coupling | `pv-stack-8` | Label to input, heading to description |
-| Minimal | `pv-stack-4` | Icon to text, inline elements |
-
-### Padding (pv-inset-*)
-
-| Context | Class |
-|---------|-------|
-| Page wrapper | `pv-inset-square-24` |
-| Card body | `pv-inset-square-16` |
-| Compact card | `pv-inset-square-12` |
-| Button-like elements | `pv-inset-squish-8` or `pv-inset-squish-12` |
-| Dense lists | `pv-inset-square-8` |
-
-### Flow (pv-flow-*)
-
-Use `pv-flow-*` for horizontal/flex gaps:
-
-| Context | Class |
-|---------|-------|
-| Button groups | `pv-flow-8` |
-| Card grids | `pv-flow-16` or `pv-flow-24` |
-| Nav items | `pv-flow-4` or `pv-flow-8` |
-
-## Typography
-
-Use pv-* typography classes. Never use raw `font-size`, `font-weight`, or `line-height`.
-
-### Heading Hierarchy
-
-| Level | Class | Use |
-|-------|-------|-----|
-| Page title | `pv-heading-1` | One per page, top of content |
-| Section title | `pv-heading-2` | Major sections within page |
-| Card/panel title | `pv-heading-3` | Card headers, modal titles |
-| Subsection | `pv-heading-4` | Nested sections, accordion headers |
-| Small heading | `pv-heading-5` | Rarely used |
-
-### Body Text
-
-| Context | Class |
-|---------|-------|
-| Default body | `pv-text-body-md` |
-| Secondary info | `pv-text-body-sm` |
-| Fine print | `pv-text-body-xs` |
-| Large intro | `pv-text-body-lg` (Consumer theme only) |
-
-### Labels & Titles
-
-| Context | Class |
-|---------|-------|
-| Form label | `pv-text-title-sm` |
-| Card header text | `pv-text-title-md` |
-| Emphasized inline | `pv-text-title-sm` |
-
-### Text Modifiers
-
-| Purpose | Class |
-|---------|-------|
-| De-emphasize | `pv-text-subdued` |
-| On dark backgrounds | `pv-text-inverse` |
-| Brand color | `pv-text-brand` |
-| Error message | `pv-text-critical` |
-| Success message | `pv-text-success` |
-| Warning message | `pv-text-warning` |
-
-## Colors
-
-Use semantic classes. Never hardcode hex values.
-
-### Backgrounds (pv-surface-*)
-
-| Purpose | Class |
-|---------|-------|
-| Default page | `pv-surface` |
-| Elevated card | `pv-surface-raised` |
-| Subtle highlight | `pv-surface-accent` |
-| Brand header | `pv-surface-brand` |
-| Error state | `pv-surface-critical` |
-| Success state | `pv-surface-success` |
-| Warning state | `pv-surface-warning` |
-| Code/mono areas | `pv-surface-gray` or background token |
-
-### Status Colors
-
-| State | Text Class | Background Class |
-|-------|------------|------------------|
-| Success | `pv-text-success` | `pv-surface-success` |
-| Error | `pv-text-critical` | `pv-surface-critical` |
-| Warning | `pv-text-warning` | `pv-surface-warning` |
-| Info | `pv-text-brand` | `pv-surface-accent` |
-
-## Layout
-
-### Page Structure
-
-Every page should follow this structure:
-
-```html
-<body class="pv-surface">
-  <header class="pv-surface-brand pv-inset-square-24">
-    <!-- Header content -->
-  </header>
-  
-  <main class="pv-container-lg pv-inset-square-24">
-    <!-- Page content -->
-  </main>
-</body>
-```
-
-### Container Widths
-
-| Size | Class | Use |
-|------|-------|-----|
-| Small | `pv-container-sm` | Forms, narrow content |
-| Medium | `pv-container-md` | Articles, single-column |
-| Large | `pv-container-lg` | Dashboards, data tables |
-
-Always center containers: add `style="margin: 0 auto;"` or wrap in flex parent.
-
-### Flex Layouts
-
-| Pattern | Classes |
-|---------|---------|
-| Horizontal row | `pv-flex` |
-| Vertical stack | `pv-flex pv-flex-vertical` |
-| Space between | `pv-flex pv-space-between` |
-| Centered | `pv-flex pv-center` |
-| Responsive wrap | `pv-flex pv-flex-responsive` |
-
-Set flex gap with `pv-flow-*` or `--flex-gap` custom property.
-
-## Cards
-
-Always use proper card structure:
-
-```html
-<div class="pv-card">
-  <div class="pv-card-header">
-    <h3 class="pv-heading-3">Title</h3>
-  </div>
-  <div class="pv-card-body pv-flow-16">
-    <!-- Content -->
-  </div>
-  <div class="pv-card-footer pv-flex pv-flow-8" style="justify-content: flex-end;">
-    <!-- Actions -->
-  </div>
-</div>
-```
-
-Don't use:
-- Raw `<div>` with padding for card-like containers
-- Inline styles for card padding
-- Custom border/shadow styles
-
-## Forms
-
-### Field Structure
-
-```html
-<div>
-  <label class="pv-text-title-sm pv-stack-4">Label</label>
-  <pv-input placeholder="..."></pv-input>
-</div>
-```
-
-- Always use `pv-stack-4` between label and input
-- Use `pv-flow-16` or `pv-stack-16` between fields
-- Group related fields in `<fieldset>` with `pv-stack-24` between groups
-
-### Actions
-
-```html
-<div class="pv-flex pv-flow-8" style="--flex-justify: flex-end;">
-  <pv-button variant="ghost" label="Cancel"></pv-button>
-  <pv-button label="Submit"></pv-button>
-</div>
-```
-
-- Primary action on right
-- Secondary/cancel on left
-- Use `pv-flow-8` between buttons
-
-## Tables
-
-For data tables, always use `PvDataTable` (Vue) or `pv-table` classes (HTML).
-
-HTML table structure:
-```html
-<table class="pv-table">
-  <thead>
-    <tr>
-      <th>Header</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Cell</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-Never add custom styling to tables.
-
-## Borders & Radius
-
-| Purpose | Class |
-|---------|-------|
-| Subtle divider | `pv-border-bottom` |
-| Card-like border | `pv-border` |
-| Rounded corners | `pv-radius` (default 5px) |
-| Small radius | `pv-radius-sm` (2px) |
-| Large radius | `pv-radius-lg` (12px) |
-
-## Allowed Inline Styles
-
-Only these inline styles are acceptable (when no class exists):
-
-- `style="max-width: Npx;"` — constrain element width
-- `style="height: Npx;"` — set explicit height (tables, charts)
-- `style="flex: 1;"` — flex grow in layouts
-- `style="margin: 0 auto;"` — center container
-- `style="justify-content: flex-end;"` — align flex children
-- `style="--flex-gap: Nrem;"` — set flex gap
-
-Everything else must use pv-* classes. If you need a style that doesn't exist, flag it as a design system gap.
-
-## Checklist
-
-Before finalizing output, verify:
-
-1. [ ] No raw `padding`, `margin`, `font-size`, `color` in styles
-2. [ ] No hardcoded hex colors
-3. [ ] No `<style>` blocks
-4. [ ] Headings follow hierarchy (h1 > h2 > h3)
-5. [ ] Cards use `pv-card` + `pv-card-header` + `pv-card-body`
-6. [ ] Page wrapped in `pv-container-*` with `pv-inset-square-24`
-7. [ ] Spacing uses `pv-stack-*` or `pv-flow-*`
-8. [ ] Status colors use semantic classes, not hardcoded values