Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

shuip-components

Estrelas11

Forks1

Atualizado28 de maio de 2026 às 12:10

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.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

plvo

plvo/shuip

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Redatores técnicosArtes, Design, Entretenimento, Esportes e Mídia·SOC 27-3042

SKILL.md

readonly

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.

Choosing & composing shuip components

Conventions

Install: npx shadcn@latest add "https://shuip.plvo.dev/r/<item-name>".
Import paths by category:
- components → @/components/ui/shuip/<name>
- blocks → @/components/block/shuip/<name>
- react-hook-form → @/components/ui/shuip/react-hook-form/<name>
- tanstack-form → @/components/ui/shuip/tanstack-form/<name>
- tanstack-query → @/components/ui/shuip/tanstack-query/<name>
Exports are unprefixed: rhf-input-field → InputField, kanban → Kanban.
For anything form-related, use the shuip-forms skill — it covers the rhf/tsf field patterns in depth.

Catalog

components

confirmation-dialog
copy-button
hover-reveal
side-dialog
submit-button
theme-button

blocks

kanban
responsive-dialog
title-section

react-hook-form

rhf-address-field
rhf-autocomplete-field
rhf-checkbox-field
rhf-date-field
rhf-date-range-field
rhf-datetime-field
rhf-inline-edit
rhf-input-field
rhf-month-field
rhf-number-field
rhf-password-field
rhf-radio-field
rhf-select-field
rhf-textarea-field
rhf-time-field
rhf-time-range

tanstack-form

tsf-autocomplete-field
tsf-checkbox-field
tsf-date-field
tsf-date-range-field
tsf-datetime-field
tsf-form-context
tsf-inline-edit
tsf-input-field
tsf-month-field
tsf-password-field
tsf-radio-field
tsf-select-field
tsf-submit-button
tsf-textarea-field
tsf-time-field
tsf-time-range

tanstack-query

tsq-query-boundary

Composition notes

responsive-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.
Form fields are never used alone — they compose inside a form. Use shuip-forms.

Common mistakes

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>`.

Mais deste repositório

mesmo repositório

shuip-forms

plvo/shuip

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.

2026-05-2811

shuip-overview

plvo/shuip

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/...).

2026-05-2811

auditing-registry-consistency

plvo/shuip

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.

2026-05-2511

creating-registry-item

plvo/shuip

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.

2026-05-1111

debugging-shuip-silent-failures

plvo/shuip

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".

2026-05-1111

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.

Choosing & composing shuip components

Conventions

Install: npx shadcn@latest add "https://shuip.plvo.dev/r/<item-name>".
Import paths by category:
- components → @/components/ui/shuip/<name>
- blocks → @/components/block/shuip/<name>
- react-hook-form → @/components/ui/shuip/react-hook-form/<name>
- tanstack-form → @/components/ui/shuip/tanstack-form/<name>
- tanstack-query → @/components/ui/shuip/tanstack-query/<name>
Exports are unprefixed: rhf-input-field → InputField, kanban → Kanban.
For anything form-related, use the shuip-forms skill — it covers the rhf/tsf field patterns in depth.

Catalog

components

confirmation-dialog
copy-button
hover-reveal
side-dialog
submit-button
theme-button

blocks

kanban
responsive-dialog
title-section

react-hook-form

rhf-address-field
rhf-autocomplete-field
rhf-checkbox-field
rhf-date-field
rhf-date-range-field
rhf-datetime-field
rhf-inline-edit
rhf-input-field
rhf-month-field
rhf-number-field
rhf-password-field
rhf-radio-field
rhf-select-field
rhf-textarea-field
rhf-time-field
rhf-time-range

tanstack-form

tsf-autocomplete-field
tsf-checkbox-field
tsf-date-field
tsf-date-range-field
tsf-datetime-field
tsf-form-context
tsf-inline-edit
tsf-input-field
tsf-month-field
tsf-password-field
tsf-radio-field
tsf-select-field
tsf-submit-button
tsf-textarea-field
tsf-time-field
tsf-time-range

tanstack-query

tsq-query-boundary

Composition notes

responsive-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.
Form fields are never used alone — they compose inside a form. Use shuip-forms.

Common mistakes

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>`.