@jini-ai/agent-plugins 0.4.0

package/ui-ux-design/skills/shadcn-ui/resources/setup-guide.md

@@ -0,0 +1,412 @@
+# shadcn/ui Setup Guide
+
+This guide walks you through setting up shadcn/ui in both new and existing projects.
+
+## Prerequisites
+
+Before you begin, ensure you have:
+- **Node.js 18+** installed
+- **React 18+** in your project
+- **Tailwind CSS 3.0+** configured
+- A package manager: npm, yarn, pnpm, or bun
+
+## Quick Start (New Project)
+
+### Option 1: npx shadcn create (Recommended)
+
+The easiest way to start a new project with shadcn/ui is using the `create` command, which allows you to customize everything (framework, library, style, font, etc.).
+
+```bash
+npx shadcn@latest create
+```
+
+This interactive command will guide you through:
+1.  **Project Name**: Directory for your app.
+2.  **Visual Style**: Choose from Vega, Nova, Maia, Lyra, Mira, or Classic.
+3.  **Base Color**: Select your primary theme color.
+4.  **Framework**: Next.js, Vite, Laravel, etc.
+5.  **Component Library**: Choose **Radix UI** or **Base UI**.
+6.  **RTL Support**: Enable Right-to-Left support if needed.
+
+### Option 2: Classic Manual Setup (Next.js)
+
+```bash
+# Create a new Next.js project
+npx create-next-app@latest my-app
+cd my-app
+
+# Initialize shadcn/ui
+npx shadcn@latest init
+
+# Add your first component
+npx shadcn@latest add button
+```
+
+### Option 3: Classic Manual Setup (Vite + React)
+
+```bash
+# Create a new Vite project
+npm create vite@latest my-app -- --template react-ts
+cd my-app
+npm install
+
+# Install Tailwind CSS
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+
+# Initialize shadcn/ui
+npx shadcn@latest init
+
+# Add your first component
+npx shadcn@latest add button
+```
+
+## Existing Project Setup
+
+### Step 1: Ensure Tailwind CSS is Installed
+
+If Tailwind is not installed:
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+Configure `tailwind.config.js`:
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+### Step 2: Initialize shadcn/ui
+
+Run the initialization command:
+
+```bash
+npx shadcn@latest init
+```
+
+You'll be asked to configure:
+
+1. **Style**: Choose between `default`, `new-york`, or one of the new styles (Vega, Nova, etc.)
+   - `default`: Clean and minimal design
+   - `new-york`: More refined with subtle details
+
+2. **Base Color**: Choose your primary color palette
+   - slate, gray, zinc, neutral, or stone
+
+3. **CSS Variables**: Recommend `yes` for easier theming
+
+4. **TypeScript**: Recommend `yes` for type safety
+
+5. **Import Alias**: Default is `@/components` (recommended)
+
+6. **React Server Components**: Choose based on your framework
+   - `yes` for Next.js 13+ with app directory
+   - `no` for Vite, CRA, or Next.js pages directory
+
+7. **RTL Support**: Answer `yes` if you need Right-to-Left layout support (this will use logical properties like `ms-4` instead of `ml-4`).
+
+## Advanced Features
+
+### Visual Styles
+shadcn/ui now offers multiple visual styles beyond the defaults:
+- **Vega**: The classic shadcn/ui look.
+- **Nova**: Reduced padding/margins, compact.
+- **Maia**: Soft, rounded, generous spacing.
+- **Lyra**: Boxy, sharp, mono font friendly.
+- **Mira**: Dense, compact.
+
+### Base UI Support
+You can now choose between **Radix UI** and **Base UI** as the underlying primitive library. They share the same component API/abstraction, so your usage remains consistent.
+
+
+### Step 3: Verify Configuration
+
+The init command creates/updates several files:
+
+**components.json** (root of project):
+```json
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib"
+  }
+}
+```
+
+**src/lib/utils.ts**:
+```typescript
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+```
+
+**Updated tailwind.config.js**:
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        // ... more colors
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+```
+
+**Updated globals.css** (or equivalent):
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    /* ... dark mode variables */
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+```
+
+### Step 4: Configure Path Aliases
+
+Ensure your `tsconfig.json` includes path aliases:
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
+```
+
+For Vite, also update `vite.config.ts`:
+
+```typescript
+import path from "path"
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+})
+```
+
+### Step 5: Add Components
+
+Now you can add components:
+
+```bash
+# Add individual components
+npx shadcn@latest add button
+npx shadcn@latest add card
+npx shadcn@latest add dialog
+
+# Add multiple components at once
+npx shadcn@latest add button card dialog input label
+```
+
+Components will be added to `src/components/ui/` by default.
+
+## Framework-Specific Considerations
+
+### Next.js App Router
+
+- Set `rsc: true` in `components.json`
+- Add `"use client"` to stateful components
+- Import components work from server components by default
+
+### Next.js Pages Router
+
+- Set `rsc: false` in `components.json`
+- All components are client-side by default
+
+### Vite
+
+- Ensure path aliases are configured in `vite.config.ts`
+- Import `globals.css` in your main entry point (`main.tsx`)
+
+### Create React App
+
+- Use `craco` or `react-app-rewired` for path alias support
+- Or use relative imports instead of aliases
+
+## Verification Steps
+
+1. **Check file structure**:
+   ```
+   src/
+   ├── components/
+   │   └── ui/
+   ├── lib/
+   │   └── utils.ts
+   └── index.css (or globals.css)
+   ```
+
+2. **Test a simple component**:
+   ```tsx
+   import { Button } from "@/components/ui/button"
+   
+   export default function App() {
+     return <Button>Click me</Button>
+   }
+   ```
+
+3. **Verify Tailwind is working**:
+   - Component should render with proper styling
+   - Check browser dev tools for applied classes
+
+4. **Test dark mode** (if using CSS variables):
+   ```tsx
+   <html className="dark">
+   ```
+
+## Troubleshooting
+
+### "Cannot find module '@/components/ui/button'"
+
+**Solution**: Check path alias configuration in `tsconfig.json` and framework config.
+
+### Styles not applying
+
+**Solution**: 
+- Ensure `globals.css` is imported in your app entry point
+- Verify Tailwind config `content` paths include your files
+- Check CSS variables are defined in `globals.css`
+
+### TypeScript errors in components
+
+**Solution**:
+- Run `npm install` to ensure all dependencies are installed
+- Check that `@types/react` is installed
+- Restart TypeScript server in your editor
+
+### Components look broken
+
+**Solution**:
+- Verify `tailwindcss-animate` is installed: `npm install tailwindcss-animate`
+- Check that CSS variables are properly defined
+- Ensure you're not overriding component styles globally
+
+## Next Steps
+
+1. Browse the [component catalog](./component-catalog.md)
+2. Read the [customization guide](./customization-guide.md)
+3. Check out example implementations in `/examples`
+4. Join the [shadcn/ui Discord](https://discord.com/invite/vNvTqVaWm6)
+
+## Additional Resources
+
+- [Official Documentation](https://ui.shadcn.com)
+- [Component Examples](https://ui.shadcn.com/examples)
+- [GitHub Repository](https://github.com/shadcn-ui/ui)
+- [Tailwind CSS Docs](https://tailwindcss.com/docs)

package/ui-ux-design/skills/shadcn-ui/scripts/verify-setup.sh

@@ -0,0 +1,134 @@
+#!/usr/bin/env bash
+# shadcn/ui Setup Verification Script
+# Validates that a project is correctly configured for shadcn/ui
+
+set -e
+
+GREEN='\033[0;32m'
+RED='\033[0;31m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+echo "🔍 Verifying shadcn/ui setup..."
+echo ""
+
+# Check if components.json exists
+if [ -f "components.json" ]; then
+    echo -e "${GREEN}✓${NC} components.json found"
+else
+    echo -e "${RED}✗${NC} components.json not found"
+    echo -e "  ${YELLOW}Run:${NC} npx shadcn@latest init"
+    exit 1
+fi
+
+# Check if tailwind.config exists
+if [ -f "tailwind.config.js" ] || [ -f "tailwind.config.ts" ]; then
+    echo -e "${GREEN}✓${NC} Tailwind config found"
+else
+    echo -e "${RED}✗${NC} tailwind.config.js not found"
+    echo -e "  ${YELLOW}Install Tailwind:${NC} npm install -D tailwindcss postcss autoprefixer"
+    exit 1
+fi
+
+# Check if tsconfig.json has path aliases
+if [ -f "tsconfig.json" ]; then
+    if grep -q '"@/\*"' tsconfig.json; then
+        echo -e "${GREEN}✓${NC} Path aliases configured in tsconfig.json"
+    else
+        echo -e "${YELLOW}⚠${NC} Path aliases not found in tsconfig.json"
+        echo "  Add to compilerOptions.paths:"
+        echo '  "@/*": ["./src/*"]'
+    fi
+else
+    echo -e "${YELLOW}⚠${NC} tsconfig.json not found (TypeScript not configured)"
+fi
+
+# Check if globals.css or equivalent exists
+if [ -f "src/index.css" ] || [ -f "src/globals.css" ] || [ -f "app/globals.css" ]; then
+    echo -e "${GREEN}✓${NC} Global CSS file found"
+    
+    # Check for Tailwind directives
+    CSS_FILE=$(find . -name "globals.css" -o -name "index.css" | head -n 1)
+    if grep -q "@tailwind base" "$CSS_FILE"; then
+        echo -e "${GREEN}✓${NC} Tailwind directives present"
+    else
+        echo -e "${RED}✗${NC} Tailwind directives missing"
+        echo "  Add to your CSS file:"
+        echo "  @tailwind base;"
+        echo "  @tailwind components;"
+        echo "  @tailwind utilities;"
+    fi
+    
+    # Check for CSS variables
+    if grep -q "^:root" "$CSS_FILE" || grep -q "@layer base" "$CSS_FILE"; then
+        echo -e "${GREEN}✓${NC} CSS variables defined"
+    else
+        echo -e "${YELLOW}⚠${NC} CSS variables not found"
+        echo "  shadcn/ui requires CSS variables for theming"
+    fi
+else
+    echo -e "${RED}✗${NC} Global CSS file not found"
+fi
+
+# Check if components/ui directory exists
+if [ -d "src/components/ui" ] || [ -d "components/ui" ]; then
+    echo -e "${GREEN}✓${NC} components/ui directory exists"
+    
+    # Count components
+    COMPONENT_COUNT=$(find . -path "*/components/ui/*.tsx" -o -path "*/components/ui/*.jsx" | wc -l)
+    echo -e "  ${COMPONENT_COUNT} components installed"
+else
+    echo -e "${YELLOW}⚠${NC} components/ui directory not found"
+    echo "  Add your first component: npx shadcn@latest add button"
+fi
+
+# Check if lib/utils exists
+if [ -f "src/lib/utils.ts" ] || [ -f "lib/utils.ts" ]; then
+    echo -e "${GREEN}✓${NC} lib/utils.ts exists"
+    
+    # Check for cn function
+    UTILS_FILE=$(find . -name "utils.ts" | grep "lib" | head -n 1)
+    if grep -q "export function cn" "$UTILS_FILE"; then
+        echo -e "${GREEN}✓${NC} cn() utility function present"
+    else
+        echo -e "${RED}✗${NC} cn() utility function missing"
+    fi
+else
+    echo -e "${RED}✗${NC} lib/utils.ts not found"
+fi
+
+# Check package.json dependencies
+if [ -f "package.json" ]; then
+    echo ""
+    echo "📦 Checking dependencies..."
+    
+    # Required dependencies
+    REQUIRED_DEPS=("react" "tailwindcss")
+    RECOMMENDED_DEPS=("class-variance-authority" "clsx" "tailwind-merge" "tailwindcss-animate")
+    
+    for dep in "${REQUIRED_DEPS[@]}"; do
+        if grep -q "\"$dep\"" package.json; then
+            echo -e "${GREEN}✓${NC} $dep installed"
+        else
+            echo -e "${RED}✗${NC} $dep not installed"
+        fi
+    done
+    
+    echo ""
+    echo "Recommended dependencies:"
+    for dep in "${RECOMMENDED_DEPS[@]}"; do
+        if grep -q "\"$dep\"" package.json; then
+            echo -e "${GREEN}✓${NC} $dep installed"
+        else
+            echo -e "${YELLOW}⚠${NC} $dep not installed (recommended)"
+        fi
+    done
+fi
+
+echo ""
+echo -e "${GREEN}✓${NC} Setup verification complete!"
+echo ""
+echo "Next steps:"
+echo "  1. Add components: npx shadcn@latest add [component]"
+echo "  2. View catalog: npx shadcn@latest add --help"
+echo "  3. Browse docs: https://ui.shadcn.com"

package/ui-ux-design/skills/ui-ux-design/SKILL.md

@@ -0,0 +1,77 @@
+---
+name: ui-ux-design
+version: 1.1.0
+last_updated: 2026-08-09
+description: Use when creating frontend design systems, visual direction, component/state specs, responsive behavior, brand-aware UI guidance, premium/high-converting website polish, or implementation-ready design handoff from a feature spec or existing product constraints.
+---
+
+# Skill: UI/UX Design
+
+## Execution
+
+- Read the active spec, current product UI constraints, and ADR notes before making visual decisions.
+- Preserve an existing design system unless the user explicitly requests a new direction.
+- Define foundations before screens: tokens, typography, spacing, breakpoints, layout rules, interaction baselines.
+- Define component behavior before polish: default, hover, focus, active, loading, empty, error, success, disabled.
+- Load only the reference files needed for the current task, with one standing exception: **any request for visual quality loads the premium bundle up front** — `references/premium-ui.md` together with `sam-crawford-premium-websites.md`, `self-made-web-designer-core-skills.md`, and `kole-jain-uiux-concepts.md`. That is ~6k tokens for all four, and the specifics live in the three notes, not the summary. Do not wait for the user to name a source; they never will.
+  - `references/premium-ui.md` for premium/luxury/high-trust/high-converting website and product UI polish — first impression, hierarchy, premium signals, and the three design-school notes it carries
+  - `references/foundations.md` for tokens, layout, theming, responsive rules
+  - `references/components-and-states.md` for component inventory, state matrix, interaction rules
+  - `references/brand-and-voice.md` for brand system, tone, messaging, visual identity direction
+  - `references/research-and-validation.md` for personas, journeys, usability-test planning, design validation
+  - `references/visual-storytelling.md` for narrative layouts, data storytelling, campaign-style pages
+  - `references/openai-frontend-skill.md` for composition-first landing pages, branded demos, art direction, and anti-generic UI checks
+  - `references/delight-and-motion.md` for microcopy, micro-interactions, personality, motion, delight
+  - `references/inclusive-ai-imagery.md` for inclusive representation rules and AI image/video prompting
+- Treat accessibility, responsive behavior, and implementation clarity as default requirements.
+- Produce design output that Programmer, QA/E2E, and Code Inspection can execute without guessing.
+
+## Guardrails
+
+- Do not implement frontend code unless the owning agent explicitly changes scope.
+- Do not invent a brand system when the product already has one; extend or document the existing one.
+- Do not prescribe motion, whimsy, or theme toggles by default when they conflict with product context.
+- Do not rely on color alone for meaning, placeholder-only labels, or non-semantic interaction patterns.
+- Do not use AI-image guidance unless image or video generation is actually in scope.
+- Do not present user research fiction as real evidence; label proposed research and validation plans as plans.
+- If `references/openai-frontend-skill.md` is activated, explicitly tell the user before using its direction so they can redirect if they do not want that visual approach.
+
+## Output
+
+Write a concise design artifact that includes:
+
+- visual direction summary
+- design foundations: tokens, typography, spacing, layout, breakpoints
+- component inventory and state matrix
+- interaction, motion, and microcopy rules
+- accessibility and inclusive-design requirements
+- brand/voice constraints when relevant
+- implementation notes for Programmer
+- verification notes for QA/E2E and Code Inspection
+
+Default path: `<ADS_MEMORY_ROOT>/reports/pipeline/<NNN>-<feature-name>/design-spec.md`
+
+## Reference
+
+### Preconditions
+
+- Inputs expected: active feature spec, existing UI/design constraints, ADR constraints if available, target platform context.
+- If the request is an audit of existing UI rather than design creation, pair this skill with `vercel-web-design-guidelines` and `frontend-accessibility`.
+
+### Decision Rule
+
+- Any signal that visual quality matters — premium, high-end, expensive, luxury, agency-grade, high-converting, "make it look good", a redesign, or a first-impression/marketing surface -> load `premium-ui.md` **and its three notes** first
+- Need layout, theming, or token structure -> load `foundations.md`
+- Need reusable components or interaction states -> load `components-and-states.md`
+- Need brand system or tone definition -> load `brand-and-voice.md`
+- Need validation plan or persona/journey structure -> load `research-and-validation.md`
+- Need narrative landing page, infographic, or campaign framing -> load `visual-storytelling.md`
+- Need visually strong landing-page composition, branded demo direction, or anti-generic UI guidance -> load `openai-frontend-skill.md`
+- Need delight, motion, or playful interaction guidance -> load `delight-and-motion.md`
+- Need AI-generated imagery or inclusive representation constraints -> load `inclusive-ai-imagery.md`
+
+### Failure Path
+
+- If brand direction conflicts with accessibility or compliance, keep the baseline and escalate the conflict.
+- If the spec lacks enough product context for irreversible design decisions, produce a constrained design spec with explicit assumptions and open questions.
+- If requested style would materially harm usability, note the tradeoff and require human approval before locking it in.

package/ui-ux-design/skills/ui-ux-design/references/brand-and-voice.md

@@ -0,0 +1,72 @@
+# Brand and Voice
+
+Use this reference when the design work includes identity direction, messaging behavior, or visual tone.
+
+## When to Use
+
+- greenfield product with no established brand system
+- redesign where the user wants a visual reset
+- public-facing marketing or landing surfaces
+- copy or tone decisions that materially affect UX
+
+## Brand Foundation Inputs
+
+If enough context exists, define:
+
+- purpose
+- vision
+- mission
+- values
+- personality traits
+- audience
+- competitive differentiation
+
+Keep this lightweight unless the user explicitly requests full brand strategy work.
+
+## Voice Rules
+
+Define:
+
+- tone adjectives
+- preferred reading level
+- helpfulness vs confidence balance
+- what copy should avoid
+- how errors, empty states, and success messages should sound
+
+Prefer clear, human, concise language over generic corporate filler.
+
+## Visual Identity Translation
+
+Translate brand direction into:
+
+- palette behavior
+- typography mood
+- imagery treatment
+- icon/illustration style
+- density and whitespace
+- motion character
+
+## Messaging Architecture
+
+For public-facing surfaces, define:
+
+- headline style
+- subhead style
+- value proposition structure
+- CTA tone
+- proof/trust elements
+
+## Anti-Patterns
+
+- inventing deep brand strategy when only feature-level UI is needed
+- robotic generic copy
+- brand tone that conflicts with task clarity
+- visual identity choices that reduce readability or accessibility
+
+## Output Checklist
+
+- brand assumptions stated
+- tone/voice rules stated
+- copy style examples provided when relevant
+- visual identity translation documented
+- conflicts with existing brand noted explicitly