@amrhas82/agentic-kit 1.7.0 → 1.7.6

package/packages/droid/commands/artifacts-builder/artifacts-builder.md

@@ -1,285 +0,0 @@
----
-description: Build elaborate multi-component HTML artifacts using React, TypeScript, Tailwind CSS, and shadcn/ui
-argument-hint: <artifact-concept> <project-name>
----
-
-Build powerful frontend artifacts using modern web technologies for complex interactive experiences.
-
-## Technology Stack
-
-**Core Stack:**
-- React 18 + TypeScript
-- Vite for development
-- Parcel for bundling
-- Tailwind CSS 3.4.1
-- shadcn/ui component library
-- 40+ pre-installed components
-
-## Development Workflow
-
-### Step 1: Initialize Project
-```bash
-bash scripts/init-artifact.sh <project-name>
-cd <project-name>
-```
-
-**Creates fully configured project with:**
-- ✅ React + TypeScript (via Vite)
-- ✅ Tailwind CSS with shadcn/ui theming
-- ✅ Path aliases (`@/`) configured
-- ✅ 40+ shadcn/ui components
-- ✅ Radix UI dependencies
-- ✅ Parcel bundling configured
-- ✅ Node 18+ compatibility
-
-### Step 2: Develop Artifact
-Edit the generated files to build your artifact:
-
-**Component Structure:**
-```typescript
-// Example component structure
-import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
-
-export function MyArtifact() {
-  return (
-    <Card className="p-6">
-      <h1 className="text-2xl font-bold">Artifact Title</h1>
-      <Button className="mt-4">Action</Button>
-    </Card>
-  )
-}
-```
-
-**State Management:**
-```typescript
-import { useState } from "react"
-
-export function InteractiveArtifact() {
-  const [count, setCount] = useState(0)
-  
-  return (
-    <div>
-      <p>Count: {count}</p>
-      <Button onClick={() => setCount(count + 1)}>
-        Increment
-      </Button>
-    </div>
-  )
-}
-```
-
-### Step 3: Bundle to Single HTML
-```bash
-bash scripts/bundle-artifact.sh
-```
-
-**Requirements:** Project must have `index.html` in root directory
-
-**What it does:**
-- Installs bundling dependencies
-- Creates `.parcelrc` config with path aliases
-- Builds with Parcel (no source maps)
-- Inlines all assets into single HTML
-- Creates `bundle.html` - self-contained artifact
-
-### Step 4: Share Artifact
-Share the bundled HTML file in conversation as a claude.ai artifact.
-
-### Step 5: Testing (Optional)
-Use tools like Playwright or Puppeteer to test the artifact if issues arise.
-
-## Design Guidelines
-
-### Avoid "AI Slop"
-**Don't use:**
-- Excessive centered layouts
-- Purple gradients
-- Uniform rounded corners
-- Inter font (overused)
-
-**Instead use:**
-- Varied layouts and compositions
-- Diverse color palettes
-- Creative typography choices
-- Original design patterns
-
-### Component Usage
-**shadcn/ui Components:**
-- Button, Card, Dialog, Input
-- Table, Tabs, Badge, Avatar
-- Dropdown, Select, Checkbox
-- Accordion, Alert, Avatar
-
-**Example usage:**
-```typescript
-import { 
-  Button, 
-  Card, 
-  CardHeader, 
-  CardContent,
-  Dialog,
-  DialogContent,
-  DialogHeader 
-} from "@/components/ui"
-
-export function ComplexComponent() {
-  return (
-    <Card>
-      <CardHeader>
-        <h2>Title</h2>
-      </CardHeader>
-      <CardContent>
-        <p>Content</p>
-        <Button variant="outline">Action</Button>
-      </CardContent>
-    </Card>
-  )
-}
-```
-
-## Common Development Tasks
-
-### Creating Interactive Elements
-```typescript
-// Interactive toggle
-import { useState } from "react"
-import { Switch } from "@/components/ui/switch"
-
-export function Settings() {
-  const [darkMode, setDarkMode] = useState(false)
-  
-  return (
-    <div>
-      <label className="flex items-center space-x-2">
-        <Switch 
-          checked={darkMode} 
-          onCheckedChange={setDarkMode} 
-        />
-        <span>Dark Mode</span>
-      </label>
-    </div>
-  )
-}
-```
-
-### Data Display
-```typescript
-// Table with data
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-
-export function DataTable({ data }: { data: any[] }) {
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Name</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Actions</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {data.map((item, index) => (
-          <TableRow key={index}>
-            <TableCell>{item.name}</TableCell>
-            <TableCell>{item.status}</TableCell>
-            <TableCell>
-              <Button size="sm">Edit</Button>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  )
-}
-```
-
-### Form Handling
-```typescript
-// Form with validation
-import { useState } from "react"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-
-export function ContactForm() {
-  const [name, setName] = useState("")
-  const [email, setEmail] = useState("")
-  
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    console.log({ name, email })
-  }
-  
-  return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <div>
-        <Input 
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder="Name"
-        />
-      </div>
-      <div>
-        <Input 
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          placeholder="Email"
-        />
-      </div>
-      <Button type="submit">Submit</Button>
-    </form>
-  )
-}
-```
-
-## Performance Considerations
-
-### Bundle Optimization
-- Use React.memo for expensive components
-- Implement code splitting for large artifacts
-- Optimize images and assets
-- Minimize re-renders with proper state management
-
-### Component Patterns
-```typescript
-// Optimized component
-import { memo } from "react"
-
-const ExpensiveComponent = memo(({ data }) => {
-  return (
-    <div className="complex-visualization">
-      {/* Complex rendering logic */}
-    </div>
-  )
-})
-
-// Lazy loading
-import { lazy, Suspense } from "react"
-
-const HeavyComponent = lazy(() => import("./HeavyComponent"))
-
-export function App() {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <HeavyComponent />
-    </Suspense>
-  )
-}
-```
-
-## Usage Examples
-
-**Create interactive dashboard:**
-`/artifacts-builder "data visualization dashboard" "analytics-app"`
-
-**Build form-heavy interface:**
-`/artifacts-builder "contact form system" "forms-app"`
-
-**Develop game interface:**
-`/artifacts-builder "puzzle game UI" "game-interface"`
-
-**Create design tool:**
-`/artifacts-builder "canvas design tool" "design-studio"`
-
-Remember: Use this for complex artifacts requiring state management, routing, or rich interactions - not simple single-file HTML.

package/packages/droid/commands/artifacts-builder/scripts/bundle-artifact.sh

@@ -1,54 +0,0 @@
-#!/bin/bash
-set -e
-
-echo "📦 Bundling React app to single HTML artifact..."
-
-# Check if we're in a project directory
-if [ ! -f "package.json" ]; then
-  echo "❌ Error: No package.json found. Run this script from your project root."
-  exit 1
-fi
-
-# Check if index.html exists
-if [ ! -f "index.html" ]; then
-  echo "❌ Error: No index.html found in project root."
-  echo "   This script requires an index.html entry point."
-  exit 1
-fi
-
-# Install bundling dependencies
-echo "📦 Installing bundling dependencies..."
-pnpm add -D parcel @parcel/config-default parcel-resolver-tspaths html-inline
-
-# Create Parcel config with tspaths resolver
-if [ ! -f ".parcelrc" ]; then
-  echo "🔧 Creating Parcel configuration with path alias support..."
-  cat > .parcelrc << 'EOF'
-{
-  "extends": "@parcel/config-default",
-  "resolvers": ["parcel-resolver-tspaths", "..."]
-}
-EOF
-fi
-
-# Clean previous build
-echo "🧹 Cleaning previous build..."
-rm -rf dist bundle.html
-
-# Build with Parcel
-echo "🔨 Building with Parcel..."
-pnpm exec parcel build index.html --dist-dir dist --no-source-maps
-
-# Inline everything into single HTML
-echo "🎯 Inlining all assets into single HTML file..."
-pnpm exec html-inline dist/index.html > bundle.html
-
-# Get file size
-FILE_SIZE=$(du -h bundle.html | cut -f1)
-
-echo ""
-echo "✅ Bundle complete!"
-echo "📄 Output: bundle.html ($FILE_SIZE)"
-echo ""
-echo "You can now use this single HTML file as an artifact in Claude conversations."
-echo "To test locally: open bundle.html in your browser"

package/packages/droid/commands/artifacts-builder/scripts/init-artifact.sh

@@ -1,322 +0,0 @@
-#!/bin/bash
-
-# Exit on error
-set -e
-
-# Detect Node version
-NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
-
-echo "🔍 Detected Node.js version: $NODE_VERSION"
-
-if [ "$NODE_VERSION" -lt 18 ]; then
-  echo "❌ Error: Node.js 18 or higher is required"
-  echo "   Current version: $(node -v)"
-  exit 1
-fi
-
-# Set Vite version based on Node version
-if [ "$NODE_VERSION" -ge 20 ]; then
-  VITE_VERSION="latest"
-  echo "✅ Using Vite latest (Node 20+)"
-else
-  VITE_VERSION="5.4.11"
-  echo "✅ Using Vite $VITE_VERSION (Node 18 compatible)"
-fi
-
-# Detect OS and set sed syntax
-if [[ "$OSTYPE" == "darwin"* ]]; then
-  SED_INPLACE="sed -i ''"
-else
-  SED_INPLACE="sed -i"
-fi
-
-# Check if pnpm is installed
-if ! command -v pnpm &> /dev/null; then
-  echo "📦 pnpm not found. Installing pnpm..."
-  npm install -g pnpm
-fi
-
-# Check if project name is provided
-if [ -z "$1" ]; then
-  echo "❌ Usage: ./create-react-shadcn-complete.sh <project-name>"
-  exit 1
-fi
-
-PROJECT_NAME="$1"
-SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-COMPONENTS_TARBALL="$SCRIPT_DIR/shadcn-components.tar.gz"
-
-# Check if components tarball exists
-if [ ! -f "$COMPONENTS_TARBALL" ]; then
-  echo "❌ Error: shadcn-components.tar.gz not found in script directory"
-  echo "   Expected location: $COMPONENTS_TARBALL"
-  exit 1
-fi
-
-echo "🚀 Creating new React + Vite project: $PROJECT_NAME"
-
-# Create new Vite project (always use latest create-vite, pin vite version later)
-pnpm create vite "$PROJECT_NAME" --template react-ts
-
-# Navigate into project directory
-cd "$PROJECT_NAME"
-
-echo "🧹 Cleaning up Vite template..."
-$SED_INPLACE '/<link rel="icon".*vite\.svg/d' index.html
-$SED_INPLACE 's/<title>.*<\/title>/<title>'"$PROJECT_NAME"'<\/title>/' index.html
-
-echo "📦 Installing base dependencies..."
-pnpm install
-
-# Pin Vite version for Node 18
-if [ "$NODE_VERSION" -lt 20 ]; then
-  echo "📌 Pinning Vite to $VITE_VERSION for Node 18 compatibility..."
-  pnpm add -D vite@$VITE_VERSION
-fi
-
-echo "📦 Installing Tailwind CSS and dependencies..."
-pnpm install -D tailwindcss@3.4.1 postcss autoprefixer @types/node tailwindcss-animate
-pnpm install class-variance-authority clsx tailwind-merge lucide-react next-themes
-
-echo "⚙️  Creating Tailwind and PostCSS configuration..."
-cat > postcss.config.js << 'EOF'
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
-EOF
-
-echo "📝 Configuring Tailwind with shadcn theme..."
-cat > tailwind.config.js << 'EOF'
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ["class"],
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    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))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      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")],
-}
-EOF
-
-# Add Tailwind directives and CSS variables to index.css
-echo "🎨 Adding Tailwind directives and CSS variables..."
-cat > src/index.css << 'EOF'
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-EOF
-
-# Add path aliases to tsconfig.json
-echo "🔧 Adding path aliases to tsconfig.json..."
-node -e "
-const fs = require('fs');
-const config = JSON.parse(fs.readFileSync('tsconfig.json', 'utf8'));
-config.compilerOptions = config.compilerOptions || {};
-config.compilerOptions.baseUrl = '.';
-config.compilerOptions.paths = { '@/*': ['./src/*'] };
-fs.writeFileSync('tsconfig.json', JSON.stringify(config, null, 2));
-"
-
-# Add path aliases to tsconfig.app.json
-echo "🔧 Adding path aliases to tsconfig.app.json..."
-node -e "
-const fs = require('fs');
-const path = 'tsconfig.app.json';
-const content = fs.readFileSync(path, 'utf8');
-// Remove comments manually
-const lines = content.split('\n').filter(line => !line.trim().startsWith('//'));
-const jsonContent = lines.join('\n');
-const config = JSON.parse(jsonContent.replace(/\/\*[\s\S]*?\*\//g, '').replace(/,(\s*[}\]])/g, '\$1'));
-config.compilerOptions = config.compilerOptions || {};
-config.compilerOptions.baseUrl = '.';
-config.compilerOptions.paths = { '@/*': ['./src/*'] };
-fs.writeFileSync(path, JSON.stringify(config, null, 2));
-"
-
-# Update vite.config.ts
-echo "⚙️  Updating Vite configuration..."
-cat > vite.config.ts << 'EOF'
-import path from "path";
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-});
-EOF
-
-# Install all shadcn/ui dependencies
-echo "📦 Installing shadcn/ui dependencies..."
-pnpm install @radix-ui/react-accordion @radix-ui/react-aspect-ratio @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-menubar @radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle @radix-ui/react-toggle-group @radix-ui/react-tooltip
-pnpm install sonner cmdk vaul embla-carousel-react react-day-picker react-resizable-panels date-fns react-hook-form @hookform/resolvers zod
-
-# Extract shadcn components from tarball
-echo "📦 Extracting shadcn/ui components..."
-tar -xzf "$COMPONENTS_TARBALL" -C src/
-
-# Create components.json for reference
-echo "📝 Creating components.json config..."
-cat > components.json << 'EOF'
-{
-  "$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,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  }
-}
-EOF
-
-echo "✅ Setup complete! You can now use Tailwind CSS and shadcn/ui in your project."
-echo ""
-echo "📦 Included components (40+ total):"
-echo "  - accordion, alert, aspect-ratio, avatar, badge, breadcrumb"
-echo "  - button, calendar, card, carousel, checkbox, collapsible"
-echo "  - command, context-menu, dialog, drawer, dropdown-menu"
-echo "  - form, hover-card, input, label, menubar, navigation-menu"
-echo "  - popover, progress, radio-group, resizable, scroll-area"
-echo "  - select, separator, sheet, skeleton, slider, sonner"
-echo "  - switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip"
-echo ""
-echo "To start developing:"
-echo "  cd $PROJECT_NAME"
-echo "  pnpm dev"
-echo ""
-echo "📚 Import components like:"
-echo "  import { Button } from '@/components/ui/button'"
-echo "  import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'"
-echo "  import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'"