菜单
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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/plvo/shuip --skill shuip-components命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
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.
正在显示 SKILL.md
基于 SOC 职业分类
| 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>. |