[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FEHM4FJC0735QG5ZRN8N5X":3,"skill-same:01M6FEHM4FJC0735QG5ZRN8N5X":45},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":20,"frontMatter":21,"refName":22,"commitSha":23,"skillDirectory":24,"forksCount":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":27,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M6FEHM4FJC0735QG5ZRN8N5X","shadcn",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Fshadcn\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"# shadcn\u002Fui Community Best Practices\n\nComprehensive best practices guide for shadcn\u002Fui applications, maintained by the shadcn\u002Fui community. Contains 58 rules across 10 categories, prioritized by impact to guide automated refactoring and code generation.\n\n## When to Apply\n\nReference these guidelines when:\n- Installing and configuring shadcn\u002Fui in a project\n- Writing new shadcn\u002Fui components or composing primitives\n- Implementing forms with React Hook Form and Zod validation\n- Building data tables or handling large dataset displays\n- Customizing themes or adding dark mode support\n- Reviewing code for accessibility compliance\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Prefix |\n|----------|----------|--------|--------|\n| 1 | CLI & Project Setup | CRITICAL | `setup-` |\n| 2 | Component Architecture | CRITICAL | `arch-` |\n| 3 | Accessibility Preservation | CRITICAL | `ally-` |\n| 4 | Styling & Theming | HIGH | `style-` |\n| 5 | Form Patterns | HIGH | `form-` |\n| 6 | Data Display | MEDIUM-HIGH | `data-` |\n| 7 | Layout & Navigation | MEDIUM | `layout-` |\n| 8 | Component Composition | MEDIUM | `comp-` |\n| 9 | Performance Optimization | MEDIUM | `perf-` |\n| 10 | State Management | LOW-MEDIUM | `state-` |\n\n## Quick Reference\n\n### 1. CLI & Project Setup (CRITICAL)\n\n- [`setup-components-json`](references\u002Fsetup-components-json.md) - Configure components.json before adding components\n- [`setup-path-aliases`](references\u002Fsetup-path-aliases.md) - Configure TypeScript path aliases to match components.json\n- [`setup-cn-utility`](references\u002Fsetup-cn-utility.md) - Create the cn utility before using components\n- [`setup-use-cli-not-copy`](references\u002Fsetup-use-cli-not-copy.md) - Use CLI to add components instead of copy-paste\n- [`setup-css-variables-theme`](references\u002Fsetup-css-variables-theme.md) - Enable CSS variables for consistent theming\n- [`setup-rsc-configuration`](references\u002Fsetup-rsc-configuration.md) - Set RSC flag based on framework support\n\n### 2. Component Architecture (CRITICAL)\n\n- [`arch-use-asChild-for-custom-triggers`](references\u002Farch-use-asChild-for-custom-triggers.md) - Use asChild prop for custom trigger elements\n- [`arch-preserve-radix-primitive-structure`](references\u002Farch-preserve-radix-primitive-structure.md) - Maintain Radix compound component hierarchy\n- [`arch-extend-variants-with-cva`](references\u002Farch-extend-variants-with-cva.md) - Use Class Variance Authority for type-safe variants\n- [`arch-use-cn-for-class-merging`](references\u002Farch-use-cn-for-class-merging.md) - Use cn() utility for safe Tailwind class merging\n- [`arch-forward-refs-for-composable-components`](references\u002Farch-forward-refs-for-composable-components.md) - Forward refs for form and focus integration\n- [`arch-isolate-component-variants`](references\u002Farch-isolate-component-variants.md) - Separate base styles from variant-specific styles\n\n### 3. Accessibility Preservation (CRITICAL)\n\n- [`ally-preserve-aria-attributes`](references\u002Fally-preserve-aria-attributes.md) - Keep Radix ARIA attributes intact\n- [`ally-provide-sr-only-labels`](references\u002Fally-provide-sr-only-labels.md) - Add screen reader labels for icon buttons\n- [`ally-maintain-focus-management`](references\u002Fally-maintain-focus-management.md) - Preserve focus trapping in modals\n- [`ally-preserve-keyboard-navigation`](references\u002Fally-preserve-keyboard-navigation.md) - Keep WAI-ARIA keyboard patterns\n- [`ally-ensure-color-contrast`](references\u002Fally-ensure-color-contrast.md) - Maintain WCAG color contrast ratios\n- [`ally-dialog-title-required`](references\u002Fally-dialog-title-required.md) - Always include DialogTitle for screen readers\n- [`ally-form-field-labels`](references\u002Fally-form-field-labels.md) - Associate labels with form controls\n- [`ally-aria-invalid-errors`](references\u002Fally-aria-invalid-errors.md) - Use aria-invalid for form error states\n- [`ally-checkbox-label-association`](references\u002Fally-checkbox-label-association.md) - Wrap Checkbox with Label for click target\n- [`ally-focus-visible-styles`](references\u002Fally-focus-visible-styles.md) - Preserve focus visible styles for keyboard navigation\n\n### 4. Styling & Theming (HIGH)\n\n- [`style-use-css-variables-for-theming`](references\u002Fstyle-use-css-variables-for-theming.md) - Use CSS variables for theme colors\n- [`style-avoid-important-overrides`](references\u002Fstyle-avoid-important-overrides.md) - Never use !important for style overrides\n- [`style-use-tailwind-theme-extend`](references\u002Fstyle-use-tailwind-theme-extend.md) - Extend Tailwind theme for design tokens\n- [`style-consistent-spacing-scale`](references\u002Fstyle-consistent-spacing-scale.md) - Use consistent Tailwind spacing scale\n- [`style-responsive-design-patterns`](references\u002Fstyle-responsive-design-patterns.md) - Apply mobile-first responsive design\n- [`style-dark-mode-support`](references\u002Fstyle-dark-mode-support.md) - Support dark mode with CSS variables\n\n### 5. Form Patterns (HIGH)\n\n- [`form-use-react-hook-form-integration`](references\u002Fform-use-react-hook-form-integration.md) - Integrate with React Hook Form\n- [`form-use-zod-for-schema-validation`](references\u002Fform-use-zod-for-schema-validation.md) - Use Zod for type-safe validation\n- [`form-show-validation-errors-correctly`](references\u002Fform-show-validation-errors-correctly.md) - Show errors at appropriate times\n- [`form-handle-async-validation`](references\u002Fform-handle-async-validation.md) - Debounce async validation calls\n- [`form-reset-form-state-correctly`](references\u002Fform-reset-form-state-correctly.md) - Reset form state after submission\n\n### 6. Data Display (MEDIUM-HIGH)\n\n- [`data-use-tanstack-table-for-complex-tables`](references\u002Fdata-use-tanstack-table-for-complex-tables.md) - Use TanStack Table for sorting\u002Ffiltering\n- [`data-virtualize-large-lists`](references\u002Fdata-virtualize-large-lists.md) - Virtualize lists with 100+ items\n- [`data-use-skeleton-loading-states`](references\u002Fdata-use-skeleton-loading-states.md) - Use Skeleton for loading states\n- [`data-paginate-server-side`](references\u002Fdata-paginate-server-side.md) - Paginate large datasets server-side\n- [`data-empty-states-with-guidance`](references\u002Fdata-empty-states-with-guidance.md) - Provide actionable empty states\n\n### 7. Layout & Navigation (MEDIUM)\n\n- [`layout-sidebar-provider`](references\u002Flayout-sidebar-provider.md) - Wrap layout with SidebarProvider\n- [`layout-sidebar-collapsible`](references\u002Flayout-sidebar-collapsible.md) - Configure sidebar collapsible behavior\n- [`layout-sidebar-groups`](references\u002Flayout-sidebar-groups.md) - Organize sidebar navigation with groups\n- [`layout-sheet-mobile-nav`](references\u002Flayout-sheet-mobile-nav.md) - Use Sheet for mobile navigation overlay\n- [`layout-breadcrumb-navigation`](references\u002Flayout-breadcrumb-navigation.md) - Implement breadcrumbs for deep navigation\n\n### 8. Component Composition (MEDIUM)\n\n- [`comp-compose-with-compound-components`](references\u002Fcomp-compose-with-compound-components.md) - Use compound component patterns\n- [`comp-use-drawer-for-mobile-modals`](references\u002Fcomp-use-drawer-for-mobile-modals.md) - Use Drawer on mobile devices\n- [`comp-combine-command-with-popover`](references\u002Fcomp-combine-command-with-popover.md) - Create searchable selects with Command\n- [`comp-nest-dialogs-correctly`](references\u002Fcomp-nest-dialogs-correctly.md) - Manage nested dialog focus correctly\n- [`comp-create-reusable-form-fields`](references\u002Fcomp-create-reusable-form-fields.md) - Extract reusable form field components\n- [`comp-use-slot-pattern-for-flexibility`](references\u002Fcomp-use-slot-pattern-for-flexibility.md) - Use slot pattern for flexible content\n\n### 9. Performance Optimization (MEDIUM)\n\n- [`perf-lazy-load-heavy-components`](references\u002Fperf-lazy-load-heavy-components.md) - Lazy load components over 50KB\n- [`perf-memoize-expensive-renders`](references\u002Fperf-memoize-expensive-renders.md) - Memoize list items and expensive components\n- [`perf-optimize-icon-imports`](references\u002Fperf-optimize-icon-imports.md) - Use direct imports for Lucide icons\n- [`perf-avoid-unnecessary-rerenders-in-forms`](references\u002Fperf-avoid-unnecessary-rerenders-in-forms.md) - Isolate form field watching\n- [`perf-debounce-search-inputs`](references\u002Fperf-debounce-search-inputs.md) - Debounce search and filter inputs\n\n### 10. State Management (LOW-MEDIUM)\n\n- [`state-prefer-uncontrolled-for-simple-inputs`](references\u002Fstate-prefer-uncontrolled-for-simple-inputs.md) - Use uncontrolled for simple forms\n- [`state-lift-state-to-appropriate-level`](references\u002Fstate-lift-state-to-appropriate-level.md) - Lift state to lowest common ancestor\n- [`state-use-controlled-dialog-state`](references\u002Fstate-use-controlled-dialog-state.md) - Control dialogs for programmatic access\n- [`state-colocate-state-with-components`](references\u002Fstate-colocate-state-with-components.md) - Keep state close to where it's used\n\n## How to Use\n\nRead individual reference files for detailed explanations and code examples:\n\n- [Section definitions](references\u002F_sections.md) - Category structure and impact levels\n- [Rule template](assets\u002Ftemplates\u002F_template.md) - Template for adding new rules\n\n## Full Compiled Document\n\nFor a single-file reference containing all rules, see [AGENTS.md](AGENTS.md).\n\n## Reference Files\n\n| File | Description |\n|------|-------------|\n| [AGENTS.md](AGENTS.md) | Complete compiled guide with all rules |\n| [references\u002F_sections.md](references\u002F_sections.md) | Category definitions and ordering |\n| [assets\u002Ftemplates\u002F_template.md](assets\u002Ftemplates\u002F_template.md) | Template for new rules |\n| [metadata.json](metadata.json) | Version and reference information |\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fpproenca\u002Fdot-skills\u002Fshadcn",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill shadcn",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill shadcn",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill shadcn","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Fshadcn\u002FSKILL.md",true,[],[46,60,70,79,85,92],{"skillNo":47,"name":48,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":49,"categories":50,"keywords":56,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[51],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[57,58,59],"model","model hierarchy","model hierarchy skill",{"skillNo":61,"name":62,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":66,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[65],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[67,68,69],"MCP","zoom","zoom mcp",{"skillNo":71,"name":72,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[76,77,78,68],"sdk","zoom apps sdk","apps",{"skillNo":80,"name":81,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":84,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[81],{"skillNo":86,"name":87,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":91,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[90],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[87],{"skillNo":93,"name":94,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":97,"publishedAt":18},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[94]]