원클릭으로 Manus에서 모든 스킬 실행

amw-shadcn-ui

스타0

포크0

업데이트2026년 7월 8일 23:58

shadcn/ui component usage, theming, forms, charts, and framework integration (Next.js / Vite / Remix / Astro / Laravel / Gatsby). Triggers on "shadcn component", "data-table", "shadcn form", "shadcn theme", "dark mode for shadcn", "install shadcn", registry questions, accessibility of Radix-based components, NOT generic "UI library" or "React component". Use when selecting, theming, or integrating a shadcn/ui component into a project. Trigger with explicit "shadcn" phrasing or component name.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

Emasoft

Emasoft/ai-maestro-webdesign

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

shadcn/ui Reference

Orchestrated by: SKILL.

Overview

Lazy-loaded documentation corpus covering 50+ shadcn/ui components, theming, forms, charts, dark mode, registry, RTL, and per-framework installation (Next.js, Vite, Remix, Astro, Laravel, Gatsby). Reference-only skill — answers shadcn-specific implementation questions once design-principles has set intent. 201 MDX files organized under vendor/. Does not produce designs; routes general UI intent back to the orchestrator.

Instructions

Identify the specific shadcn/ui component or feature from the user's question (component name, theming, framework install, dark mode, registry, forms, charts, RTL).
Read ONLY the relevant MDX file from vendor/: component pages live under vendor/components/radix/<name>.mdx (Radix-based) or vendor/components/base/<name>.mdx (Base UI); install guides under vendor/installation/<framework>.mdx.
Extract the install command, component source, and usage pattern from that single file.
If the question is cross-cutting (theming + a specific component), read the theming page plus the single component page only — never the whole directory.

Full reading strategy, docs-corpus map, activation rules, and detailed notes: see usage-guide.

Position in flow · Trigger conditions · Activation · Prerequisites · Docs structure (vendor/) · Reading strategy (authoritative 4-step) · Non-negotiables · Error handling

Prerequisites

runtime_binaries: none (the docs are static MDX)
Optional companion skill: SKILL — shadcn/ui is Tailwind-native
Runtime peers (in the user's target project, not the plugin): Radix UI primitives, Tailwind CSS, React Hook Form + Zod (for forms), Recharts (for charts)

Examples

Input: user asks "Show me the shadcn data-table component for Next.js." Output: read vendor/components/radix/data-table.mdx, extract the install command (npx shadcn@latest add data-table), the component source TSX block, and the usage pattern. Hand back the three pieces without paraphrasing.

See vendor/components/radix/data-table.mdx, vendor/forms/, vendor/dark-mode/next.mdx, and vendor/installation/next.mdx for worked code examples per component, framework, and feature.

Error Handling

Common failure modes and remediation: see usage-guide. Summary: requested component missing from corpus → surface the gap rather than invent; user confuses shadcn/ui with another UI library → clarify it's a copy-paste recipe layer over Radix + Tailwind; outdated MDX snapshot → recommend consulting ui.shadcn.com.

Output

This skill produces no standalone artifacts — it provides component source snippets and guidance. Any HTML/CSS output is assembled by amw-ascii-to-html or amw-wireframe-builder-agent using the shadcn component source extracted here.

Resources

SKILL — orchestrator
SKILL — Tailwind v4 reference pairs naturally with shadcn
color-system — shadcn uses CSS custom properties; align with design-principles' oklch structure where possible

I. Always prefer oklch over rgb / hex / hsl · Why · Syntax · Comfort ranges · II. WCAG contrast — hard requirement · Checking tools · III. Palette structure (cap at 5–7 colors) · Standard 6-color framework · Rules · IV. Dark mode is not a simple inversion · Wrong approach · Right approach · V. Color temperature · VI. Palette inspiration libraries (use these instead of inventing) · VII. Self-check list
SKILL — extracted tokens from a shadcn-based site feed here
usage-guide — extended usage notes

Position in flow · Trigger conditions · Activation · Prerequisites · Docs structure (vendor/) · Reading strategy (authoritative 4-step) · Non-negotiables · Error handling
vendor/ — the full shadcn/ui documentation corpus (201 MDX)

이 저장소의 다른 Skills

같은 저장소

amw-design-principles

Emasoft/ai-maestro-webdesign

Orchestrator for any web, UI, slide, prototype, or design task. Enforces three hard rules — (1) gather context, (2) produce ≥3 variants, (3) reject AI-slop — and routes to executors. Triggers on "design a page", "landing page", "mockup", "UI for", "prototype", "wireframe", "slide deck", "dashboard", "website". Plan phase runs in ASCII via /amw-sketch; HTML follows approval. Use when the user requests any visual design artifact. Trigger with /amw-sketch.

2026-07-090

amw-design-md

Emasoft/ai-maestro-webdesign

Author, lint, extract, audit, and convert DESIGN.md design-system specifications. Triggers on "create DESIGN.md", "lint DESIGN.md", "extract DESIGN.md from URL/Tailwind/codebase", "audit DESIGN.md", "DESIGN.md companions". Does NOT trigger on generic "design system", "extract design tokens" — those route to amw-design-principles or amw-design-extract. Use when authoring, linting, or converting a DESIGN.md spec. Trigger with /amw-design-md-create.

2026-07-090

amw-diagram-architecture

Emasoft/ai-maestro-webdesign

Convert a free-text system description into a layered architecture diagram (graph JSON, SVG, or PNG). Triggers on "draw my architecture", "architecture diagram for X", "layered diagram", "export architecture as SVG/PNG", "component diagram". Does NOT trigger on "design", "sketch the UI" — routes to design-principles / diagram-editorial. For Mermaid, use `amw-mermaid-diagram`. Use when converting a system description into a layered diagram. Trigger with /amw-create-or-modify-svg-diagram.

2026-07-080

amw-diagram-compare

Emasoft/ai-maestro-webdesign

Structural comparison of two diagrams — diff two flowcharts, compare v1/v2, find what changed, cross-format diagram diff. Triggers on "compare these diagrams", "diff two flowcharts", "what changed between v1 and v2", "structural diff of two diagrams". Source formats may differ (ASCII vs Mermaid is valid). PNG-as-input is refused. Does NOT claim generic design vocabulary — those route to design-principles. Use when comparing two diagrams structurally. Trigger with /amw-compare-diagrams.

2026-07-080

amw-diagram-convert

Emasoft/ai-maestro-webdesign

Cross-format diagram conversion — convert a diagram from one format to another across the 5-format matrix (ASCII, HTML, SVG, Mermaid, PNG). Triggers on "convert this diagram to X", "turn my ASCII into SVG", "convert flowchart to mermaid", "export diagram as PNG". PNG-as-source is refused. Does NOT claim generic design vocabulary — those route to design-principles. Use when converting a diagram across the 5-format matrix. Trigger with /amw-convert-any-diagram-format.

2026-07-080

amw-diagram-editorial

Emasoft/ai-maestro-webdesign

Editorial-quality HTML+SVG diagrams with brand-matched styling — 13 types (architecture, flowchart, sequence, state, ER, timeline, swimlane, quadrant, nested, tree, layer, Venn, pyramid/funnel). Triggers on "sequence diagram", "ER diagram", "blog-ready architecture diagram". NOT for generic design, freeform SVG, or graph JSON — routes to design-principles / svg-creator / diagram-architecture. Use when creating an editorial diagram. Trigger with /amw-create-or-modify-html-diagram.

2026-07-080

name

amw-shadcn-ui

description

shadcn/ui Reference

Orchestrated by: SKILL.

Overview

Instructions

Identify the specific shadcn/ui component or feature from the user's question (component name, theming, framework install, dark mode, registry, forms, charts, RTL).
Read ONLY the relevant MDX file from vendor/: component pages live under vendor/components/radix/<name>.mdx (Radix-based) or vendor/components/base/<name>.mdx (Base UI); install guides under vendor/installation/<framework>.mdx.
Extract the install command, component source, and usage pattern from that single file.
If the question is cross-cutting (theming + a specific component), read the theming page plus the single component page only — never the whole directory.

Full reading strategy, docs-corpus map, activation rules, and detailed notes: see usage-guide.

Position in flow · Trigger conditions · Activation · Prerequisites · Docs structure (vendor/) · Reading strategy (authoritative 4-step) · Non-negotiables · Error handling

Prerequisites

runtime_binaries: none (the docs are static MDX)
Optional companion skill: SKILL — shadcn/ui is Tailwind-native
Runtime peers (in the user's target project, not the plugin): Radix UI primitives, Tailwind CSS, React Hook Form + Zod (for forms), Recharts (for charts)

Examples

See vendor/components/radix/data-table.mdx, vendor/forms/, vendor/dark-mode/next.mdx, and vendor/installation/next.mdx for worked code examples per component, framework, and feature.

Error Handling

Output

Resources

SKILL — orchestrator
SKILL — Tailwind v4 reference pairs naturally with shadcn
color-system — shadcn uses CSS custom properties; align with design-principles' oklch structure where possible

I. Always prefer oklch over rgb / hex / hsl · Why · Syntax · Comfort ranges · II. WCAG contrast — hard requirement · Checking tools · III. Palette structure (cap at 5–7 colors) · Standard 6-color framework · Rules · IV. Dark mode is not a simple inversion · Wrong approach · Right approach · V. Color temperature · VI. Palette inspiration libraries (use these instead of inventing) · VII. Self-check list
SKILL — extracted tokens from a shadcn-based site feed here
usage-guide — extended usage notes

Position in flow · Trigger conditions · Activation · Prerequisites · Docs structure (vendor/) · Reading strategy (authoritative 4-step) · Non-negotiables · Error handling
vendor/ — the full shadcn/ui documentation corpus (201 MDX)