Shadcn
by pproencacf93c57cac89No license215 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 weeks ago
shadcn/ui component library best practices and patterns (formerly shadcn-ui). This skill should be used when writing, reviewing, or refactoring shadcn/ui components to ensure proper architecture, accessibility, and performance. Triggers on tasks involving Radix primitives, Tailwind styling, form validation with React Hook Form, data tables, theming, or component composition patterns.
Only the file list is public. File contents are available once the skill is installed in a workspace.
| Path | Size | Type |
|---|---|---|
| AGENTS.md | 11.9 KB | text/markdown |
| assets/templates/_template.md | 1015 B | text/markdown |
| metadata.json | 963 B | application/json |
| README.md | 4.5 KB | text/markdown |
| references/ally-aria-invalid-errors.md | 1.6 KB | text/markdown |
| references/ally-checkbox-label-association.md | 1.5 KB | text/markdown |
| references/ally-dialog-title-required.md | 1.8 KB | text/markdown |
| references/ally-ensure-color-contrast.md | 1.7 KB | text/markdown |
| references/ally-focus-visible-styles.md | 1.5 KB | text/markdown |
| references/ally-form-field-labels.md | 1.7 KB | text/markdown |
| references/ally-maintain-focus-management.md | 2 KB | text/markdown |
| references/ally-preserve-aria-attributes.md | 2.2 KB | text/markdown |
| references/ally-preserve-keyboard-navigation.md | 2 KB | text/markdown |
| references/ally-provide-sr-only-labels.md | 1.8 KB | text/markdown |
| references/arch-extend-variants-with-cva.md | 1.9 KB | text/markdown |
| references/arch-forward-refs-for-composable-components.md | 2 KB | text/markdown |
| references/arch-isolate-component-variants.md | 2.2 KB | text/markdown |
| references/arch-preserve-radix-primitive-structure.md | 1.6 KB | text/markdown |
| references/arch-use-asChild-for-custom-triggers.md | 1.8 KB | text/markdown |
| references/arch-use-cn-for-class-merging.md | 1.7 KB | text/markdown |
| references/comp-combine-command-with-popover.md | 3.1 KB | text/markdown |
| references/comp-compose-with-compound-components.md | 3 KB | text/markdown |
| references/comp-create-reusable-form-fields.md | 3.8 KB | text/markdown |
| references/comp-nest-dialogs-correctly.md | 3.1 KB | text/markdown |
| references/comp-use-drawer-for-mobile-modals.md | 3.3 KB | text/markdown |
| references/comp-use-slot-pattern-for-flexibility.md | 3.2 KB | text/markdown |
| references/data-empty-states-with-guidance.md | 2.9 KB | text/markdown |
| references/data-paginate-server-side.md | 2.8 KB | text/markdown |
| references/data-use-skeleton-loading-states.md | 2.6 KB | text/markdown |
| references/data-use-tanstack-table-for-complex-tables.md | 3.1 KB | text/markdown |
| references/data-virtualize-large-lists.md | 2.4 KB | text/markdown |
| references/form-handle-async-validation.md | 2.7 KB | text/markdown |
| references/form-reset-form-state-correctly.md | 2.3 KB | text/markdown |
| references/form-show-validation-errors-correctly.md | 1.7 KB | text/markdown |
| references/form-use-react-hook-form-integration.md | 2.9 KB | text/markdown |
| references/form-use-zod-for-schema-validation.md | 2.5 KB | text/markdown |
| references/layout-breadcrumb-navigation.md | 2 KB | text/markdown |
| references/layout-sheet-mobile-nav.md | 2 KB | text/markdown |
| references/layout-sidebar-collapsible.md | 1.7 KB | text/markdown |
| references/layout-sidebar-groups.md | 3.1 KB | text/markdown |
| references/layout-sidebar-provider.md | 1.6 KB | text/markdown |
| references/perf-avoid-unnecessary-rerenders-in-forms.md | 2.6 KB | text/markdown |
| references/perf-debounce-search-inputs.md | 2.2 KB | text/markdown |
| references/perf-lazy-load-heavy-components.md | 2.5 KB | text/markdown |
| references/perf-memoize-expensive-renders.md | 2.4 KB | text/markdown |
| references/perf-optimize-icon-imports.md | 1.9 KB | text/markdown |
| references/_sections.md | 2.1 KB | text/markdown |
| references/setup-cn-utility.md | 1.2 KB | text/markdown |
| references/setup-components-json.md | 1.5 KB | text/markdown |
| references/setup-css-variables-theme.md | 1.3 KB | text/markdown |
| references/setup-path-aliases.md | 1.2 KB | text/markdown |
| references/setup-rsc-configuration.md | 1.4 KB | text/markdown |
| references/setup-use-cli-not-copy.md | 1.2 KB | text/markdown |
| references/state-colocate-state-with-components.md | 2.7 KB | text/markdown |
| references/state-lift-state-to-appropriate-level.md | 2.6 KB | text/markdown |
| references/state-prefer-uncontrolled-for-simple-inputs.md | 2.5 KB | text/markdown |
| references/state-use-controlled-dialog-state.md | 3.3 KB | text/markdown |
| references/style-avoid-important-overrides.md | 1.7 KB | text/markdown |
| references/style-consistent-spacing-scale.md | 1.9 KB | text/markdown |
| references/style-dark-mode-support.md | 2.2 KB | text/markdown |
| references/style-responsive-design-patterns.md | 2.5 KB | text/markdown |
| references/style-use-css-variables-for-theming.md | 1.7 KB | text/markdown |
| references/style-use-tailwind-theme-extend.md | 1.9 KB | text/markdown |
| SKILL.md | 9.8 KB | text/markdown |
Source and attribution
Source:pproenca/dot-skillsinskills/.curated/shadcnat commitcf93c57
License: No license
Content belongs to its original authors. SourceWeft indexes it from a public repository.
More from pproenca/dot-skills
Typescript Refactor
pproenca
Guidelines for refactoring and modernizing TypeScript and React/TSX code, covering 47 rules across nine categories.
Tailwind Ui Refactor
pproenca
A 52-rule Tailwind CSS UI refactoring guide covering hierarchy, spacing, typography, color, depth and polish.
Shell
pproenca
A reference guide of 49 shell scripting best practices for writing safe, portable, and maintainable bash and sh scripts.
React Refactor
pproenca
Architectural refactoring guide for React apps, with 40 rules on component, state, hook, and data patterns.
Expo React Native Performance
pproenca
Guidelines for optimizing performance in Expo React Native apps, covering startup, lists, re-renders, animations, assets, memory and async.
Framer Motion
pproenca
Guidelines for optimizing Framer Motion animation performance in React applications.
More in Software Development
Playground
anthropics
Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.
M5 Onboard
anthropics
Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.
Cardputer Buddy
anthropics
Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.
Web Design Guidelines
vercel-labs
Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.
Vercel React Native Skills
vercel-labs
React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.
Vercel React Best Practices
vercel-labs
Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.