@ez-cook/nano-peaces 0.1.0

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@ez-cook/nano-peaces",
+  "version": "0.1.0",
+  "description": "The missing UI skills pack for AI agents",
+  "type": "module",
+  "bin": {
+    "nano-peaces": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "skills",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup && node scripts/copy-skills.js",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "commander": "^13.0.0",
+    "@clack/prompts": "^0.9.0",
+    "fast-glob": "^3.3.0",
+    "fs-extra": "^11.2.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "tsup": "^8.4.0",
+    "@types/fs-extra": "^11.0.0",
+    "@types/node": "^22.0.0"
+  },
+  "keywords": [
+    "ai",
+    "agent",
+    "ui",
+    "skills",
+    "shadcn",
+    "cli",
+    "antigravity",
+    "claude",
+    "cursor",
+    "ez-cook",
+    "nano-peaces"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ez-cook/nano-peaces"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/skills/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@ez-cook/skills",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Skill content for nano-peaces — source of truth",
+  "scripts": {
+    "typecheck": "echo 'No TypeScript in skills package'"
+  },
+  "license": "MIT"
+}

package/skills/registry.json

@@ -0,0 +1,56 @@
+{
+  "version": "0.1.0",
+  "skills": [
+    {
+      "id": "shadcn-ui",
+      "description": "Expert shadcn/ui knowledge for AI agents (2026)",
+      "signals": {
+        "dependencies": [
+          "radix-ui",
+          "@radix-ui/*",
+          "@base-ui-components/*",
+          "tailwindcss",
+          "class-variance-authority",
+          "tailwind-merge",
+          "clsx",
+          "lucide-react",
+          "@tabler/icons-react",
+          "tw-animate-css"
+        ],
+        "filePatterns": ["**/components/ui/**", "**/ui/*.tsx", "**/ui/*.jsx", "components.json"],
+        "keywords": [
+          "shadcn",
+          "button variant",
+          "dialog",
+          "sheet",
+          "command palette",
+          "combobox",
+          "data table",
+          "form validation",
+          "sidebar",
+          "dropdown",
+          "field component",
+          "sonner toast",
+          "asChild",
+          "cn() utility"
+        ],
+        "taskIntent": [
+          "create component",
+          "build form",
+          "add UI element",
+          "style component",
+          "add dialog",
+          "create table",
+          "setup shadcn",
+          "add shadcn component",
+          "add sidebar",
+          "dark mode",
+          "build data table",
+          "add toast notification"
+        ]
+      },
+      "priority": 1,
+      "skillPath": "shadcn-ui/SKILL.md"
+    }
+  ]
+}

package/skills/shadcn-ui/SKILL.md

@@ -0,0 +1,99 @@
+---
+name: shadcn-ui
+description: 'Expert knowledge for building UI with shadcn/ui (2026). Activated when: project uses radix-ui or @base-ui-components/*, tailwindcss. Covers: component generation, theming, forms (Field+Controller pattern), data tables (TanStack Table), sidebar, accessibility, RTL, MCP, registry.'
+metadata:
+  version: 1.0.0
+  tags: [ui, react, tailwind, shadcn, components, radix, base-ui, field, registry]
+  requires: [react, tailwindcss]
+---
+
+# shadcn/ui Skill
+
+## Mental Model
+
+shadcn/ui is NOT a library. It's a code distribution platform.
+You COPY components into your project and OWN them.
+Never `npm install shadcn` — use `npx shadcn@latest add [component]`.
+Since Feb 2026: imports use unified `radix-ui` (not `@radix-ui/react-*`).
+Dual primitive support: Radix UI or Base UI — same API, different engine.
+
+## Context Router
+
+| User Intent                  | Load Chunk                      | When                                                 |
+| ---------------------------- | ------------------------------- | ---------------------------------------------------- |
+| Create button, card, badge   | chunks/components/button.md     | Mentions specific component name                     |
+| Build form with validation   | chunks/components/form.md       | Mentions form, input, validation, zod, Field         |
+| Add data table               | chunks/components/data-table.md | Mentions table, sorting, filtering, pagination       |
+| Add dialog, sheet, drawer    | chunks/components/dialog.md     | Mentions modal, popup, overlay, sheet                |
+| Build sidebar / navigation   | chunks/components/sidebar.md    | Mentions sidebar, nav, collapsible menu              |
+| Setup/install shadcn         | chunks/installation.md          | New project or first shadcn mention                  |
+| Theme, dark mode, colors     | chunks/theming.md               | Mentions theme, dark, colors, CSS variables, oklch   |
+| components.json config       | chunks/config.md                | Mentions config, aliases, registry, monorepo setup   |
+| Breadcrumb, tabs, pagination | chunks/patterns/navigation.md   | Mentions breadcrumb, tabs, nav-menu, pagination      |
+| cn(), asChild, cva, extend   | chunks/patterns/composition.md  | Mentions composition, variants, extending components |
+| Something went wrong         | chunks/anti-patterns.md         | User reports bug or unexpected behavior              |
+
+## Quick Reference (Top Patterns)
+
+### Add a component
+
+```bash
+npx shadcn@latest add button
+```
+
+### New project (choose Radix or Base UI)
+
+```bash
+npx shadcn@latest create
+```
+
+### Button variants & sizes
+
+```tsx
+<Button variant="default" />      // primary
+<Button variant="destructive" />  // danger
+<Button variant="outline" />      // bordered
+<Button variant="secondary" />    // muted
+<Button variant="ghost" />        // no border
+<Button variant="link" />         // text link
+
+// sizes: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg"
+<Button size="sm">Small</Button>
+```
+
+### cn() utility (ALWAYS use this for conditional classes)
+
+```tsx
+import { cn } from '@/lib/utils'
+;<div className={cn('base-class', condition && 'conditional-class')} />
+```
+
+### Icon spacing (REQUIRED for icons in buttons/menu items)
+
+```tsx
+<Button>
+  <IconGitBranch data-icon="inline-start" /> New Branch
+</Button>
+```
+
+### Imports (2026 — unified package)
+
+```tsx
+// ✅ Correct (2026)
+import { Dialog as DialogPrimitive } from 'radix-ui'
+// ❌ Deprecated
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+```
+
+## Critical Rules
+
+1. NEVER install shadcn as npm dependency — always use CLI `add`
+2. ALWAYS use `cn()` for class merging (not template literals)
+3. ALWAYS check components.json for project config before generating
+4. Components go in the path specified by components.json `aliases.ui`
+5. Use `asChild` prop (Radix Slot) for polymorphic rendering
+6. Import from `radix-ui` unified package (not `@radix-ui/react-*`)
+7. Use `data-icon="inline-start"|"inline-end"` on icons inside buttons
+8. Use `data-invalid` on Field + `aria-invalid` on controls for error states
+9. Tailwind v4: button has `cursor: default` — add CSS override if need pointer
+10. `use client` directive required for interactive components when RSC is enabled

package/skills/shadcn-ui/chunks/anti-patterns.md

@@ -0,0 +1,97 @@
+# Anti-Patterns & Common Mistakes — shadcn/ui
+
+## Critical Anti-Patterns Table
+
+| ❌ Mistake                             | ✅ Correct                                    | Why                                           |
+| -------------------------------------- | --------------------------------------------- | --------------------------------------------- |
+| `npm install shadcn`                   | `npx shadcn@latest add button`                | shadcn is a CLI tool, not an npm package      |
+| `import from "@radix-ui/react-dialog"` | `import { Dialog } from "radix-ui"`           | Unified package since Feb 2026                |
+| `<Form><FormField>` pattern            | `<Controller><Field>` pattern                 | Old form API deprecated in 2026               |
+| Template literal class merge           | `cn()` utility                                | tailwind-merge handles class conflicts        |
+| Hardcode `@/components/ui`             | Read `aliases.ui` from components.json        | Path varies per project configuration         |
+| Skip `"use client"`                    | Check `rsc` in components.json                | RSC won't render interactive components       |
+| Style `default`                        | Style `new-york` or nova variants             | `default` style is deprecated                 |
+| Manual validation in form              | Zod schema + zodResolver                      | Standard Schema + react-hook-form integration |
+| `cursor: pointer` assumed              | Tailwind v4 uses `cursor: default` on buttons | Add CSS override if needed                    |
+| Skip `data-invalid`/`aria-invalid`     | Required for accessible error states          | a11y compliance                               |
+
+## Deprecated Patterns (2026)
+
+### Old Radix Imports
+
+```tsx
+// ❌ Deprecated
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+
+// ✅ Correct — unified package
+import { Dialog as DialogPrimitive } from 'radix-ui'
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui'
+
+// Migration command:
+// npx shadcn@latest migrate radix
+```
+
+### Old Form Pattern
+
+```tsx
+// ❌ Deprecated
+<Form {...form}>
+  <FormField
+    control={form.control}
+    name="username"
+    render={({ field }) => (
+      <FormItem>
+        <FormLabel>Username</FormLabel>
+        <FormControl><Input {...field} /></FormControl>
+        <FormMessage />
+      </FormItem>
+    )}
+  />
+</Form>
+
+// ✅ Correct (2026)
+<form onSubmit={form.handleSubmit(onSubmit)}>
+  <Controller
+    name="username"
+    control={form.control}
+    render={({ field, fieldState }) => (
+      <Field data-invalid={fieldState.invalid || undefined}>
+        <FieldLabel>Username</FieldLabel>
+        <Input {...field} aria-invalid={fieldState.invalid || undefined} />
+        {fieldState.error && <FieldError errors={[fieldState.error]} />}
+      </Field>
+    )}
+  />
+</form>
+```
+
+## Common Runtime Errors
+
+### Missing "use client"
+
+**Error:** Component renders as empty or hydration mismatch
+**Fix:** Add `"use client"` at top of file for any component using hooks, event handlers, or browser APIs
+
+### Wrong Alias Path
+
+**Error:** `Module not found: Can't resolve '@/components/ui/button'`
+**Fix:** Check `components.json` → `aliases.ui` matches your tsconfig paths
+
+### Missing DialogTitle
+
+**Error:** Console warning about missing accessible name
+**Fix:** Always include `<DialogTitle>` (use `<VisuallyHidden>` if you don't want visible title)
+
+### className Conflicts
+
+**Error:** Styles not applying or overriding unexpectedly
+**Fix:** Always use `cn()` to merge classes — never concatenate strings
+
+## Migration Commands
+
+```bash
+npx shadcn@latest migrate radix    # @radix-ui/react-* → radix-ui
+npx shadcn@latest migrate rtl      # physical → logical CSS classes
+npx shadcn@latest migrate icons    # switch icon library
+```

package/skills/shadcn-ui/chunks/components/button.md

@@ -0,0 +1,96 @@
+# Button — shadcn/ui
+
+## Install
+
+```bash
+npx shadcn@latest add button
+```
+
+## Variants
+
+```tsx
+<Button variant="default" />      // primary — solid background
+<Button variant="destructive" />  // danger — red
+<Button variant="outline" />      // bordered — transparent bg
+<Button variant="secondary" />    // muted — subtle background
+<Button variant="ghost" />        // no border, hover only
+<Button variant="link" />         // looks like a text link
+```
+
+## Sizes
+
+```tsx
+<Button size="default" />   // h-9 px-4 py-2
+<Button size="xs" />        // h-7 px-2.5 text-xs
+<Button size="sm" />        // h-8 px-3
+<Button size="lg" />        // h-10 px-6
+<Button size="icon" />      // h-9 w-9 (square)
+<Button size="icon-xs" />   // h-7 w-7
+<Button size="icon-sm" />   // h-8 w-8
+<Button size="icon-lg" />   // h-10 w-10
+```
+
+## Icon Usage (REQUIRED pattern)
+
+```tsx
+// data-icon adds correct spacing automatically
+<Button>
+  <IconPlus data-icon="inline-start" />
+  Add Item
+</Button>
+
+<Button>
+  Settings
+  <IconChevronRight data-icon="inline-end" />
+</Button>
+
+// Icon-only button
+<Button size="icon" aria-label="Settings">
+  <IconSettings />
+</Button>
+```
+
+## Button as Link (asChild)
+
+```tsx
+<Button asChild>
+  <Link href="/dashboard">Go to Dashboard</Link>
+</Button>
+```
+
+## Loading State
+
+```tsx
+<Button disabled>
+  <Spinner data-icon="inline-start" />
+  Saving...
+</Button>
+```
+
+## Button Group
+
+```tsx
+<ButtonGroup>
+  <Button variant="outline">Left</Button>
+  <Button variant="outline">Center</Button>
+  <Button variant="outline">Right</Button>
+</ButtonGroup>
+```
+
+## Cursor Override (Tailwind v4)
+
+Tailwind v4 sets `cursor: default` on buttons. If you need pointer cursor:
+
+```css
+/* globals.css */
+button:not(:disabled) {
+  cursor: pointer;
+}
+```
+
+## Anti-patterns
+
+- ❌ Don't merge classNames with template literals — use `cn()`
+- ❌ Don't wrap Button in `<a>` — use `asChild` with `<Link>`
+- ❌ Don't forget `aria-label` on icon-only buttons
+- ❌ Don't forget `data-icon` on icons — spacing will be wrong without it

package/skills/shadcn-ui/chunks/components/data-table.md

@@ -0,0 +1,156 @@
+# Data Table — shadcn/ui + TanStack Table
+
+## Stack
+
+```bash
+npx shadcn@latest add table
+npm i @tanstack/react-table
+```
+
+## File Structure
+
+```
+app/payments/
+  ├── columns.tsx      ← column definitions (client component)
+  ├── data-table.tsx   ← DataTable component (client component)
+  └── page.tsx         ← server component, fetch data
+```
+
+## Step 1: Column Definitions
+
+```tsx
+'use client'
+
+import { ColumnDef } from '@tanstack/react-table'
+
+export type Payment = {
+  id: string
+  amount: number
+  status: 'pending' | 'processing' | 'success' | 'failed'
+  email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    accessorKey: 'status',
+    header: 'Status',
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+  },
+  {
+    accessorKey: 'amount',
+    header: () => <div className="text-right">Amount</div>,
+    cell: ({ row }) => {
+      const formatted = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(row.getValue('amount'))
+      return <div className="text-right font-medium">{formatted}</div>
+    },
+  },
+]
+```
+
+## Step 2: DataTable Component
+
+```tsx
+'use client'
+
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+}) {
+  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() })
+
+  return (
+    <Table>
+      <TableHeader>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <TableRow key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <TableHead key={header.id}>
+                {flexRender(header.column.columnDef.header, header.getContext())}
+              </TableHead>
+            ))}
+          </TableRow>
+        ))}
+      </TableHeader>
+      <TableBody>
+        {table.getRowModel().rows.map((row) => (
+          <TableRow key={row.id}>
+            {row.getVisibleCells().map((cell) => (
+              <TableCell key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
+```
+
+## Progressive Features
+
+Add these incrementally as needed:
+
+### Pagination
+
+```tsx
+import { getPaginationRowModel } from "@tanstack/react-table"
+const table = useReactTable({ ..., getPaginationRowModel: getPaginationRowModel() })
+// Controls: table.previousPage(), table.nextPage(), table.getCanPreviousPage()
+```
+
+### Sorting
+
+```tsx
+import { getSortedRowModel, SortingState } from "@tanstack/react-table"
+const [sorting, setSorting] = useState<SortingState>([])
+const table = useReactTable({ ..., getSortedRowModel: getSortedRowModel(), onSortingChange: setSorting, state: { sorting } })
+```
+
+### Column Filtering
+
+```tsx
+import { getFilteredRowModel, ColumnFiltersState } from '@tanstack/react-table'
+const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+// Add onColumnFiltersChange: setColumnFilters, state: { columnFilters }
+```
+
+### Row Selection
+
+```tsx
+// Add checkbox column:
+{ id: "select", header: ({ table }) => <Checkbox checked={table.getIsAllPageRowsSelected()} onCheckedChange={v => table.toggleAllPageRowsSelected(!!v)} />, cell: ({ row }) => <Checkbox checked={row.getIsSelected()} onCheckedChange={v => row.toggleSelected(!!v)} /> }
+```
+
+### Column Visibility
+
+```tsx
+const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+// Add DropdownMenu to toggle columns: table.getAllColumns().filter(c => c.getCanHide())
+```
+
+## Anti-patterns
+
+- ❌ Don't put columns + table + page in one file — separate for maintainability
+- ❌ Don't skip `getCoreRowModel()` — required base
+- ❌ Don't use native `<table>` — use shadcn `<Table>` components
+- ❌ Don't load 10k+ rows client-side — use server-side pagination

package/skills/shadcn-ui/chunks/components/dialog.md

@@ -0,0 +1,123 @@
+# Dialog, Sheet, Drawer, Alert Dialog — shadcn/ui
+
+## Install
+
+```bash
+npx shadcn@latest add dialog sheet drawer alert-dialog
+```
+
+## Dialog (Modal)
+
+```tsx
+<Dialog>
+  <DialogTrigger asChild>
+    <Button>Open</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Edit Profile</DialogTitle>
+      <DialogDescription>Make changes to your profile here.</DialogDescription>
+    </DialogHeader>
+    {/* form content */}
+    <DialogFooter>
+      <Button type="submit">Save</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+## Sheet (Slide-over Panel)
+
+```tsx
+<Sheet>
+  <SheetTrigger asChild>
+    <Button variant="outline">Open Menu</Button>
+  </SheetTrigger>
+  <SheetContent side="right">
+    {' '}
+    {/* "top" | "right" | "bottom" | "left" */}
+    <SheetHeader>
+      <SheetTitle>Menu</SheetTitle>
+      <SheetDescription>Navigation</SheetDescription>
+    </SheetHeader>
+    {/* content */}
+  </SheetContent>
+</Sheet>
+```
+
+## Drawer (Mobile Bottom Sheet)
+
+Based on `vaul`. Great for mobile-first interactions.
+
+```tsx
+<Drawer>
+  <DrawerTrigger asChild>
+    <Button variant="outline">Open</Button>
+  </DrawerTrigger>
+  <DrawerContent>
+    <DrawerHeader>
+      <DrawerTitle>Settings</DrawerTitle>
+      <DrawerDescription>Adjust your preferences.</DrawerDescription>
+    </DrawerHeader>
+    {/* content */}
+    <DrawerFooter>
+      <Button>Submit</Button>
+      <DrawerClose asChild>
+        <Button variant="outline">Cancel</Button>
+      </DrawerClose>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>
+```
+
+## Alert Dialog (Non-dismissable)
+
+Cannot be closed by clicking outside or pressing Escape. For destructive confirmations.
+
+```tsx
+<AlertDialog>
+  <AlertDialogTrigger asChild>
+    <Button variant="destructive">Delete</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+      <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Delete</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```
+
+## Responsive: Dialog on Desktop, Drawer on Mobile
+
+```tsx
+import { useMediaQuery } from '@/hooks/use-media-query'
+
+function ResponsiveModal({ children }) {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+
+  if (isDesktop) {
+    return <Dialog>{children}</Dialog>
+  }
+
+  return <Drawer>{children}</Drawer>
+}
+```
+
+## Controlled State
+
+```tsx
+const [open, setOpen] = useState(false)
+<Dialog open={open} onOpenChange={setOpen}>...</Dialog>
+```
+
+## Anti-patterns
+
+- ❌ Don't skip `DialogTitle` — required for accessibility (screen readers)
+- ❌ Don't nest Dialog inside Dialog — causes focus trap issues
+- ❌ Don't use Dialog for destructive confirmations — use Alert Dialog
+- ❌ Don't use Sheet on mobile — use Drawer instead