clamper-ai 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clamper-ai",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Transform your OpenClaw agent into a production-ready AI assistant with memory, skills, and a dashboard",
   "type": "module",
   "bin": {

package/skills/anthropic-frontend-design/SKILL.md

@@ -0,0 +1,307 @@
+---
+name: Anthropic Frontend Design
+description: Frontend design system and UI/UX best practices following Anthropic's design philosophy for building polished, accessible interfaces
+author: clamper
+version: 1.0.0
+tier: pro
+category: Developer
+tags: [frontend, design, ui, ux, css, react, tailwind, accessibility, design-system]
+triggers: [frontend design, ui design, design system, build ui, make it look good, anthropic style, modern design]
+api_auth: none
+---
+
+# Anthropic Frontend Design
+
+A comprehensive frontend design skill that guides building polished, modern, and accessible user interfaces. Follows Anthropic's design philosophy: clean, minimal, functional, and human-centered. No API required — this is a design system and code generation skill.
+
+## Design Principles
+
+1. **Clarity over cleverness** — Every element should have a clear purpose
+2. **Generous whitespace** — Let content breathe with ample padding and margins
+3. **Subtle depth** — Use soft shadows and borders instead of harsh contrasts
+4. **Consistent rhythm** — Maintain a spacing scale and type hierarchy
+5. **Accessible by default** — WCAG 2.1 AA minimum, semantic HTML, keyboard navigation
+6. **Progressive disclosure** — Show only what's needed, reveal complexity on demand
+
+## Color System
+
+### Light Theme
+```css
+:root {
+  --color-bg-primary: #FFFFFF;
+  --color-bg-secondary: #F7F7F8;
+  --color-bg-tertiary: #ECECF1;
+  --color-bg-accent: #F0EEFF;
+
+  --color-text-primary: #1A1A2E;
+  --color-text-secondary: #6B6B80;
+  --color-text-tertiary: #9B9BAF;
+  --color-text-inverse: #FFFFFF;
+
+  --color-border-default: #E5E5EA;
+  --color-border-hover: #C8C8D0;
+
+  --color-accent-primary: #6B4EFF;
+  --color-accent-hover: #5A3DE8;
+  --color-accent-subtle: #F0EEFF;
+
+  --color-success: #00A67E;
+  --color-warning: #F5A623;
+  --color-error: #EF4444;
+  --color-info: #3B82F6;
+}
+```
+
+### Dark Theme
+```css
+[data-theme="dark"] {
+  --color-bg-primary: #1A1A2E;
+  --color-bg-secondary: #23233A;
+  --color-bg-tertiary: #2D2D48;
+  --color-bg-accent: #2A2545;
+
+  --color-text-primary: #ECECF1;
+  --color-text-secondary: #9B9BAF;
+  --color-text-tertiary: #6B6B80;
+  --color-text-inverse: #1A1A2E;
+
+  --color-border-default: #3A3A52;
+  --color-border-hover: #4A4A65;
+
+  --color-accent-primary: #8B7AFF;
+  --color-accent-hover: #9D8FFF;
+  --color-accent-subtle: #2A2545;
+}
+```
+
+## Typography
+
+```css
+:root {
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
+
+  --text-xs: 0.75rem;    /* 12px */
+  --text-sm: 0.875rem;   /* 14px */
+  --text-base: 1rem;     /* 16px */
+  --text-lg: 1.125rem;   /* 18px */
+  --text-xl: 1.25rem;    /* 20px */
+  --text-2xl: 1.5rem;    /* 24px */
+  --text-3xl: 1.875rem;  /* 30px */
+  --text-4xl: 2.25rem;   /* 36px */
+
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.75;
+
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.025em;
+}
+```
+
+## Spacing Scale
+
+```css
+:root {
+  --space-0: 0;
+  --space-1: 0.25rem;   /* 4px */
+  --space-2: 0.5rem;    /* 8px */
+  --space-3: 0.75rem;   /* 12px */
+  --space-4: 1rem;      /* 16px */
+  --space-5: 1.25rem;   /* 20px */
+  --space-6: 1.5rem;    /* 24px */
+  --space-8: 2rem;      /* 32px */
+  --space-10: 2.5rem;   /* 40px */
+  --space-12: 3rem;     /* 48px */
+  --space-16: 4rem;     /* 64px */
+  --space-20: 5rem;     /* 80px */
+  --space-24: 6rem;     /* 96px */
+}
+```
+
+## Component Patterns
+
+### Button
+```jsx
+function Button({ variant = "primary", size = "md", children, ...props }) {
+  const base = "inline-flex items-center justify-center font-medium rounded-lg transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-primary disabled:opacity-50 disabled:cursor-not-allowed";
+
+  const variants = {
+    primary: "bg-accent-primary text-white hover:bg-accent-hover shadow-sm",
+    secondary: "bg-bg-secondary text-text-primary border border-border-default hover:border-border-hover hover:bg-bg-tertiary",
+    ghost: "text-text-secondary hover:text-text-primary hover:bg-bg-secondary",
+    danger: "bg-error text-white hover:bg-red-600",
+  };
+
+  const sizes = {
+    sm: "px-3 py-1.5 text-sm",
+    md: "px-4 py-2 text-base",
+    lg: "px-6 py-3 text-lg",
+  };
+
+  return (
+    <button className={`${base} ${variants[variant]} ${sizes[size]}`} {...props}>
+      {children}
+    </button>
+  );
+}
+```
+
+### Card
+```jsx
+function Card({ title, description, children, className = "" }) {
+  return (
+    <div className={`bg-bg-primary border border-border-default rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow ${className}`}>
+      {title && <h3 className="text-lg font-semibold text-text-primary mb-1">{title}</h3>}
+      {description && <p className="text-sm text-text-secondary mb-4">{description}</p>}
+      {children}
+    </div>
+  );
+}
+```
+
+### Input
+```jsx
+function Input({ label, error, helper, ...props }) {
+  return (
+    <div className="space-y-1.5">
+      {label && <label className="block text-sm font-medium text-text-primary">{label}</label>}
+      <input
+        className={`w-full px-3 py-2 rounded-lg border text-text-primary bg-bg-primary placeholder:text-text-tertiary transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:border-transparent ${
+          error ? "border-error" : "border-border-default hover:border-border-hover"
+        }`}
+        {...props}
+      />
+      {error && <p className="text-sm text-error">{error}</p>}
+      {helper && !error && <p className="text-sm text-text-tertiary">{helper}</p>}
+    </div>
+  );
+}
+```
+
+### Modal / Dialog
+```jsx
+function Modal({ open, onClose, title, children }) {
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="fixed inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
+      <div className="relative bg-bg-primary rounded-2xl shadow-2xl border border-border-default max-w-lg w-full mx-4 p-6 animate-in fade-in zoom-in-95 duration-200">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-semibold text-text-primary">{title}</h2>
+          <button onClick={onClose} className="p-1 rounded-lg hover:bg-bg-secondary text-text-tertiary hover:text-text-primary transition-colors">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M5 5l10 10M15 5L5 15" />
+            </svg>
+          </button>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}
+```
+
+### Toast / Notification
+```jsx
+function Toast({ type = "info", message, onDismiss }) {
+  const icons = { success: "check-circle", error: "x-circle", warning: "alert-triangle", info: "info" };
+  const colors = { success: "text-success", error: "text-error", warning: "text-warning", info: "text-info" };
+
+  return (
+    <div className="flex items-center gap-3 px-4 py-3 bg-bg-primary border border-border-default rounded-xl shadow-lg animate-in slide-in-from-right duration-300">
+      <span className={colors[type]}>●</span>
+      <p className="text-sm text-text-primary flex-1">{message}</p>
+      <button onClick={onDismiss} className="text-text-tertiary hover:text-text-primary text-sm">Dismiss</button>
+    </div>
+  );
+}
+```
+
+## Layout Patterns
+
+### Page Layout
+```jsx
+function PageLayout({ children }) {
+  return (
+    <div className="min-h-screen bg-bg-secondary">
+      <nav className="sticky top-0 z-40 bg-bg-primary/80 backdrop-blur-lg border-b border-border-default">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+          {/* Logo + Navigation */}
+        </div>
+      </nav>
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {children}
+      </main>
+    </div>
+  );
+}
+```
+
+### Sidebar Layout
+```jsx
+function SidebarLayout({ sidebar, children }) {
+  return (
+    <div className="flex min-h-screen">
+      <aside className="w-64 bg-bg-primary border-r border-border-default p-4 flex-shrink-0">
+        {sidebar}
+      </aside>
+      <main className="flex-1 p-8 bg-bg-secondary overflow-auto">
+        {children}
+      </main>
+    </div>
+  );
+}
+```
+
+## Accessibility Checklist
+
+- [ ] All interactive elements are keyboard accessible
+- [ ] Focus indicators are visible (never `outline: none` without replacement)
+- [ ] Color contrast ratios meet WCAG AA (4.5:1 for text, 3:1 for large text)
+- [ ] Form inputs have associated labels
+- [ ] Images have alt text
+- [ ] ARIA landmarks used for page regions
+- [ ] Modals trap focus and return it on close
+- [ ] Animations respect `prefers-reduced-motion`
+- [ ] Text is resizable up to 200% without loss of content
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+## Clamper Integration
+
+When the user asks for frontend design help:
+1. Identify the component or layout they need
+2. Generate code using the design system tokens above
+3. Default to React + Tailwind CSS unless specified otherwise
+4. Always include accessibility features
+5. Offer both light and dark theme support
+6. Provide responsive variants for mobile/tablet/desktop
+
+### Example Interaction
+```
+User: Build me a settings page
+Assistant: *generates a settings page with sidebar navigation, form sections, and save/cancel buttons following the design system*
+
+User: Make it dark mode
+Assistant: *adds data-theme="dark" support and updates color tokens*
+```
+
+## Setup
+
+No installation required. This skill provides design guidance and code generation using standard web technologies (HTML, CSS, React, Tailwind CSS).
+
+Recommended dependencies for projects:
+```bash
+npm install tailwindcss @tailwindcss/forms @tailwindcss/typography
+npm install @fontsource/inter
+```

package/skills/anylist/SKILL.md

@@ -0,0 +1,295 @@
+---
+name: AnyList
+description: Shopping list management, meal planning, and recipe organization via AnyList integration
+author: clamper
+version: 1.0.0
+tier: pro
+category: Productivity
+tags: [shopping, grocery, lists, meal-planning, recipes, anylist, organization]
+triggers: [shopping list, grocery list, add to list, meal plan, anylist, what do i need to buy]
+api_auth: credentials
+---
+
+# AnyList
+
+Manage shopping lists, meal plans, and recipes through AnyList. Add items, organize lists, plan meals for the week, and share lists with family. Uses the unofficial AnyList API via reverse-engineered endpoints.
+
+## Dependencies
+
+```bash
+pip install anylist
+```
+
+The `anylist` Python package provides an unofficial API client.
+
+## Setup
+
+### Environment Variables
+```bash
+export ANYLIST_EMAIL="your-email@example.com"
+export ANYLIST_PASSWORD="your-password"
+```
+
+### Authentication
+```python
+import asyncio
+from anylist import AnyList
+
+async def connect():
+    anylist = AnyList(email="your-email@example.com", password="your-password")
+    await anylist.login()
+    return anylist
+
+client = asyncio.run(connect())
+```
+
+## Usage
+
+### List All Shopping Lists
+
+```python
+import asyncio
+from anylist import AnyList
+
+async def get_lists():
+    al = AnyList(email=EMAIL, password=PASSWORD)
+    await al.login()
+
+    for lst in al.lists:
+        item_count = len([i for i in lst.items if not i.checked])
+        print(f"- {lst.name}: {item_count} items remaining")
+
+    await al.teardown()
+
+asyncio.run(get_lists())
+```
+
+Output:
+```
+- Grocery: 12 items remaining
+- Costco: 5 items remaining
+- Target: 3 items remaining
+```
+
+### Get Items from a List
+
+```python
+async def get_items(list_name):
+    al = AnyList(email=EMAIL, password=PASSWORD)
+    await al.login()
+
+    lst = al.get_list(list_name)
+    if lst:
+        print(f"\n{lst.name}:")
+        for item in lst.items:
+            status = "x" if item.checked else " "
+            detail = f" ({item.detail})" if item.detail else ""
+            print(f"  [{status}] {item.name}{detail}")
+
+    await al.teardown()
+
+asyncio.run(get_items("Grocery"))
+```
+
+Output:
+```
+Grocery:
+  [ ] Milk (whole, organic)
+  [ ] Eggs (dozen)
+  [ ] Bread
+  [x] Butter
+  [ ] Chicken breast (2 lbs)
+```
+
+### Add Item to List
+
+```python
+async def add_item(list_name, item_name, detail=None):
+    al = AnyList(email=EMAIL, password=PASSWORD)
+    await al.login()
+
+    lst = al.get_list(list_name)
+    if lst:
+        item = al.create_item(name=item_name, detail=detail)
+        lst.add_item(item)
+        await al.save()
+        print(f"Added '{item_name}' to {list_name}")
+
+    await al.teardown()
+
+asyncio.run(add_item("Grocery", "Avocados", "4 ripe"))
+```
+
+### Add Multiple Items
+
+```python
+async def add_multiple(list_name, items):
+    al = AnyList(email=EMAIL, password=PASSWORD)
+    await al.login()
+
+    lst = al.get_list(list_name)
+    if lst:
+        for name, detail in items:
+            item = al.create_item(name=name, detail=detail)
+            lst.add_item(item)
+        await al.save()
+        print(f"Added {len(items)} items to {list_name}")
+
+    await al.teardown()
+
+items = [
+    ("Bananas", "1 bunch"),
+    ("Greek Yogurt", "plain, large"),
+    ("Spinach", "baby, 1 bag"),
+    ("Salmon", "2 fillets"),
+]
+asyncio.run(add_multiple("Grocery", items))
+```
+
+### Check Off / Remove Items
+
+```python
+async def check_item(list_name, item_name):
+    al = AnyList(email=EMAIL, password=PASSWORD)
+    await al.login()
+
+    lst = al.get_list(list_name)
+    if lst:
+        for item in lst.items:
+            if item.name.lower() == item_name.lower():
+                item.checked = True
+                await al.save()
+                print(f"Checked off '{item_name}'")
+                break
+
+    await al.teardown()
+
+asyncio.run(check_item("Grocery", "Milk"))
+```
+
+### Create a New List
+
+```python
+async def create_list(name):
+    al = AnyList(email=EMAIL, password=PASSWORD)
+    await al.login()
+
+    new_list = al.create_list(name=name)
+    await al.save()
+    print(f"Created list: {name}")
+
+    await al.teardown()
+
+asyncio.run(create_list("Party Supplies"))
+```
+
+### Get Recipes
+
+```python
+async def get_recipes():
+    al = AnyList(email=EMAIL, password=PASSWORD)
+    await al.login()
+
+    for recipe in al.recipes[:10]:
+        print(f"- {recipe.name}")
+        if recipe.note:
+            print(f"  Note: {recipe.note}")
+
+    await al.teardown()
+
+asyncio.run(get_recipes())
+```
+
+### Add Recipe Ingredients to Shopping List
+
+```python
+async def recipe_to_list(recipe_name, list_name):
+    al = AnyList(email=EMAIL, password=PASSWORD)
+    await al.login()
+
+    recipe = None
+    for r in al.recipes:
+        if r.name.lower() == recipe_name.lower():
+            recipe = r
+            break
+
+    if recipe:
+        lst = al.get_list(list_name)
+        for ingredient in recipe.ingredients:
+            item = al.create_item(name=ingredient.name, detail=ingredient.detail)
+            lst.add_item(item)
+        await al.save()
+        print(f"Added {len(recipe.ingredients)} ingredients from '{recipe_name}' to '{list_name}'")
+
+    await al.teardown()
+
+asyncio.run(recipe_to_list("Chicken Parmesan", "Grocery"))
+```
+
+## Meal Planning
+
+### View Meal Plan
+```python
+async def get_meal_plan():
+    al = AnyList(email=EMAIL, password=PASSWORD)
+    await al.login()
+
+    for day in al.meal_plan:
+        print(f"\n{day.date}:")
+        for meal in day.meals:
+            print(f"  {meal.type}: {meal.recipe_name or meal.name}")
+
+    await al.teardown()
+
+asyncio.run(get_meal_plan())
+```
+
+Output:
+```
+Monday:
+  Breakfast: Overnight Oats
+  Lunch: Chicken Caesar Salad
+  Dinner: Pasta Bolognese
+
+Tuesday:
+  Breakfast: Smoothie Bowl
+  Dinner: Grilled Salmon
+```
+
+## Clamper Integration
+
+When the user wants to manage shopping/grocery lists:
+1. Authenticate with stored AnyList credentials
+2. List available shopping lists when asked
+3. Add items naturally: "add milk and eggs to grocery list"
+4. Parse quantities and details from natural language
+5. Support meal planning queries: "what's for dinner this week?"
+6. Add recipe ingredients to shopping list on request
+
+### Example Interaction
+```
+User: Add these to my grocery list: 2 lbs chicken breast, a dozen eggs, whole milk, and bread
+Assistant: *connects to AnyList, adds 4 items*
+Added to Grocery list:
+- Chicken breast (2 lbs)
+- Eggs (dozen)
+- Whole milk
+- Bread
+
+User: What's on my Costco list?
+Assistant: *fetches Costco list*
+Your Costco list has 5 items:
+- [ ] Paper towels (bulk pack)
+- [ ] Olive oil (2L)
+- [ ] Rotisserie chicken
+- [x] Laundry detergent
+- [ ] Trash bags
+```
+
+## Setup
+
+1. Install the AnyList Python package: `pip install anylist`
+2. Set `ANYLIST_EMAIL` and `ANYLIST_PASSWORD` environment variables
+3. AnyList account required (free tier works, AnyList+ unlocks extra features)
+
+**Note:** This uses an unofficial API. Functionality may change if AnyList updates their backend.