packmind: Skill for Claude Code

Working With the PM Design Kit

Overview

The Packmind design kit (@packmind/ui) is a component library built on top of Chakra UI v3. All components are prefixed with PM and provide a consistent, themed API across the application. The source lives in packages/ui/.

Import pattern: Always import from @packmind/ui, never from Chakra UI directly.

import { PMButton, PMBox, PMHeading, PMText } from '@packmind/ui';

Component Selection Guide

Before reaching for a raw <div> or Chakra primitive, check if a PM component exists. Consult references/component-catalog.md for the full inventory organized by category.

Decision Flow

1. Need a layout container? Use PMBox, PMVStack, PMHStack, PMFlex, or PMGrid.
2. Need text? Use PMHeading (with level prop for semantic h1–h6) or PMText (with variant and color).
3. Need a button? Use PMButton with the appropriate variant: primary for main actions, secondary/ghost for secondary, danger for destructive.
4. Need user input? Use PMInput, PMTextArea, PMSelect, PMCheckbox, PMSwitch, or PMRadioGroup.
5. Need feedback? Use pmToaster for transient messages, PMAlert for inline messages, PMConfirmationModal for destructive confirmations.
6. Need an overlay? Use PMDialog for modals, PMPopover for contextual info, PMDrawer for side panels.
7. Need to show nothing? Use PMEmptyState with title, description, icon, and an action button.
8. Need loading placeholders? Use PMSkeleton for content areas, PMSpinner for inline indicators.
9. Need a color indicator? Use PMColorSwatch to display a color sample.
10. No PM wrapper exists? Check Chakra UI v3 docs, then ask the user before using a raw Chakra component.

Compound Component Patterns

Several PM components use Chakra's compound pattern with dot notation. Always use the compound API — do not try to reconstruct these with standalone elements.

// Dialog
<PMDialog.Root open={isOpen} onOpenChange={setIsOpen}>
  <PMDialog.Backdrop />
  <PMDialog.Positioner>
    <PMDialog.Content>
      <PMDialog.Header>
        <PMDialog.Title>Title</PMDialog.Title>
        <PMDialog.CloseTrigger />
      </PMDialog.Header>
      {/* body */}
    </PMDialog.Content>
  </PMDialog.Positioner>
</PMDialog.Root>

// Accordion
<PMAccordion.Root>
  <PMAccordion.Item value="section-1">
    <PMAccordion.ItemTrigger>Section 1</PMAccordion.ItemTrigger>
    <PMAccordion.ItemContent>Content here</PMAccordion.ItemContent>
  </PMAccordion.Item>
</PMAccordion.Root>

// Timeline
<PMTimeline.Root>
  <PMTimeline.Item>
    <PMTimeline.Separator>
      <PMTimeline.Indicator />
      <PMTimeline.Connector />
    </PMTimeline.Separator>
    <PMTimeline.Content>
      <PMTimeline.Title>Event</PMTimeline.Title>
      <PMTimeline.Description>Details</PMTimeline.Description>
    </PMTimeline.Content>
  </PMTimeline.Item>
</PMTimeline.Root>

// Tabs (compound pattern — preferred for flexible tab layouts)
<PMTabsCompound.Root defaultValue="tab1">
  <PMTabsCompound.List>
    <PMTabsCompound.Trigger value="tab1">First Tab</PMTabsCompound.Trigger>
    <PMTabsCompound.Trigger value="tab2">Second Tab</PMTabsCompound.Trigger>
  </PMTabsCompound.List>
  <PMTabsCompound.Content value="tab1">First content</PMTabsCompound.Content>
  <PMTabsCompound.Content value="tab2">Second content</PMTabsCompound.Content>
</PMTabsCompound.Root>