shadcn-impl-framework-integration

Official

Init shadcn correctly per framework

AuthorImpertio-Studio
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Prevents recurring shadcn ui initialization failures where the wrong template flag, mismatched RSC setting, or unsynced alias/theme wiring causes broken runtime behavior or missing client boundaries across frameworks.

Core Features & Use Cases

  • Per-framework init correctness: selects the right init template flag (-t next|vite|react-router|astro|start) and ensures components.json defaults match the framework’s actual rendering model.
  • RSC vs client boundary safety: diagnoses and fixes issues caused by incorrect components.json.rsc values that lead to missing "use client" directives in Vite or incorrect client bundles in Next.js.
  • Alias and theming wiring: ensures @/*/~/* alias resolution works at both TypeScript and bundler/runtime levels, and applies the correct ThemeProvider strategy for Next.js (next-themes), Vite/React Router/TanStack Start (custom React Context), and Astro (inline pre-hydration script).

Quick Start

Tell the AI: "I’m setting up shadcn ui in a Vite/Next.js/Astro/TanStack Start/React Router v7 project and my dark mode or imports don’t work—what exact init flag, components.json.rsc, alias config, and ThemeProvider pattern should I use?"

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: shadcn-impl-framework-integration
Download link: https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package/archive/main.zip#shadcn-impl-framework-integration

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.