// Use when extending AniTrend UI primitives with shadcn, cva, asChild, or Tailwind tokens instead of duplicating components or scattering raw classes.
| name | anitrend-shadcn-extension-patterns |
| description | Use when extending AniTrend UI primitives with shadcn, cva, asChild, or Tailwind tokens instead of duplicating components or scattering raw classes. |
| argument-hint | Which primitive or UI pattern needs extending? |
Use this skill when a UI change belongs in an existing primitive, variant, or wrapper rather than a brand new component tree. Prefer extension over duplication.
src/components/ui/**cva variantLink or custom interactive elements with asChildDo not use this skill for route metadata or app-handoff decisions unless the component also emits an app CTA.
| Need | Prefer |
|---|---|
| named visual state or size | cva variant |
| small composition around an existing primitive | wrapper with asChild where appropriate |
| one-off local layout detail | inline Tailwind classes |
src/components/ui/**.cn() and existing tokens before introducing new raw values.cva variant when consumers need intentional switching.src/components/ui/button.tsxsrc/lib/utils.tssrc/app/globals.csstailwind.config.tsasChild and creating unnecessary wrapper markupUse when implementing or reviewing deeplinks, Open in App CTAs, dashboard shortcuts, and web-to-app handoff decisions across the AniTrend website.
Use when working autonomously in the AniTrend website repository and needing project-specific conventions, CI requirements, tool choices, or implementation patterns before making changes.
Use when implementing or reviewing Next.js App Router metadata, Open Graph, Twitter cards, and social preview consistency across AniTrend routes.
Use when adding or editing Next.js App Router pages, React components, or Tailwind styles in the AniTrend website and you need guidance on server vs client boundaries, metadata, state placement, shadcn/ui reuse, or token-based responsive styling.