菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when building or editing a form in a project that uses shuip — covers shuip's react-hook-form (rhf-) and tanstack-form (tsf-) field components, their install commands, validation, submission, and accessible error/loading state. Use before hand-writing shadcn FormField boilerplate.
Use when working in a project that uses shuip and you need to know what shuip provides, how to install items from its registry, or which shuip skill/category to reach for. Triggers on shuip imports (@/components/ui/shuip/...) or a shuip registry URL (shuip.plvo.dev/r/...).
Use when auditing the shuip registry for accumulated drift, silent failures, or convention violations — before a release, after a refactor or merge, when a newly added item doesn't appear in the build, or when a consumer reports `shadcn add` fetching incomplete files.
Use when adding a new shuip item (component, block, react-hook-form field, tanstack-form field) under packages/registry/items/, or when investigating why a newly added item is missing from registry.json or the docs site.
Use when something in shuip silently doesn't work — Tailwind classes not applying, "module not found" after install, item missing from registry.json or docs site, a runtime crash referencing a React hook, wrong dep version installed at a consumer, fresh-checkout docs pages 404. The shared symptom is "no clear error message, the system just behaves wrong".
| name | shuip-components |
| description | 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. |
npx shadcn@latest add "https://shuip.plvo.dev/r/<item-name>".@/components/ui/shuip/<name>@/components/block/shuip/<name>@/components/ui/shuip/react-hook-form/<name>@/components/ui/shuip/tanstack-form/<name>@/components/ui/shuip/tanstack-query/<name>rhf-input-field → InputField, kanban → Kanban.components
confirmation-dialogcopy-buttonhover-revealside-dialogsubmit-buttontheme-buttonblocks
kanbanresponsive-dialogtitle-sectionreact-hook-form
rhf-address-fieldrhf-autocomplete-fieldrhf-checkbox-fieldrhf-date-fieldrhf-date-range-fieldrhf-datetime-fieldrhf-inline-editrhf-input-fieldrhf-month-fieldrhf-number-fieldrhf-password-fieldrhf-radio-fieldrhf-select-fieldrhf-textarea-fieldrhf-time-fieldrhf-time-rangetanstack-form
tsf-autocomplete-fieldtsf-checkbox-fieldtsf-date-fieldtsf-date-range-fieldtsf-datetime-fieldtsf-form-contexttsf-inline-edittsf-input-fieldtsf-month-fieldtsf-password-fieldtsf-radio-fieldtsf-select-fieldtsf-submit-buttontsf-textarea-fieldtsf-time-fieldtsf-time-rangetanstack-query
tsq-query-boundaryresponsive-dialog composes side-dialog; installing it resolves the dependency.confirmation-dialog for destructive-action confirmation; side-dialog for sheet-style panels.query-boundary wraps data-fetching subtrees so you don't hand-roll loading/error UI.| Mistake | Reality |
|---|---|
| Building a dialog / kanban / clipboard button from scratch | Check the catalog first — shuip likely ships it. |
Importing a prefixed symbol (RhfInputField, TsfInputField) | Exports are unprefixed (InputField). |
Flat path @/components/ui/shuip/rhf-input-field | Form categories use a sub-folder: @/components/ui/shuip/react-hook-form/input-field. |
Treating blocks as @/components/ui/shuip/... | Blocks import from @/components/block/shuip/<name>. |