@amrhas82/agentic-kit 1.2.1 → 1.7.0

package/packages/opencode/command/algorithmic-art.md

@@ -0,0 +1,159 @@
+---
+description: Create algorithmic art using p5.js with seeded randomness and interactive parameter exploration
+argument-hint: <art-concept-or-theme>
+---
+
+Create original algorithmic art through computational processes, not static images. Output includes philosophy (.md), interactive viewer (.html), and generative algorithm (.js).
+
+## Step 1: Create Algorithmic Philosophy
+
+**Name your movement** (1-2 words): Focus concept for $ARGUMENTS
+
+**Articulate the philosophy** (4-6 paragraphs):
+
+Express how this philosophy manifests through:
+- Computational processes and mathematical relationships
+- Noise functions and randomness patterns  
+- Particle behaviors and field dynamics
+- Temporal evolution and system states
+- Parametric variation and emergent complexity
+
+**CRITICAL PRINCIPLES:**
+- **Emphasize craftsmanship** - Stress that the algorithm appears meticulously crafted, refined through countless iterations by a computational aesthetics master
+- **Algorithmic expression** - Beauty emerges from process, not final frame
+- **Parametric control** - Mathematical relationships, forces, behaviors
+- **Creative freedom** - Leave interpretive implementation space
+
+## Step 2: Express Philosophy Through Code
+
+**Conceptual Seed:** Identify the subtle conceptual thread from your request - a sophisticated, niche reference that enhances depth without announcing itself.
+
+**Implementation Structure:**
+
+```javascript
+// 1. PARAMETER ORGANIZATION
+let params = {
+    seed: 12345,
+    // Define YOUR parameters:
+    // - Counts: elements (particles, circles, branches)
+    // - Scales: size, speed, spacing  
+    // - Probabilities: event likelihood
+    // - Angles: rotation, direction
+    // - Colors: palette arrays
+    colorPalette: ['#d97757', '#6a9bcc', '#788c5d', '#b0aea5']
+};
+
+// 2. SEEDED RANDOMNESS (Critical for reproducibility)
+function initializeSeed(seed) {
+    randomSeed(seed);
+    noiseSeed(seed);
+}
+
+// 3. P5.JS LIFECYCLE
+function setup() {
+    createCanvas(800, 800);
+    initializeSeed(params.seed);
+    // Initialize your generative system
+    
+    // For static art: call noLoop() at end of setup
+    // For animated art: let draw() keep running
+}
+
+function draw() {
+    // Option 1: Static generation (runs once, stops)
+    // Option 2: Animated (continuous updates)
+    // Option 3: User-triggered (noLoop() + redraw())
+}
+
+// 4. CLASSES FOR ENTITIES
+class Entity {
+    constructor() {
+        // Initialize with seeded randomness
+    }
+    
+    update() {
+        // Physics, behavior, interactions
+    }
+    
+    display() {
+        // Rendering logic
+    }
+}
+```
+
+## Step 3: Best Practices
+
+**Performance Optimization:**
+- Pre-calculate what you can
+- Use spatial hashing for collision detection
+- Limit expensive operations (sqrt, trig)
+- Target 60fps for animation
+
+**Color & Visual:**
+```javascript
+// Color utilities
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
+}
+
+function colorFromPalette(index) {
+    return params.colorPalette[index % params.colorPalette.length];
+}
+
+// Organic variation
+function getNoiseValue(x, y, scale = 0.01) {
+    return noise(x * scale, y * scale);
+}
+```
+
+**Common Patterns:**
+```javascript
+// Fading trails
+function fadeBackground(opacity) {
+    fill(250, 249, 245, opacity);
+    noStroke();
+    rect(0, 0, width, height);
+}
+
+// Vector utilities
+function vectorFromAngle(angle, magnitude = 1) {
+    return createVector(cos(angle), sin(angle)).mult(magnitude);
+}
+```
+
+## Step 4: Create Interactive Viewer
+
+**Viewer Template Structure:**
+- Anthropic branding (colors, fonts, layout)
+- Seed navigation section
+- Parameter controls
+- Self-contained HTML with embedded p5.js
+
+**Key Features:**
+- Real-time parameter adjustment
+- Seed-based regeneration
+- Export functionality
+- Responsive design
+
+## Examples
+
+**"Organic Turbulence"**
+Philosophy: Chaos constrained by natural law, order emerging from disorder.
+Algorithm: Flow fields driven by layered Perlin noise. Thousands of particles following vector forces, their trails accumulating into organic density maps. Multiple noise octaves create turbulent regions and calm zones. Color emerges from velocity and density - fast particles burn bright, slow ones fade to shadow. The algorithm runs until equilibrium - a meticulously tuned balance where every parameter was refined through countless iterations by a master of computational aesthetics.
+
+**"Quantum Harmonics"**  
+Philosophy: Discrete entities exhibiting wave-like interference patterns.
+Algorithm: Particles initialized on a grid, each carrying a phase value that evolves through sine waves. When particles are near, their phases interfere - constructive interference creates bright nodes, destructive creates voids. Simple harmonic motion generates complex emergent mandalas. The result of painstaking frequency calibration where every ratio was carefully chosen to produce resonant beauty.
+
+## Usage
+
+**Generate art for theme:** `/algorithmic-art quantum-harmonics`
+**Create custom concept:** `/algorithmic-art organic-turbulence`
+**Focus on concept:** `/algorithmic-art recursive-whispers`
+
+Remember: Focus on creating LIVING ALGORITHMS that express computational beauty through process, not static images with randomness.

package/packages/opencode/command/artifacts-builder.md

@@ -0,0 +1,285 @@
+---
+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/skills/brainstorming/SKILL.md → opencode/command/brainstorming.md}

@@ -1,15 +1,11 @@
 ---
-name: brainstorming
-description: Use when creating or developing, before writing code or implementation plans - refines rough ideas into fully-formed designs through collaborative questioning, alternative exploration, and incremental validation. Don't use during clear 'mechanical' processes
+description: Turn rough ideas into fully-formed designs through collaborative questioning and exploration
+argument-hint: <topic-or-idea>
 ---
 
-# Brainstorming Ideas Into Designs
-
-## Overview
-
 Help turn ideas into fully formed designs and specs through natural collaborative dialogue.
 
-Start by understanding the current project context, then ask questions one at a time to refine the idea. Once you understand what you're building, present the design in small sections (200-300 words), checking after each section whether it looks right so far.
+Start by understanding the current project context, then ask questions one at a time to refine the idea: $ARGUMENTS. Once you understand what you're building, present the design in small sections (200-300 words), checking after each section whether it looks right so far.
 
 ## The Process
 
@@ -36,13 +32,12 @@ Start by understanding the current project context, then ask questions one at a
 
 **Documentation:**
 - Write the validated design to `docs/plans/YYYY-MM-DD-<topic>-design.md`
-- Use elements-of-style:writing-clearly-and-concisely skill if available
 - Commit the design document to git
 
 **Implementation (if continuing):**
 - Ask: "Ready to set up for implementation?"
-- Use superpowers:using-git-worktrees to create isolated workspace
-- Use superpowers:writing-plans to create detailed implementation plan
+- Use git worktrees to create isolated workspace
+- Create detailed implementation plan
 
 ## Key Principles
 

package/packages/opencode/command/brand-guidelines.md

@@ -0,0 +1,123 @@
+---
+description: Apply Anthropic's official brand colors and typography to any artifact
+argument-hint: <artifact-type>
+---
+
+Apply Anthropic's official brand identity and style resources to your work.
+
+## Brand Colors
+
+**Main Colors:**
+- **Dark**: `#141413` - Primary text and dark backgrounds
+- **Light**: `#faf9f5` - Light backgrounds and text on dark
+- **Mid Gray**: `#b0aea5` - Secondary elements
+- **Light Gray**: `#e8e6dc` - Subtle backgrounds
+
+**Accent Colors:**
+- **Orange**: `#d97757` - Primary accent
+- **Blue**: `#6a9bcc` - Secondary accent  
+- **Green**: `#788c5d` - Tertiary accent
+
+## Typography
+
+**Font Selection:**
+- **Headings**: Poppins (with Arial fallback)
+- **Body Text**: Lora (with Georgia fallback)
+
+**Font Application Rules:**
+- Headings (24pt+): Poppins font
+- Body text: Lora font
+- Smart color selection based on background
+- Preserves text hierarchy and formatting
+
+## Usage Guidelines
+
+### Smart Font Application
+- Automatically applies Poppins to headings
+- Applies Lora to body text
+- Provides fallback fonts if custom fonts unavailable
+- Maintains readability across all systems
+
+### Color Application
+- Main colors for backgrounds and text
+- Accent colors for highlights, buttons, and callouts
+- Cycles through accent palette for visual interest
+- Maintains brand consistency
+
+### Visual Hierarchy
+- Large text (24pt+): Poppins
+- Regular text: Lora
+- Consistent color application
+- Proper contrast ratios
+
+## Implementation
+
+### CSS Example
+```css
+:root {
+  --anthropic-dark: #141413;
+  --anthropic-light: #faf9f5;
+  --anthropic-mid-gray: #b0aea5;
+  --anthropic-light-gray: #e8e6dc;
+  --anthropic-orange: #d97757;
+  --anthropic-blue: #6a9bcc;
+  --anthropic-green: #788c5d;
+}
+
+.heading {
+  font-family: 'Poppins', Arial, sans-serif;
+  color: var(--anthropic-dark);
+}
+
+.body {
+  font-family: 'Lora', Georgia, serif;
+  color: var(--anthropic-dark);
+}
+
+.accent {
+  color: var(--anthropic-orange);
+}
+```
+
+### Python Example (python-pptx)
+```python
+from pptx.util import RGBColor
+
+# Brand colors as RGB
+ANTHROPIC_COLORS = {
+    'dark': RGBColor(20, 20, 19),
+    'light': RGBColor(250, 249, 245),
+    'mid_gray': RGBColor(176, 174, 165),
+    'orange': RGBColor(217, 119, 87),
+    'blue': RGBColor(106, 155, 204),
+    'green': RGBColor(120, 140, 93)
+}
+
+# Apply to shapes and text
+shape.fill.solid()
+shape.fill.fore_color.rgb = ANTHROPIC_COLORS['orange']
+```
+
+## Best Practices
+
+- Use dark/light colors for text and backgrounds
+- Apply accent colors sparingly for emphasis
+- Maintain proper contrast ratios
+- Use typography hierarchy consistently
+- Consider accessibility in color choices
+
+## Usage Examples
+
+**Apply brand to presentation:**
+`/brand-guidelines presentation slides`
+
+**Apply brand to document:**
+`/brand-guidelines technical document`
+
+**Apply brand to web page:**
+`/brand-guidelines landing page`
+
+**Apply brand to report:**
+`/brand-guidelines quarterly report`
+
+Remember: Brand consistency builds trust and recognition. Apply these guidelines consistently across all materials.