{
  "name": "shuip-components",
  "type": "registry:item",
  "files": [
    {
      "path": "./skills/.generated/shuip-components/SKILL.md",
      "type": "registry:file",
      "target": ".claude/skills/shuip-components/SKILL.md",
      "content": "---\nname: shuip-components\ndescription: Use when choosing which shuip item fits a need, or composing shuip components and blocks — provides the full item catalog, install/import conventions, and composition notes. Use before building UI that shuip may already provide.\n---\n\n# Choosing & composing shuip components\n\n## Conventions\n\n- Install: `npx shadcn@latest add \"https://shuip.plvo.dev/r/<item-name>\"`.\n- Import paths by category:\n  - components → `@/components/ui/shuip/<name>`\n  - blocks → `@/components/block/shuip/<name>`\n  - react-hook-form → `@/components/ui/shuip/react-hook-form/<name>`\n  - tanstack-form → `@/components/ui/shuip/tanstack-form/<name>`\n  - tanstack-query → `@/components/ui/shuip/tanstack-query/<name>`\n- **Exports are unprefixed**: `rhf-input-field` → `InputField`, `kanban` → `Kanban`.\n- For anything form-related, use the **shuip-forms** skill — it covers the rhf/tsf field patterns in depth.\n\n## Catalog\n\n<!-- shuip:catalog:start -->\n**components**\n- `confirmation-dialog`\n- `copy-button`\n- `hover-reveal`\n- `search-input`\n- `side-dialog`\n- `submit-button`\n- `theme-button`\n\n**blocks**\n- `calendar`\n- `data-table`\n- `kanban`\n- `responsive-dialog`\n- `title-section`\n\n**react-hook-form**\n- `rhf-address-field`\n- `rhf-autocomplete-field`\n- `rhf-checkbox-field`\n- `rhf-combobox-field`\n- `rhf-date-field`\n- `rhf-date-range-field`\n- `rhf-datetime-field`\n- `rhf-inline-edit`\n- `rhf-input-field`\n- `rhf-month-field`\n- `rhf-number-field`\n- `rhf-password-field`\n- `rhf-radio-field`\n- `rhf-select-field`\n- `rhf-textarea-field`\n- `rhf-time-field`\n- `rhf-time-range`\n\n**tanstack-form**\n- `tsf-autocomplete-field`\n- `tsf-checkbox-field`\n- `tsf-combobox-field`\n- `tsf-date-field`\n- `tsf-date-range-field`\n- `tsf-datetime-field`\n- `tsf-form-context`\n- `tsf-inline-edit`\n- `tsf-input-field`\n- `tsf-month-field`\n- `tsf-password-field`\n- `tsf-radio-field`\n- `tsf-select-field`\n- `tsf-submit-button`\n- `tsf-textarea-field`\n- `tsf-time-field`\n- `tsf-time-range`\n\n**tanstack-query**\n- `tsq-query-boundary`\n<!-- shuip:catalog:end -->\n\n## Composition notes\n\n- `responsive-dialog` composes `side-dialog`; installing it resolves the dependency.\n- `confirmation-dialog` for destructive-action confirmation; `side-dialog` for sheet-style panels.\n- `query-boundary` wraps data-fetching subtrees so you don't hand-roll loading/error UI.\n- Form fields are never used alone — they compose inside a form. Use **shuip-forms**.\n\n## Common mistakes\n\n| Mistake | Reality |\n|---------|---------|\n| Building a dialog / kanban / clipboard button from scratch | Check the catalog first — shuip likely ships it. |\n| Importing a prefixed symbol (`RhfInputField`, `TsfInputField`) | Exports are unprefixed (`InputField`). |\n| Flat path `@/components/ui/shuip/rhf-input-field` | Form categories use a sub-folder: `@/components/ui/shuip/react-hook-form/input-field`. |\n| Treating blocks as `@/components/ui/shuip/...` | Blocks import from `@/components/block/shuip/<name>`. |\n"
    }
  ],
  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
}