Menú
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/rdmptv/AdbAutoPlayer --skill moai-library-shadcnEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Base navigation patterns for Android device automation - gestures, waits, and UI interaction
Screen understanding with OCR and template matching for Android device automation
Meta-tool for rapid adb-* skill creation from templates
Mostrando SKILL.md
Basado en la clasificación ocupacional SOC
| name | moai-library-shadcn |
| description | Moai Lib Shadcn Ui - Professional implementation guide |
| version | 2.0.0 |
| modularized | true |
| last_updated | "2025-11-30T00:00:00.000Z" |
| compliance_score | 70 |
| auto_trigger_keywords | ["library","shadcn"] |
| color | red |
Comprehensive shadcn/ui expertise with AI-powered design system architecture, Context7 integration, and intelligent component orchestration for modern React applications.
Core Capabilities:
When to Use:
Module Organization:
What is shadcn/ui: shadcn/ui is a collection of re-usable components built with Radix UI and Tailwind CSS. Unlike traditional component libraries, it's not an npm package but rather a collection of components you copy into your project.
Key Benefits:
Architecture Philosophy:
shadcn/ui Components
├── Radix UI Primitives (unstyled, accessible)
├── Tailwind CSS (utility-first styling)
├── TypeScript (type safety)
└── Your Customization (full control)
1. Form Components:
2. Display Components:
3. Navigation Components:
4. Data Components:
5. Feedback Components:
Step 1: Initialize shadcn/ui:
npx shadcn-ui@latest init
Step 2: Configure components.json:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "app/globals.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui"
}
}
Step 3: Add Components:
npx shadcn-ui@latest add button
npx shadcn-ui@latest add form
npx shadcn-ui@latest add dialog
React 19:
TypeScript 5.5:
Tailwind CSS 3.4:
Radix UI:
Integration Stack:
# AI-powered shadcn/ui architecture optimization with Context7
class ShadcnUIArchitectOptimizer:
def __init__(self):
self.context7_client = Context7Client()
self.component_analyzer = ComponentAnalyzer()
self.theme_optimizer = ThemeOptimizer()
async def design_optimal_shadcn_architecture(self,
requirements: DesignSystemRequirements) -> ShadcnUIArchitecture:
"""Design optimal shadcn/ui architecture using AI analysis."""
# Get latest shadcn/ui and React documentation via Context7
shadcn_docs = await self.context7_client.get_library_docs(
context7_library_id='/shadcn-ui/docs',
topic="component library design system theming accessibility 2025",
tokens=3000
)
react_docs = await self.context7_client.get_library_docs(
context7_library_id='/react/docs',
topic="hooks server-components performance optimization 2025",
tokens=2000
)
# Optimize component selection
component_selection = self.component_analyzer.optimize_component_selection(
requirements.ui_components,
requirements.user_needs,
shadcn_docs
)
# Optimize theme configuration
theme_configuration = self.theme_optimizer.optimize_theme_system(
requirements.brand_guidelines,
requirements.accessibility_requirements,
shadcn_docs
)
return ShadcnUIArchitecture(
component_library=component_selection,
theme_system=theme_configuration,
accessibility_compliance=self._ensure_accessibility_compliance(
requirements.accessibility_requirements
),
performance_optimization=self._optimize_component_performance(
component_selection
),
integration_patterns=self._design_integration_patterns(
requirements.framework_stack
),
customization_strategy=self._plan_customization_strategy(
requirements.customization_needs
)
)
DO:
DON'T:
Bundle Size:
Runtime Performance:
Accessibility:
Composable Pattern:
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
export function DashboardCard({ title, children }) {
return (
<Card>
<CardHeader>
<CardTitle>{title}</CardTitle>
</CardHeader>
<CardContent>
{children}
</CardContent>
</Card>
);
}
Zod + React Hook Form:
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
const formSchema = z.object({
email: z.string().email(),
password: z.string().min(8),
});
type FormValues = z.infer<typeof formSchema>;
export function LoginForm() {
const form = useForm<FormValues>({
resolver: zodResolver(formSchema),
});
return (
<form onSubmit={form.handleSubmit(onSubmit)}>
{/* Form fields */}
</form>
);
}
moai-foundation-uiux - Design system architecture and foundationsmoai-lang-unified - TypeScript best practicescode-frontend - Frontend development patternsRelated Libraries:
Official Documentation:
Latest Versions (November 2025):
Last Updated: 2025-11-21 Status: Production Ready