skills.rest
Emasoft
EmasoftCOMMUNITY
Explore all skills by this author →
Website𝕏@fmuaddibGitHub

amw-shadcn-ui

Answers shadcn/ui component, theming, and installation questions from a vendored MDX documentation corpus.

Updated Jul 8, 2026
Search Tags:#theming#documentation#react#component library#tailwind#shadcn#radix ui
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-shadcn-ui-emasoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amw-shadcn-ui
Source: https://github.com/Emasoft/ai-maestro-webdesign/tree/main/skills/amw-shadcn-ui
Command: npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-shadcn-ui-emasoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? When building React interfaces with shadcn/ui, developers constantly need the exact install command, component source, and usage pattern for a specific component, framework, or feature. This Skill provides a lazy-loaded, offline documentation corpus of 201 MDX files covering 50+ shadcn/ui components, so answers come from authoritative docs instead of guesswork. ## Core Features & Use Cases - Component lookup: Reads a single relevant MDX file (e.g. vendor/components/radix/data-table.mdx) and returns the install command, component source TSX, and usage pattern without paraphrasing. - Theming, dark mode, forms, and RTL guidance: Covers CSS-variable theming, per-framework dark-mode recipes (Next.js, Vite, Remix, Astro), React Hook Form + Zod form patterns, and right-to-left layout support. - Framework installation and registry workflows: Per-framework install guides (Next.js, Vite, Remix, Astro, Laravel, Gatsby) plus a registry reference for safely evaluating and installing community component variants with license, test, and maintenance checks. - Use Case: A user asks "Show me the shadcn data-table component for Next.js" and receives the exact npx shadcn@latest add data-table command, the component source, and the usage pattern extracted from the docs. ## Quick Start Ask the assistant to show the shadcn/ui data-table component source and install command for a Next.js project.

Frequently Asked Questions about amw-shadcn-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install a shadcn/ui component like data-table in Next.js?▼

Run `npx shadcn@latest add data-table` in your project after initializing with `npx shadcn@latest init`. The CLI copies the component source into `components/ui/`, installs dependencies, and updates `components.json` to track the install.

What is the difference between shadcn/ui and Radix UI?▼

shadcn/ui is a copy-paste recipe layer built on top of Radix UI primitives and Tailwind CSS, not an npm component library. You own the component source in your project, while Radix provides the underlying accessible primitives.

Does shadcn/ui support dark mode in Next.js?▼

Yes, shadcn/ui supports dark mode through CSS variables and a class-based toggle. The docs include per-framework dark-mode recipes for Next.js, Vite, Remix, and Astro, typically using a theme provider and a mode toggle component.

How do I add shadcn components not in the default registry?▼

Install community variants with `npx shadcn@latest add <registry-url>` or configure namespaced registries in `components.json`. Before installing, verify the variant has an OSS license, tests, and a commit within the last 24 months.

Can shadcn/ui components work with Tailwind CSS v4?▼

Yes, the CLI can initialize projects with Tailwind v4, supports the `@theme` directive, and all components are updated for Tailwind v4 and React 19. Colors are converted to OKLCH and primitives use data-slot attributes for styling.

What should I do if a shadcn component is missing from the docs?▼

Surface the gap rather than inventing an answer, since the vendored corpus is a dated snapshot. Check ui.shadcn.com for post-snapshot changes, or compose the component from Radix primitives and Tailwind styles directly.

Related Skills

Explore More Software Engineering Skills→
brightdatabrightdata
245

design-mirror

Extract design tokens from a website and apply them to Tailwind, CSS variables, or CSS-in-JS.

Official
Advanced
aiunlocked1412aiunlocked1412
14

web-designer-pro

Generate mobile-first wireframes, design tokens, and developer handoff documentation for web pages.

Community
Advanced
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
droppiidroppii

ck:ui-styling

Automate UI styling and component composition for React apps with shadcn/ui and Tailwind.

Official
Advanced