@minhduydev/mdpi 0.3.0

package/dist/template/.pi/skills/frontend-design/references/shadcn/form-components.md

@@ -0,0 +1,158 @@
+# shadcn/ui Form Components
+
+Form, Field, Input Group, and new 2026 components.
+
+## Form (React Hook Form + Zod)
+
+```tsx
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
+
+const schema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8)
+})
+
+function LoginForm() {
+  const form = useForm({ resolver: zodResolver(schema), defaultValues: { email: "", password: "" } })
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
+        <FormField control={form.control} name="email" render={({ field }) => (
+          <FormItem>
+            <FormLabel>Email</FormLabel>
+            <FormControl><Input type="email" {...field} /></FormControl>
+            <FormMessage />
+          </FormItem>
+        )} />
+        <Button type="submit">Sign In</Button>
+      </form>
+    </Form>
+  )
+}
+```
+
+## Field (2026)
+
+Simpler form abstraction:
+
+```tsx
+import { Field, FieldLabel, FieldDescription, FieldGroup, FieldSet } from "@/components/ui/field"
+
+<FieldSet>
+  <FieldGroup>
+    <Field>
+      <FieldLabel htmlFor="email">Email</FieldLabel>
+      <Input id="email" type="email" />
+      <FieldDescription>Never shared.</FieldDescription>
+    </Field>
+    <Field orientation="horizontal">
+      <Checkbox id="terms" />
+      <FieldLabel htmlFor="terms">Accept terms</FieldLabel>
+    </Field>
+  </FieldGroup>
+</FieldSet>
+
+<!-- Responsive layout -->
+<Field orientation="responsive">
+  <FieldContent>
+    <FieldLabel>Name</FieldLabel>
+    <FieldDescription>Display name</FieldDescription>
+  </FieldContent>
+  <Input placeholder="Evil Rabbit" />
+</Field>
+```
+
+## Input Group (2026)
+
+```tsx
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton } from "@/components/ui/input-group"
+
+<InputGroup>
+  <InputGroupAddon><SearchIcon /></InputGroupAddon>
+  <InputGroupInput placeholder="Search..." />
+</InputGroup>
+
+<InputGroup>
+  <InputGroupAddon>https://</InputGroupAddon>
+  <InputGroupInput placeholder="example.com" />
+  <InputGroupAddon align="inline-end">
+    <InputGroupButton>Go</InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```
+
+## Spinner (2026)
+
+```tsx
+import { Spinner } from "@/components/ui/spinner"
+
+<Spinner />
+
+<Button disabled>
+  <Spinner />Loading...
+</Button>
+```
+
+## Kbd (2026)
+
+```tsx
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
+
+<KbdGroup>
+  <Kbd>Cmd</Kbd>
+  <Kbd>K</Kbd>
+</KbdGroup>
+```
+
+## Button Group (2026)
+
+```tsx
+import { ButtonGroup } from "@/components/ui/button-group"
+
+<ButtonGroup>
+  <Button>Archive</Button>
+  <Button>Report</Button>
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <Button size="icon"><MoreIcon /></Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>...</DropdownMenuContent>
+  </DropdownMenu>
+</ButtonGroup>
+```
+
+## Item (2026)
+
+```tsx
+import { Item, ItemContent, ItemMedia, ItemTitle, ItemDescription, ItemActions } from "@/components/ui/item"
+
+<Item variant="outline">
+  <ItemMedia variant="icon"><UserIcon /></ItemMedia>
+  <ItemContent>
+    <ItemTitle>Profile</ItemTitle>
+    <ItemDescription>Manage account</ItemDescription>
+  </ItemContent>
+  <ItemActions><Button size="sm">Edit</Button></ItemActions>
+</Item>
+
+<Item asChild>
+  <a href="/dashboard"><ItemContent><ItemTitle>Dashboard</ItemTitle></ItemContent></a>
+</Item>
+```
+
+## Empty (2026)
+
+```tsx
+import { Empty, EmptyIcon, EmptyTitle, EmptyDescription, EmptyActions } from "@/components/ui/empty"
+
+<Empty>
+  <EmptyIcon><InboxIcon /></EmptyIcon>
+  <EmptyTitle>No messages</EmptyTitle>
+  <EmptyDescription>Send your first message.</EmptyDescription>
+  <EmptyActions><Button>New Message</Button></EmptyActions>
+</Empty>
+```

package/dist/template/.pi/skills/frontend-design/references/shadcn/setup.md

@@ -0,0 +1,69 @@
+# shadcn/ui Setup
+
+CLI v3.6.x (current: v3.6.3) - Copy-paste components, Radix UI + Tailwind v4.
+
+## New Project
+
+```bash
+npx shadcn create
+```
+
+Interactive setup:
+- Visual style: Vega, Nova, Maia, Lyra, Mira
+- Component library: Radix UI or Base UI
+- Icon library (including Phosphor)
+- Next.js 16 support
+
+## Existing Project
+
+```bash
+npx shadcn@latest init
+npx shadcn@latest add button card dialog
+npx shadcn@latest add --all
+```
+
+Components install to `components/ui/`.
+
+## Visual Styles
+
+| Style | Description |
+|-------|-------------|
+| **Vega** | Classic shadcn look |
+| **Nova** | Reduced padding, compact |
+| **Maia** | Soft, rounded, generous |
+| **Lyra** | Boxy, sharp, mono fonts |
+| **Mira** | Compact, dense interfaces |
+
+## Component Libraries
+
+- **Radix UI** (default): Full accessibility, React-only
+- **Base UI**: MUI unstyled components
+
+Select during `npx shadcn create` or in `components.json`.
+
+## MCP Server Support
+
+- OpenCode MCP (v3.6.3)
+- Codex MCP (v3.4.0)
+
+## Registry System
+
+- Registry Directory: https://ui.shadcn.com/docs/directory
+- Custom registries via `components.json`
+- Namespaced components
+
+## Component List
+
+**Layout**: Card, Sidebar, Separator, Resizable, Scroll Area
+
+**Forms**: Button, Input, Textarea, Select, Checkbox, Radio Group, Switch, Slider, Form, Field, Input Group, Label
+
+**Feedback**: Alert, Alert Dialog, Dialog, Drawer, Sheet, Toast (Sonner), Progress, Spinner, Skeleton
+
+**Navigation**: Tabs, Accordion, Breadcrumb, Navigation Menu, Menubar, Pagination, Command
+
+**Data Display**: Table, Avatar, Badge, Hover Card, Tooltip, Calendar, Carousel, Chart
+
+**Overlay**: Dropdown Menu, Context Menu, Popover, Collapsible
+
+**Other**: Toggle, Toggle Group, Kbd, Button Group, Item, Empty, Input OTP

package/dist/template/.pi/skills/frontend-design/references/shadcn/theming.md

@@ -0,0 +1,152 @@
+# shadcn/ui Theming
+
+CSS variables, OKLCH colors, dark mode for Tailwind v4.
+
+## CSS Variables
+
+```css
+@import "tailwindcss";
+
+@theme {
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.15 0.02 264);
+  
+  --color-primary: oklch(0.55 0.22 264);
+  --color-primary-foreground: oklch(0.98 0.01 264);
+  
+  --color-secondary: oklch(0.96 0.01 264);
+  --color-secondary-foreground: oklch(0.15 0.02 264);
+  
+  --color-muted: oklch(0.96 0.01 264);
+  --color-muted-foreground: oklch(0.55 0.02 264);
+  
+  --color-destructive: oklch(0.55 0.22 25);
+  --color-border: oklch(0.90 0.01 264);
+  --color-ring: oklch(0.55 0.22 264);
+  
+  --radius: 0.5rem;
+}
+```
+
+## OKLCH Format
+
+```
+oklch(L C H)
+     │ │ └─ Hue (0-360)
+     │ └─── Chroma (0-0.4)
+     └───── Lightness (0-1)
+```
+
+Benefits: perceptually uniform, wider P3 gamut, better gradients.
+
+```css
+--color-brand-50: oklch(0.98 0.02 250);
+--color-brand-500: oklch(0.65 0.22 250);
+--color-brand-900: oklch(0.25 0.15 250);
+```
+
+## Dark Mode Setup
+
+```bash
+npm install next-themes
+```
+
+```tsx
+// components/theme-provider.tsx
+"use client"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({ children, ...props }) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
+
+// app/layout.tsx
+<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+  {children}
+</ThemeProvider>
+```
+
+## Theme Toggle
+
+```tsx
+import { useTheme } from "next-themes"
+
+export function ThemeToggle() {
+  const { setTheme, theme } = useTheme()
+  return (
+    <Button variant="ghost" size="icon" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
+      <Sun className="h-5 w-5 dark:hidden" />
+      <Moon className="h-5 w-5 hidden dark:block" />
+    </Button>
+  )
+}
+```
+
+## Dark Mode Colors
+
+```css
+.dark {
+  --color-background: oklch(0.15 0.02 264);
+  --color-foreground: oklch(0.98 0.01 264);
+  --color-primary: oklch(0.75 0.18 264);
+  --color-muted: oklch(0.25 0.02 264);
+  --color-border: oklch(0.30 0.02 264);
+}
+```
+
+## Multiple Themes
+
+```css
+[data-theme="violet"] { --color-primary: oklch(0.55 0.25 290); }
+[data-theme="rose"] { --color-primary: oklch(0.60 0.22 350); }
+```
+
+```tsx
+<div data-theme="violet"><Button>Violet</Button></div>
+```
+
+## Custom Button Variants
+
+```tsx
+const buttonVariants = cva("...", {
+  variants: {
+    variant: {
+      gradient: "bg-gradient-to-r from-violet-500 to-pink-500 text-white",
+      glass: "bg-white/10 backdrop-blur-md border border-white/20",
+    },
+    size: {
+      xl: "h-14 rounded-lg px-10 text-lg",
+    },
+  },
+})
+```
+
+## Radius
+
+```css
+@theme {
+  --radius: 0.5rem;    /* Default */
+  /* --radius: 0rem;   /* Sharp */
+  /* --radius: 1rem;   /* Rounded */
+}
+```
+
+Components use: `rounded-lg` (--radius), `rounded-md` (--radius - 2px).
+
+## Typography
+
+```css
+@theme {
+  --font-sans: "Inter", system-ui, sans-serif;
+  --font-display: "Playfair Display", serif;
+  --font-mono: "JetBrains Mono", monospace;
+}
+```
+
+## Best Practices
+
+1. Use CSS variables for runtime switching
+2. OKLCH for gradients and accessibility
+3. Semantic naming (primary, not blue)
+4. Test both themes
+5. Maintain WCAG AA contrast (4.5:1)

package/dist/template/.pi/skills/frontend-design/references/tailwind/responsive.md

@@ -0,0 +1,112 @@
+# Tailwind Responsive Design
+
+Mobile-first breakpoints, container queries.
+
+## Mobile-First
+
+Base styles apply to all. Breakpoint prefixes override at larger sizes.
+```html
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
+```
+
+## Breakpoints
+
+| Prefix | Min Width |
+|--------|-----------|
+| `sm:` | 640px |
+| `md:` | 768px |
+| `lg:` | 1024px |
+| `xl:` | 1280px |
+| `2xl:` | 1536px |
+
+Custom (v4):
+```css
+@theme {
+  --breakpoint-3xl: 1920px;
+}
+```
+
+## Common Patterns
+
+```html
+<!-- Stack to row -->
+<div class="flex flex-col lg:flex-row gap-4">
+
+<!-- Grid columns -->
+<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
+
+<!-- Visibility -->
+<div class="hidden lg:block">Desktop only</div>
+<div class="block lg:hidden">Mobile only</div>
+
+<!-- Typography -->
+<h1 class="text-2xl md:text-4xl lg:text-6xl">
+
+<!-- Spacing -->
+<div class="p-4 md:p-6 lg:p-8">
+
+<!-- Width -->
+<div class="w-full lg:w-1/2 xl:w-1/3">
+```
+
+## Layout Examples
+
+### Sidebar
+```html
+<div class="flex flex-col lg:flex-row min-h-screen">
+  <aside class="w-full lg:w-64 bg-gray-100 p-4">Sidebar</aside>
+  <main class="flex-1 p-4 md:p-8">Main</main>
+</div>
+```
+
+### Card Grid
+```html
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
+  <div class="bg-white rounded-lg shadow p-6">Card</div>
+</div>
+```
+
+### Navigation
+```html
+<nav class="flex items-center justify-between h-16">
+  <div class="text-xl font-bold">Logo</div>
+  <div class="hidden md:flex gap-6">Links</div>
+  <button class="md:hidden">Menu</button>
+</nav>
+```
+
+## Max-Width Queries
+
+```html
+<div class="max-lg:text-center">Below lg</div>
+<div class="max-sm:hidden">Below sm</div>
+```
+
+## Container Queries (v4)
+
+Style based on container, not viewport:
+```html
+<div class="@container">
+  <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-4">
+</div>
+```
+
+Breakpoints: `@sm:`, `@md:`, `@lg:`, `@xl:`, `@2xl:`
+
+Max-width: `@max-md:grid-cols-1`
+Range: `@min-md:@max-xl:hidden`
+
+## Responsive + State
+
+```html
+<button class="lg:hover:scale-105">
+<a class="hover:text-blue-600 lg:hover:text-purple-600">
+```
+
+## Best Practices
+
+1. Mobile-first: start mobile, add complexity larger
+2. Consistent breakpoints across related elements
+3. Test at exact breakpoint widths
+4. 2-3 breakpoints per element max
+5. Verify touch targets min 44x44px

package/dist/template/.pi/skills/frontend-design/references/tailwind/utilities-layout.md

@@ -0,0 +1,134 @@
+# Tailwind Layout Utilities
+
+Display, flexbox, grid, positioning, z-index.
+
+## Display
+
+```html
+<div class="block">Block</div>
+<div class="inline-block">Inline Block</div>
+<div class="flex">Flexbox</div>
+<div class="inline-flex">Inline Flex</div>
+<div class="grid">Grid</div>
+<div class="hidden">Hidden</div>
+```
+
+## Flexbox
+
+```html
+<!-- Direction -->
+<div class="flex flex-row">Row</div>
+<div class="flex flex-col">Column</div>
+<div class="flex flex-row-reverse">Reverse</div>
+
+<!-- Justify (main axis) -->
+<div class="flex justify-start">Start</div>
+<div class="flex justify-center">Center</div>
+<div class="flex justify-end">End</div>
+<div class="flex justify-between">Between</div>
+<div class="flex justify-evenly">Evenly</div>
+
+<!-- Align (cross axis) -->
+<div class="flex items-start">Start</div>
+<div class="flex items-center">Center</div>
+<div class="flex items-end">End</div>
+<div class="flex items-stretch">Stretch</div>
+
+<!-- Gap -->
+<div class="flex gap-4">All</div>
+<div class="flex gap-x-6 gap-y-2">X/Y</div>
+
+<!-- Wrap -->
+<div class="flex flex-wrap">Wrap</div>
+<div class="flex flex-nowrap">No wrap</div>
+```
+
+## Grid
+
+```html
+<!-- Columns (v4: any number) -->
+<div class="grid grid-cols-1">1 col</div>
+<div class="grid grid-cols-3">3 cols</div>
+<div class="grid grid-cols-12">12 cols</div>
+<div class="grid grid-cols-15">15 cols (v4)</div>
+
+<!-- Custom grid -->
+<div class="grid grid-cols-[1fr_500px_2fr]">Custom</div>
+
+<!-- Span -->
+<div class="col-span-2">Span 2</div>
+<div class="row-span-3">Span 3 rows</div>
+
+<!-- Gap -->
+<div class="grid gap-4">All</div>
+<div class="grid gap-x-8 gap-y-4">X/Y</div>
+```
+
+## Positioning
+
+```html
+<div class="static">Static</div>
+<div class="relative">Relative</div>
+<div class="absolute">Absolute</div>
+<div class="fixed">Fixed</div>
+<div class="sticky">Sticky</div>
+
+<!-- Position values -->
+<div class="absolute top-0 right-0">Top right</div>
+<div class="absolute inset-0">All 0</div>
+<div class="absolute inset-x-4">Left/right 4</div>
+```
+
+## Z-Index
+
+```html
+<div class="z-0">0</div>
+<div class="z-10">10</div>
+<div class="z-50">50</div>
+<div class="z-[100]">Custom</div>
+```
+
+## Width & Height
+
+```html
+<!-- Width -->
+<div class="w-full">100%</div>
+<div class="w-1/2">50%</div>
+<div class="w-64">16rem</div>
+<div class="w-[500px]">500px</div>
+<div class="w-screen">100vw</div>
+
+<!-- Max width -->
+<div class="max-w-md">28rem</div>
+<div class="max-w-screen-xl">1280px</div>
+
+<!-- Height -->
+<div class="h-full">100%</div>
+<div class="h-screen">100vh</div>
+<div class="min-h-screen">min 100vh</div>
+```
+
+## Aspect Ratio
+
+```html
+<div class="aspect-square">1:1</div>
+<div class="aspect-video">16:9</div>
+<div class="aspect-[4/3]">4:3</div>
+```
+
+## Overflow
+
+```html
+<div class="overflow-auto">Auto scroll</div>
+<div class="overflow-hidden">Hidden</div>
+<div class="overflow-x-auto">Horizontal scroll</div>
+```
+
+## Responsive Order
+
+```html
+<div class="flex flex-col">
+  <div class="order-2 lg:order-1">First on desktop</div>
+  <div class="order-1 lg:order-2">First on mobile</div>
+</div>
+```