Run any Skill in Manus with one click

shadcn

Stars163

Forks12

UpdatedMay 14, 2026 at 18:16

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

pproenca

pproenca/dot-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

64 files

SKILL.md

readonly

More from this repository

same repository

write-design-docs

pproenca/dot-skills

Write, revise, or review software design documents using Malte Ubl's "Design Docs at Google" guidance. Use when Codex needs to draft a design doc, technical design, RFC, engineering review doc, architecture proposal, mini design doc, or design-doc review focused on context, goals, non-goals, trade-offs, alternatives, cross-cutting concerns, review lifecycle, and deciding whether a design doc is warranted.

2026-06-12163

go-process-cli

pproenca/dot-skills

Write Go CLIs that manage processes and workloads — daemons, supervisors, job runners, deploy tools, anything that spawns or controls other processes. Use when writing, reviewing, or refactoring Go that handles OS signals, runs children via os/exec, fans out concurrent work, threads context for cancellation, returns exit codes, or builds a flag/cobra command surface. Covers the footguns the standard library makes easy to hit — SIGTERM vs Ctrl-C, SIGKILL-by-default children, orphaned process groups, pipe deadlocks, goroutine leaks, zombie reaping, and os.FindProcess lying about liveness. Triggers whenever the task touches process lifecycle, graceful shutdown, subprocess control, or concurrent workload supervision in Go — even if not named.

2026-05-31163

design-review

pproenca/dot-skills

Structured UI design review — existing code (React/JSX, CSS, Tailwind) and, when behaviour matters, the running app in a real browser — reported as a prioritised Before / After / Why table. Covers visual hierarchy, spacing, typography, colour & contrast, component states, motion, responsiveness, accessibility, multi-page flow & navigation, and interaction continuity — grounded in Refactoring UI and Emil Kowalski's principles. For animation/jank/FPS, focus order, and cross-page UX it can drive Chrome via chrome-devtools-mcp to capture what a screenshot can't. Trigger when the user asks to "review this UI", "design review", "critique this component/screen/page or multi-page flow", asks why something "looks off", "looks AI-generated", or "looks like a wireframe", or wants to raise visual polish. For building UI from scratch use web-taste; for the full animation set see emilkowal-animations.

2026-05-27163

deterministic-metric-design

pproenca/dot-skills

Inventing deterministic metrics — turning a fuzzy property like 'maintainability', 'risk', or 'how reducible this code is' into a deterministic, computable number an agent can trust and optimize. Covers the path from construct to adoption — operationalizing the construct, confronting computability limits (Kolmogorov, Rice) with sound proxies, picking the right measurement scale, proving properties (monotonicity, invariance, the Weyuker/Briand axioms), guaranteeing determinism, establishing construct validity (not just LOC in disguise), and hardening against Goodhart-style gaming when an agent optimizes the metric. Trigger when designing, reviewing, or validating a quantitative metric, score, measure, or index — and even when the user doesn't say 'metric' but wants to quantify, score, rank, or measure code/behavior, build a deterministic optimization target, or invent a measure for something previously unquantified (e.g., behavior-preserving codebase-size reduction).

2026-05-27163

implementation-design-patterns

pproenca/dot-skills

Implementation guide for the 22 Gang of Four design patterns in TypeScript, distilled from refactoring.guru. Use this skill when writing, refactoring, or reviewing TypeScript that exhibits a pattern-shaped problem — class-explosion from inheritance, conditionals switching on type, tight coupling to concrete classes, tree-shaped models, runtime algorithm selection, undo/redo, snapshot-and-restore, state-dependent behavior, subscriber notification, or hiding subsystem complexity. Each pattern entry includes intent, problem, solution, applicability (when to use AND when NOT to use), a runnable TypeScript example, implementation steps, pros/cons, and relations to sibling patterns. Trigger even when no pattern is named — cues like "class getting unwieldy," "giant switch," "swap implementations at runtime," "combinatorial subclasses," "need undo," or "traverse a tree" are pattern-shaped. Covers all 5 Creational, 7 Structural, and 10 Behavioral GoF patterns.

2026-05-27163

implementation-functional-patterns

pproenca/dot-skills

TypeScript's functional answers to the 22 Gang of Four classes — factory functions (Factory Method, Abstract Factory, Prototype, Memento), module-scope singletons, fluent immutable builders, wrapper functions (Adapter, Facade), native Proxy, WeakMap caches (Flyweight), discriminated unions with exhaustive match (State, Visitor, Composite), event emitters and signals (Mediator, Observer), pipelines and composition (CoR, Decorator), stream methods (Iterator), closures-as-commands, higher-order strategies, lambda placement. Use when reviewing TypeScript that has a class-shaped problem the GoF catalog solves with a hierarchy but where idiomatic TS reaches for a function, a tagged union, or a data structure. Each rule names the GoF pattern(s) it replaces and when the class form still wins. Trigger on "factory class", "singleton getInstance", "state machine class", "observer pattern", "AST visitor", "where do I put this lambda". Sibling to implementation-design-patterns.

2026-05-27163

name	shadcn
description	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.

shadcn/ui Community Best Practices

Comprehensive best practices guide for shadcn/ui applications, maintained by the shadcn/ui community. Contains 58 rules across 10 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

Installing and configuring shadcn/ui in a project
Writing new shadcn/ui components or composing primitives
Implementing forms with React Hook Form and Zod validation
Building data tables or handling large dataset displays
Customizing themes or adding dark mode support
Reviewing code for accessibility compliance

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	CLI & Project Setup	CRITICAL	`setup-`
2	Component Architecture	CRITICAL	`arch-`
3	Accessibility Preservation	CRITICAL	`ally-`
4	Styling & Theming	HIGH	`style-`
5	Form Patterns	HIGH	`form-`
6	Data Display	MEDIUM-HIGH	`data-`
7	Layout & Navigation	MEDIUM	`layout-`
8	Component Composition	MEDIUM	`comp-`
9	Performance Optimization	MEDIUM	`perf-`
10	State Management	LOW-MEDIUM	`state-`

Quick Reference

1. CLI & Project Setup (CRITICAL)

setup-components-json - Configure components.json before adding components
setup-path-aliases - Configure TypeScript path aliases to match components.json
setup-cn-utility - Create the cn utility before using components
setup-use-cli-not-copy - Use CLI to add components instead of copy-paste
setup-css-variables-theme - Enable CSS variables for consistent theming
setup-rsc-configuration - Set RSC flag based on framework support

2. Component Architecture (CRITICAL)

arch-use-asChild-for-custom-triggers - Use asChild prop for custom trigger elements
arch-preserve-radix-primitive-structure - Maintain Radix compound component hierarchy
arch-extend-variants-with-cva - Use Class Variance Authority for type-safe variants
arch-use-cn-for-class-merging - Use cn() utility for safe Tailwind class merging
arch-forward-refs-for-composable-components - Forward refs for form and focus integration
arch-isolate-component-variants - Separate base styles from variant-specific styles

3. Accessibility Preservation (CRITICAL)

ally-preserve-aria-attributes - Keep Radix ARIA attributes intact
ally-provide-sr-only-labels - Add screen reader labels for icon buttons
ally-maintain-focus-management - Preserve focus trapping in modals
ally-preserve-keyboard-navigation - Keep WAI-ARIA keyboard patterns
ally-ensure-color-contrast - Maintain WCAG color contrast ratios
ally-dialog-title-required - Always include DialogTitle for screen readers
ally-form-field-labels - Associate labels with form controls
ally-aria-invalid-errors - Use aria-invalid for form error states
ally-checkbox-label-association - Wrap Checkbox with Label for click target
ally-focus-visible-styles - Preserve focus visible styles for keyboard navigation

4. Styling & Theming (HIGH)

style-use-css-variables-for-theming - Use CSS variables for theme colors
style-avoid-important-overrides - Never use !important for style overrides
style-use-tailwind-theme-extend - Extend Tailwind theme for design tokens
style-consistent-spacing-scale - Use consistent Tailwind spacing scale
style-responsive-design-patterns - Apply mobile-first responsive design
style-dark-mode-support - Support dark mode with CSS variables

5. Form Patterns (HIGH)

form-use-react-hook-form-integration - Integrate with React Hook Form
form-use-zod-for-schema-validation - Use Zod for type-safe validation
form-show-validation-errors-correctly - Show errors at appropriate times
form-handle-async-validation - Debounce async validation calls
form-reset-form-state-correctly - Reset form state after submission

6. Data Display (MEDIUM-HIGH)

data-use-tanstack-table-for-complex-tables - Use TanStack Table for sorting/filtering
data-virtualize-large-lists - Virtualize lists with 100+ items
data-use-skeleton-loading-states - Use Skeleton for loading states
data-paginate-server-side - Paginate large datasets server-side
data-empty-states-with-guidance - Provide actionable empty states

7. Layout & Navigation (MEDIUM)

layout-sidebar-provider - Wrap layout with SidebarProvider
layout-sidebar-collapsible - Configure sidebar collapsible behavior
layout-sidebar-groups - Organize sidebar navigation with groups
layout-sheet-mobile-nav - Use Sheet for mobile navigation overlay
layout-breadcrumb-navigation - Implement breadcrumbs for deep navigation

8. Component Composition (MEDIUM)

comp-compose-with-compound-components - Use compound component patterns
comp-use-drawer-for-mobile-modals - Use Drawer on mobile devices
comp-combine-command-with-popover - Create searchable selects with Command
comp-nest-dialogs-correctly - Manage nested dialog focus correctly
comp-create-reusable-form-fields - Extract reusable form field components
comp-use-slot-pattern-for-flexibility - Use slot pattern for flexible content

9. Performance Optimization (MEDIUM)

perf-lazy-load-heavy-components - Lazy load components over 50KB
perf-memoize-expensive-renders - Memoize list items and expensive components
perf-optimize-icon-imports - Use direct imports for Lucide icons
perf-avoid-unnecessary-rerenders-in-forms - Isolate form field watching
perf-debounce-search-inputs - Debounce search and filter inputs

10. State Management (LOW-MEDIUM)

state-prefer-uncontrolled-for-simple-inputs - Use uncontrolled for simple forms
state-lift-state-to-appropriate-level - Lift state to lowest common ancestor
state-use-controlled-dialog-state - Control dialogs for programmatic access
state-colocate-state-with-components - Keep state close to where it's used

How to Use

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules

Full Compiled Document

For a single-file reference containing all rules, see AGENTS.md.

Reference Files

File	Description
AGENTS.md	Complete compiled guide with all rules
references/_sections.md	Category definitions and ordering
assets/templates/_template.md	Template for new rules
metadata.json	Version and reference information