plcode-linux-x64-baseline 2.1.0

package/.plcode/skill/experimental/rsc-data-optimizer/references/patterns.md

@@ -0,0 +1,285 @@
+# RSC Data Fetching Patterns
+
+## Table of Contents
+
+- [Basic SSR Fetch](#basic-ssr-fetch)
+- [Parallel Data Fetching](#parallel-data-fetching)
+- [Hybrid Pattern](#hybrid-pattern)
+- [Streaming with Suspense](#streaming-with-suspense)
+- [Error Handling](#error-handling)
+- [Caching Strategies](#caching-strategies)
+- [Common Anti-Patterns](#common-anti-patterns)
+
+---
+
+## Basic SSR Fetch
+
+Simple server-side data fetching:
+
+```tsx
+// app/products/page.tsx
+import { getProducts } from "@/lib/actions/products"
+
+export default async function ProductsPage() {
+  const products = await getProducts()
+
+  return (
+    <div>
+      {products.map((product) => (
+        <ProductCard key={product.id} product={product} />
+      ))}
+    </div>
+  )
+}
+```
+
+---
+
+## Parallel Data Fetching
+
+Fetch multiple data sources simultaneously:
+
+```tsx
+// app/dashboard/page.tsx
+export default async function DashboardPage() {
+  // ✅ Parallel fetching - both run at same time
+  const [users, orders, stats] = await Promise.all([getUsers(), getOrders(), getStats()])
+
+  return (
+    <div>
+      <UsersSection users={users} />
+      <OrdersSection orders={orders} />
+      <StatsSection stats={stats} />
+    </div>
+  )
+}
+```
+
+**Avoid sequential fetching:**
+
+```tsx
+// ❌ Bad - waterfall, each waits for previous
+const users = await getUsers()
+const orders = await getOrders()
+const stats = await getStats()
+```
+
+---
+
+## Hybrid Pattern
+
+Server-side initial data + client-side interactivity:
+
+```tsx
+// app/products/page.tsx (Server Component)
+import { getProducts, getCategories } from "@/lib/actions"
+import { ProductsClient } from "./products-client"
+
+export default async function ProductsPage() {
+  const [products, categories] = await Promise.all([getProducts(), getCategories()])
+
+  return <ProductsClient initialProducts={products} categories={categories} />
+}
+
+// app/products/products-client.tsx (Client Component)
+;("use client")
+
+import { useState } from "react"
+
+interface ProductsClientProps {
+  initialProducts: Product[]
+  categories: Category[]
+}
+
+export function ProductsClient({ initialProducts, categories }: ProductsClientProps) {
+  const [products, setProducts] = useState(initialProducts)
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
+
+  const handleFilter = async (categoryId: string) => {
+    setSelectedCategory(categoryId)
+    // Client-side fetch for filtering
+    const filtered = await filterProducts(categoryId)
+    setProducts(filtered)
+  }
+
+  return (
+    <div>
+      <CategoryFilter categories={categories} onFilter={handleFilter} />
+      <ProductGrid products={products} />
+    </div>
+  )
+}
+```
+
+---
+
+## Streaming with Suspense
+
+Show content progressively as data loads:
+
+```tsx
+// app/dashboard/page.tsx
+import { Suspense } from "react"
+
+export default function DashboardPage() {
+  return (
+    <div>
+      {/* Shows immediately */}
+      <h1>Dashboard</h1>
+
+      {/* Streams in when ready */}
+      <Suspense fallback={<StatsSkeleton />}>
+        <StatsSection />
+      </Suspense>
+
+      <Suspense fallback={<ChartSkeleton />}>
+        <ChartSection />
+      </Suspense>
+    </div>
+  )
+}
+
+// Async component - fetches its own data
+async function StatsSection() {
+  const stats = await getStats() // Can be slow
+  return <Stats data={stats} />
+}
+```
+
+---
+
+## Error Handling
+
+Handle fetch errors gracefully:
+
+```tsx
+// app/products/page.tsx
+import { getProducts } from "@/lib/actions/products"
+
+export default async function ProductsPage() {
+  const products = await getProducts()
+
+  if (!products || products.length === 0) {
+    return <EmptyState message="No products found" />
+  }
+
+  return <ProductList products={products} />
+}
+
+// With error boundary (error.tsx)
+// app/products/error.tsx
+;("use client")
+
+export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button onClick={() => reset()}>Try again</button>
+    </div>
+  )
+}
+```
+
+---
+
+## Caching Strategies
+
+### Static Data (Build Time)
+
+```tsx
+// Data fetched at build time, cached indefinitely
+export const dynamic = "force-static"
+
+export default async function Page() {
+  const data = await getData()
+  return <Content data={data} />
+}
+```
+
+### Revalidate on Interval
+
+```tsx
+// Revalidate every 60 seconds
+export const revalidate = 60
+
+export default async function Page() {
+  const data = await getData()
+  return <Content data={data} />
+}
+```
+
+### On-Demand Revalidation
+
+```tsx
+// lib/actions/products.ts
+"use server"
+
+import { revalidatePath } from "next/cache"
+
+export async function createProduct(data: ProductInput) {
+  await db.products.create(data)
+  revalidatePath("/products") // Invalidate cache
+}
+```
+
+### No Cache (Always Fresh)
+
+```tsx
+export const dynamic = "force-dynamic"
+
+export default async function Page() {
+  const data = await getData() // Always fresh
+  return <Content data={data} />
+}
+```
+
+---
+
+## Common Anti-Patterns
+
+### ❌ Client-side fetch for static data
+
+```tsx
+"use client"
+export default function Page() {
+  const [data, setData] = useState([])
+  useEffect(() => {
+    fetch("/api/data")
+      .then((r) => r.json())
+      .then(setData)
+  }, [])
+  return <List data={data} />
+}
+```
+
+**Fix:** Remove `"use client"`, use async function.
+
+### ❌ Fetching in layout for page-specific data
+
+```tsx
+// app/layout.tsx
+export default async function Layout({ children }) {
+  const user = await getUser() // Fetched on every page
+  return <div>{children}</div>
+}
+```
+
+**Fix:** Fetch in page component or use React cache().
+
+### ❌ Over-fetching with Context
+
+```tsx
+// Fetches ALL data even if page only needs users
+const { users, products, orders } = useStore()
+```
+
+**Fix:** Fetch only what each page needs server-side.
+
+### ❌ Ignoring parallel fetching
+
+```tsx
+const a = await fetchA()
+const b = await fetchB() // Waits for A to complete
+```
+
+**Fix:** Use `Promise.all([fetchA(), fetchB()])`.

package/.plcode/skill/experimental/shadcn-management/SKILL.md

@@ -0,0 +1,109 @@
+---
+name: shadcn-management
+description: >-
+  Manage shadcn/ui components using MCP tools. Use when user needs to:
+  (1) Add new shadcn components to a project
+  (2) Build complex UI features requiring multiple components
+  (3) Research component implementations and examples
+  (4) Get component installation commands.
+  Triggers: "add shadcn", "shadcn component", "build UI with shadcn",
+  "install component", "create form", "create dialog"
+category: design
+---
+
+# Shadcn Component Management
+
+## Prerequisites
+
+Verify project setup:
+
+```
+shadcn___get_project_registries
+```
+
+If no components.json exists, instruct user: `npx shadcn@latest init`
+
+## Quick Add Workflow
+
+For simple component additions (e.g., "add a date picker"):
+
+1. **Search** - Find component in registry:
+
+   ```
+   shadcn___search_items_in_registries(registries, query)
+   ```
+
+2. **View** - Get implementation details:
+
+   ```
+   shadcn___view_items_in_registries(items: ["@shadcn/component-name"])
+   ```
+
+3. **Examples** - Get usage demo:
+
+   ```
+   shadcn___get_item_examples_from_registries(registries, query: "component-demo")
+   ```
+
+4. **Install** - Get add command:
+
+   ```
+   shadcn___get_add_command_for_items(items: ["@shadcn/component-name"])
+   ```
+
+5. **Output** - Provide installation command and example code
+
+## Complex Build Workflow
+
+For multi-component features (e.g., "build a login form"), see [references/workflows.md](references/workflows.md).
+
+**When to use Complex Build:**
+
+- Feature requires 3+ components
+- Need component hierarchy planning
+- Building complete sections (forms, dashboards, modals)
+
+## Component Naming Patterns
+
+Common search queries:
+
+- Forms: `form`, `input`, `select`, `checkbox`, `radio-group`
+- Layout: `card`, `dialog`, `sheet`, `drawer`, `tabs`
+- Feedback: `alert`, `toast`, `skeleton`, `progress`
+- Navigation: `button`, `dropdown-menu`, `navigation-menu`
+
+Example queries for demos: `form-demo`, `card-with-form`, `dialog-demo`
+
+## After Implementation
+
+Always run audit:
+
+```
+shadcn___get_audit_checklist
+```
+
+## Custom Styling & Theming
+
+Shadcn provides **structural foundation** with default styling. For custom aesthetics:
+
+**Invoke `frontend-design` skill when:**
+
+- User wants unique/distinctive visual style beyond default shadcn theme
+- Need custom typography, color schemes, or motion effects
+- Building landing pages or marketing sites requiring creative design
+- User mentions "custom styling", "unique design", "not generic"
+
+**Workflow:**
+
+1. Use `shadcn-management` for component structure and composition
+2. Invoke `frontend-design` for visual customization:
+   - Custom CSS variables in `globals.css`
+   - Tailwind theme extensions in `tailwind.config.js`
+   - Animation and micro-interaction enhancements
+   - Typography and color refinements
+
+**Customization targets:**
+
+- `@/app/globals.css` - CSS variables, custom fonts
+- `tailwind.config.js` - theme colors, fonts, animations
+- Component-level className overrides

package/.plcode/skill/experimental/shadcn-management/references/workflows.md

@@ -0,0 +1,214 @@
+# Complex Build Workflow
+
+For building complete features requiring multiple shadcn components.
+
+## Phase 1: Requirements Analysis
+
+**Input:** User request for a complete feature/section
+
+**Steps:**
+
+1. Call `shadcn___get_project_registries` - Note all available registries
+
+2. Break down the request into components needed:
+
+   ```
+   Example: "login form" needs:
+   - Form (validation)
+   - Input (email, password)
+   - Button (submit)
+   - Label (field labels)
+   - Card (container)
+   - Alert (error messages)
+   ```
+
+3. For each identified component:
+   - Call `shadcn___search_items_in_registries`
+   - Verify it exists in registry
+   - Note exact name
+
+4. **Output** component hierarchy:
+
+   ```
+   ## Feature: [Name]
+
+   ## Components Required:
+   - form (validation and submission)
+   - input (email and password fields)
+   - button (submit action)
+   - card (form container)
+   - alert (error display)
+
+   ## Component Hierarchy:
+   Card
+   └── Form
+       ├── Label + Input (email)
+       ├── Label + Input (password)
+       ├── Button (submit)
+       └── Alert (errors)
+   ```
+
+## Phase 2: Component Research
+
+**Input:** Component list from Phase 1
+
+**Steps:**
+
+1. For each component:
+
+   a. Get implementation details:
+
+   ```
+   shadcn___view_items_in_registries(items: ["@shadcn/component"])
+   ```
+
+   - Note file dependencies
+   - Note key props
+
+   b. Get examples:
+
+   ```
+   shadcn___get_item_examples_from_registries(registries, query: "component-demo")
+   ```
+
+   - For forms: get validation examples
+   - For data: get loading state examples
+
+2. Get installation command for ALL components at once:
+
+   ```
+   shadcn___get_add_command_for_items(items: ["@shadcn/form", "@shadcn/input", ...])
+   ```
+
+3. **Output** research summary with:
+   - Installation commands
+   - Key imports for each component
+   - Relevant example code snippets
+   - Important props to use
+
+## Phase 3: Implementation
+
+**Input:** Requirements + Research from previous phases
+
+**Steps:**
+
+1. Build implementation following:
+   - Use EXACT imports from research
+   - Follow hierarchy from requirements
+   - Adapt examples to match use case
+   - Add proper TypeScript types
+   - Include state management (useState, form hooks)
+   - Add error handling
+
+2. Run audit:
+
+   ```
+   shadcn___get_audit_checklist
+   ```
+
+   - Verify best practices followed
+
+3. **Output** complete implementation:
+
+   ```tsx
+   // All necessary imports
+   import { Form, FormControl, FormField } from "@/components/ui/form"
+   import { Input } from "@/components/ui/input"
+   import { Button } from "@/components/ui/button"
+
+   export function FeatureName() {
+     // Full implementation
+   }
+   ```
+
+4. Include setup instructions:
+   - Installation commands needed
+   - Where to add the component
+   - Any additional setup (providers, configs)
+
+## Example: Login Form
+
+**Phase 1 Output:**
+
+```
+Components: card, form, input, button, label, alert
+Hierarchy: Card > Form > (Label+Input)*2 + Button + Alert
+```
+
+**Phase 2 Output:**
+
+```bash
+npx shadcn@latest add card form input button label alert
+```
+
+**Phase 3 Output:**
+
+```tsx
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+
+const formSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+})
+
+export function LoginForm() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  })
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values)
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Login</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input placeholder="email@example.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <Input type="password" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button type="submit" className="w-full">
+              Login
+            </Button>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  )
+}
+```