@devmunna/agent-skillkit 0.1.0

package/skills/tailwind-css/references/patterns.md

@@ -0,0 +1,375 @@
+# Patterns Reference — Responsive, Dark Mode, Animations, Typography
+
+---
+
+## Responsive Design — Mobile-First
+
+Always style the mobile base first, then add breakpoint prefixes for larger screens:
+
+```html
+<!-- Typography -->
+<h1 class="text-2xl font-bold sm:text-3xl lg:text-4xl">Title</h1>
+
+<!-- Grid layout -->
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+
+<!-- Stack on mobile, side-by-side on desktop -->
+<div class="flex flex-col sm:flex-row gap-4">
+
+<!-- Full width on mobile, auto on desktop -->
+<button class="w-full sm:w-auto">Submit</button>
+
+<!-- Show/hide at breakpoints -->
+<nav class="hidden md:flex">Desktop nav</nav>
+<button class="md:hidden">Mobile menu</button>
+
+<!-- Padding scales -->
+<div class="px-4 sm:px-6 lg:px-8">Page content</div>
+```
+
+**Built-in breakpoints:**
+| Prefix | Min-width |
+|--------|-----------|
+| `sm:`  | 640px |
+| `md:`  | 768px |
+| `lg:`  | 1024px |
+| `xl:`  | 1280px |
+| `2xl:` | 1536px |
+
+---
+
+## Container Queries (v4 Built-In)
+
+Container queries let components respond to their parent's size, not the viewport. Essential for reusable components in varying layouts.
+
+```html
+<!-- Mark the container -->
+<div class="@container">
+  <!-- Card adapts to container width, not screen width -->
+  <div class="flex flex-col @md:flex-row gap-4">
+    <img class="w-full @md:w-48 @md:shrink-0 rounded-lg" src="..." />
+    <div class="@md:flex @md:flex-col @md:justify-center">
+      <h2 class="text-lg @md:text-xl font-semibold">Title</h2>
+      <p class="text-sm text-muted">Description</p>
+    </div>
+  </div>
+</div>
+```
+
+**Container breakpoints (based on container width):**
+| Prefix | Min-width |
+|--------|-----------|
+| `@sm:` | 384px |
+| `@md:` | 448px |
+| `@lg:` | 512px |
+| `@xl:` | 576px |
+| `@2xl:`| 672px |
+
+**Named containers (for nested scenarios):**
+```html
+<aside class="@container/sidebar">
+  <main class="@container/content">
+    <!-- Respond to different ancestor containers -->
+    <div class="@lg/sidebar:hidden @lg/content:block">
+      Only visible when content container is large
+    </div>
+  </main>
+</aside>
+```
+
+---
+
+## Dark Mode
+
+### Setup — Class-Based (Recommended)
+
+```css
+/* globals.css — define the dark variant */
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+```ts
+// Zustand store or simple util
+export function setTheme(theme: 'light' | 'dark') {
+  document.documentElement.classList.toggle('dark', theme === 'dark');
+  localStorage.setItem('theme', theme);
+}
+
+// On app startup — read persisted preference
+const saved = localStorage.getItem('theme') as 'light' | 'dark' | null;
+const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+setTheme(saved ?? system);
+```
+
+### Usage
+
+```html
+<!-- Colors -->
+<div class="bg-white dark:bg-slate-900">
+<div class="text-slate-900 dark:text-slate-100">
+<div class="border-slate-200 dark:border-slate-700">
+
+<!-- With CSS variable tokens (cleaner) -->
+<div class="bg-bg text-fg border-border-col">
+
+<!-- Images / icons -->
+<img class="opacity-100 dark:opacity-80" />
+<svg class="fill-slate-900 dark:fill-white" />
+
+<!-- Shadows -->
+<div class="shadow-md dark:shadow-slate-900/50">
+```
+
+### Theme Toggle Component
+
+```tsx
+'use client'; // if Next.js
+
+import { useState, useEffect } from 'react';
+
+export function ThemeToggle() {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    setIsDark(document.documentElement.classList.contains('dark'));
+  }, []);
+
+  const toggle = () => {
+    const next = !isDark;
+    setIsDark(next);
+    document.documentElement.classList.toggle('dark', next);
+    localStorage.setItem('theme', next ? 'dark' : 'light');
+  };
+
+  return (
+    <button
+      onClick={toggle}
+      className="rounded-md p-2 hover:bg-primary/10 transition-colors"
+      aria-label="Toggle theme"
+    >
+      {isDark ? '☀️' : '🌙'}
+    </button>
+  );
+}
+```
+
+---
+
+## Animations
+
+### CSS Transitions (Hover, Focus)
+
+```html
+<!-- Color transition -->
+<button class="bg-primary hover:bg-primary/80 transition-colors duration-200">
+
+<!-- Scale on hover -->
+<div class="hover:scale-105 transition-transform duration-200">
+
+<!-- Multiple properties -->
+<div class="hover:shadow-lg hover:-translate-y-1 transition-all duration-200">
+
+<!-- Opacity + transform combined -->
+<div class="hover:opacity-80 active:scale-95 transition-all duration-150">
+```
+
+### Enter Animations — starting: Variant (v4)
+
+The `starting:` variant applies `@starting-style` — defines the element's initial state before it renders, so it transitions in on mount.
+
+```html
+<!-- Fade in on mount -->
+<div class="opacity-100 transition-opacity duration-300 starting:opacity-0">
+  Fades in when added to DOM
+</div>
+
+<!-- Slide up on mount -->
+<div class="translate-y-0 opacity-100 transition-all duration-300 starting:translate-y-4 starting:opacity-0">
+  Slides up from below
+</div>
+
+<!-- Scale in on mount -->
+<div class="scale-100 opacity-100 transition-all duration-200 starting:scale-95 starting:opacity-0">
+  Scales in
+</div>
+```
+
+### Custom Animation Classes (via @theme)
+
+After defining animations in `@theme` (see design-tokens.md):
+
+```html
+<div class="animate-fade-in">Fades in</div>
+<div class="animate-slide-up">Slides up</div>
+<div class="animate-scale-in">Scales in</div>
+
+<!-- Built-in loading animations -->
+<div class="animate-spin">Spinner</div>
+<div class="animate-pulse">Skeleton</div>
+<div class="animate-bounce">Bounce indicator</div>
+<div class="animate-ping">Notification ping</div>
+```
+
+### Conditional Animation (React)
+
+```tsx
+export function Notification({ show }: { show: boolean }) {
+  return (
+    <div
+      className={cn(
+        'rounded-lg bg-success/10 px-4 py-3 text-success',
+        'transition-all duration-300',
+        show
+          ? 'translate-y-0 opacity-100'
+          : '-translate-y-4 opacity-0 pointer-events-none',
+      )}
+    >
+      Saved successfully!
+    </div>
+  );
+}
+```
+
+---
+
+## Typography — @tailwindcss/typography
+
+Install: `npm install -D @tailwindcss/typography`
+
+In globals.css: `@plugin "@tailwindcss/typography";`
+
+### Usage
+
+```html
+<!-- Blog post, markdown output, rich text editor content -->
+<article class="prose lg:prose-lg dark:prose-invert max-w-none">
+  <h1>Article Title</h1>
+  <p>Content is auto-styled — links, headings, lists, code, blockquotes.</p>
+  <code>code snippets</code>
+  <pre><code>code blocks</code></pre>
+</article>
+```
+
+### Prose Modifiers
+
+```html
+<!-- Size -->
+<article class="prose prose-sm">   Small (14px) </article>
+<article class="prose">            Base (16px)  </article>
+<article class="prose prose-lg">   Large (18px) </article>
+<article class="prose prose-xl">   XL (20px)    </article>
+
+<!-- Dark mode -->
+<article class="prose dark:prose-invert">
+
+<!-- Responsive size -->
+<article class="prose md:prose-lg lg:prose-xl">
+
+<!-- Element overrides -->
+<article class="prose prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-code:rounded prose-code:bg-muted/20 prose-code:px-1 prose-img:rounded-xl">
+```
+
+---
+
+## Layout Patterns
+
+### Page Layout
+
+```tsx
+export function PageLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-bg text-fg">
+      <header className="sticky top-0 z-40 border-b border-border-col bg-bg/80 backdrop-blur">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="flex h-16 items-center justify-between">
+            <Logo />
+            <nav className="hidden md:flex items-center gap-4">
+              <NavLinks />
+            </nav>
+            <ThemeToggle />
+          </div>
+        </div>
+      </header>
+      <main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
+        {children}
+      </main>
+    </div>
+  );
+}
+```
+
+### Sidebar Layout
+
+```tsx
+export function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen bg-bg">
+      {/* Sidebar */}
+      <aside className="hidden w-64 shrink-0 border-r border-border-col lg:block">
+        <nav className="sticky top-0 h-screen overflow-y-auto p-4">
+          <SidebarNav />
+        </nav>
+      </aside>
+      {/* Content */}
+      <div className="flex flex-1 flex-col">
+        <header className="flex h-16 items-center border-b border-border-col px-6">
+          <h1 className="text-lg font-semibold">Dashboard</h1>
+        </header>
+        <main className="flex-1 overflow-auto p-6">{children}</main>
+      </div>
+    </div>
+  );
+}
+```
+
+### Data Table
+
+```tsx
+export function DataTable<T>({ columns, rows }: TableProps<T>) {
+  return (
+    <div className="overflow-hidden rounded-xl border border-border-col">
+      <table className="w-full text-sm">
+        <thead className="border-b border-border-col bg-card">
+          <tr>
+            {columns.map((col) => (
+              <th key={col.key} className="px-4 py-3 text-left font-medium text-muted">
+                {col.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-border-col bg-bg">
+          {rows.map((row, i) => (
+            <tr key={i} className="hover:bg-card transition-colors">
+              {columns.map((col) => (
+                <td key={col.key} className="px-4 py-3">
+                  {col.render ? col.render(row) : String((row as any)[col.key])}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+```
+
+### Empty State
+
+```tsx
+export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-border-col py-16 text-center">
+      <div className="mb-4 rounded-full bg-primary/10 p-4">
+        <Icon className="size-8 text-primary" />
+      </div>
+      <h3 className="text-lg font-semibold text-fg">{title}</h3>
+      <p className="mt-1 text-sm text-muted">{description}</p>
+      {action && <div className="mt-6">{action}</div>}
+    </div>
+  );
+}
+```

package/skills/tailwind-css/references/setup.md

@@ -0,0 +1,165 @@
+# Setup Reference — Tailwind CSS v4
+
+---
+
+## Vite + React
+
+```bash
+npm create vite@latest my-app -- --template react-ts
+cd my-app
+npm install tailwindcss @tailwindcss/vite clsx tailwind-merge class-variance-authority
+```
+
+**vite.config.ts:**
+```ts
+import { defineConfig }  from 'vite';
+import react             from '@vitejs/plugin-react';
+import tailwindcss       from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: { '@': '/src' },
+  },
+});
+```
+
+**src/index.css:**
+```css
+@import "tailwindcss";
+
+/* All @theme customizations go here */
+@theme {
+  --font-sans: 'Inter', sans-serif;
+  --color-primary: oklch(0.55 0.25 262);
+}
+```
+
+**main.tsx:**
+```tsx
+import './index.css';
+import ReactDOM from 'react-dom/client';
+import App      from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
+```
+
+---
+
+## Next.js 15
+
+```bash
+npx create-next-app@latest my-app --typescript --app --src-dir --import-alias "@/*"
+cd my-app
+npm install tailwindcss @tailwindcss/postcss postcss clsx tailwind-merge class-variance-authority
+```
+
+**postcss.config.mjs:**
+```js
+export default { plugins: { '@tailwindcss/postcss': {} } };
+```
+
+**src/app/globals.css:**
+```css
+@import "tailwindcss";
+
+@theme {
+  --font-sans: 'Inter', sans-serif;
+  --color-primary: oklch(0.55 0.25 262);
+}
+```
+
+**src/app/layout.tsx:**
+```tsx
+import './globals.css';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = { title: 'My App' };
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+---
+
+## @tailwindcss/typography Plugin
+
+```bash
+npm install -D @tailwindcss/typography
+```
+
+**In globals.css — add plugin import after tailwindcss:**
+```css
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+```
+
+Usage:
+```html
+<article class="prose lg:prose-lg dark:prose-invert max-w-none">
+  <!-- Rich text content, markdown output, blog posts -->
+</article>
+```
+
+---
+
+## shadcn/ui Setup (Tailwind v4)
+
+shadcn/ui components ship ready for Tailwind v4 with CSS variable–based theming.
+
+```bash
+npx shadcn@latest init
+```
+
+The CLI will:
+1. Create `src/lib/utils.ts` with the `cn()` helper
+2. Add CSS variables to `globals.css` under `:root` and `.dark`
+3. Wire up `@theme` to expose variables as Tailwind utilities
+
+Install components individually:
+```bash
+npx shadcn@latest add button
+npx shadcn@latest add card
+npx shadcn@latest add input
+npx shadcn@latest add dialog
+npx shadcn@latest add table
+npx shadcn@latest add form    # includes react-hook-form integration
+```
+
+Components land in `src/components/ui/` — they are source files you own and customize.
+
+---
+
+## cn() Helper — Always Create This File
+
+```ts
+// src/lib/utils.ts
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge }               from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+```
+
+---
+
+## TypeScript Path Aliases (tsconfig.json)
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
+```
+
+Vite also needs the alias in `vite.config.ts` (shown above). Next.js handles it automatically when using `--import-alias "@/*"` flag.