@jini-ai/agent-plugins 0.6.15-rc.2 → 0.6.16

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

@@ -1,412 +0,0 @@
-# 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

@@ -1,134 +0,0 @@
-#!/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

@@ -1,77 +0,0 @@
----
-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

@@ -1,72 +0,0 @@
-# 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