Add 6 new agent skills + GitHub Actions npm publish workflow

Author: officialnullobjectweb

.github/workflows/publish.yml

@@ -0,0 +1,41 @@
+name: Publish numb-design to npm
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "packages/numb-design/**"
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: packages/numb-design
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: "https://registry.npmjs.org"
+
+      - run: npm ci
+        continue-on-error: true
+
+      - name: Bump version
+        run: |
+          git config user.name "github-actions"
+          git config user.email "github-actions@github.com"
+          npm version patch -m "Bump to %s [skip ci]"
+
+      - name: Publish to npm
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Push version bump
+        run: git push origin main --follow-tags
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+packages/numb-design/node_modules
 /.pnp
 .pnp.*
 .yarn/*

packages/numb-design/agent-skills/anthropic-brand/SKILL.md

@@ -0,0 +1,79 @@
+# Anthropic Brand Guidelines
+
+Official brand guidelines for Anthropic-fronted interfaces. Establishes the visual identity system including color, typography, and usage rules.
+
+## Brand Colors
+
+### Primary Palette
+| Token | Hex | Usage |
+|-------|-----|-------|
+| `brand-primary` | `#D4A574` | Primary accent, highlights, key CTAs |
+| `brand-primary-dark` | `#B8894F` | Primary on dark backgrounds |
+| `brand-bg` | `#FFFFFF` | Light background |
+| `brand-bg-dark` | `#1A1A1A` | Dark background |
+| `brand-text` | `#1A1A1A` | Light mode text |
+| `brand-text-dark` | `#F5F5F5` | Dark mode text |
+
+### Accent Colors
+| Token | Hex | Usage |
+|-------|-----|-------|
+| `accent-green` | `#4ADE80` | Success states |
+| `accent-amber` | `#FBBF24` | Warning states |
+| `accent-red` | `#F87171` | Error states |
+| `accent-blue` | `#60A5FA` | Info states |
+
+### Neutral Scale
+| Token | Hex | Usage |
+|-------|-----|-------|
+| `neutral-50` | `#F9FAFB` | Backgrounds (lightest) |
+| `neutral-100` | `#F3F4F6` | Card backgrounds |
+| `neutral-200` | `#E5E7EB` | Borders |
+| `neutral-300` | `#D1D5DB` | Disabled text |
+| `neutral-400` | `#9CA3AF` | Placeholder text |
+| `neutral-500` | `#6B7280` | Secondary text |
+| `neutral-600` | `#4B5563` | Body text |
+| `neutral-700` | `#374151` | Strong text |
+| `neutral-800` | `#1F2937` | Headings |
+| `neutral-900` | `#111827` | Darkest text |
+
+## Typography
+
+### Primary Font: Poppins
+- **Weights**: 300 (Light), 400 (Regular), 500 (Medium), 600 (Semi-Bold), 700 (Bold)
+- **Usage**: Headlines, titles, navigation, buttons
+- **Fallback**: sans-serif
+
+### Secondary Font: Lora
+- **Weights**: 400 (Regular), 500 (Medium), 600 (Semi-Bold), 700 (Bold)
+- **Usage**: Body text, descriptions, long-form content
+- **Fallback**: serif
+
+### Type Scale
+| Token | Size | Weight | Line Height | Usage |
+|-------|------|--------|-------------|-------|
+| `text-xs` | 12px | 400 | 1.5 | Captions, footnotes |
+| `text-sm` | 14px | 400 | 1.5 | Body, descriptions |
+| `text-base` | 16px | 400 | 1.5 | Default body |
+| `text-lg` | 18px | 500 | 1.4 | Lead text |
+| `text-xl` | 20px | 500 | 1.4 | Subheadings |
+| `text-2xl` | 24px | 600 | 1.3 | Section headings |
+| `text-3xl` | 30px | 600 | 1.25 | Page headings |
+| `text-4xl` | 36px | 700 | 1.2 | Hero headings |
+| `text-5xl` | 48px | 700 | 1.15 | Large hero |
+| `text-6xl` | 60px | 700 | 1.1 | Display |
+
+## Usage Rules
+
+1. **Always** use Poppins for headings and buttons. Never use Lora for UI elements.
+2. **Always** use Lora for body text in marketing/content pages. System UI can use Poppins at text-sm.
+3. **Primary accent** (#D4A574) is for key interactive elements only — not for decorative use.
+4. **Neutral scale** handles 95% of UI surface area. Accent colors are highlights.
+5. **Dark mode** is required for any production interface. Use `-dark` variants.
+6. **Do not** add additional colors to the brand palette without design review.
+7. **Do not** use brand colors at low opacity for text — use the neutral scale instead.
+8. **Do not** stretch or distort Poppins or Lora typefaces.
+
+## Accessibility
+- All text on brand backgrounds must meet WCAG AA (4.5:1 for body, 3:1 for large text)
+- Brand accent #D4A574 passes AA on #1A1A1A but not on #FFFFFF — use darker variant (#B8894F) on light backgrounds
+- Focus indicators must use 2px offset ring with brand or accent color

packages/numb-design/agent-skills/anthropic-canvas/SKILL.md

@@ -0,0 +1,65 @@
+# Canvas Design — Anthropic Skills
+
+AI-assisted visual art and philosophy creation skill. Specializes in generating beautiful, thought-provoking visuals (.png, .pdf) using canvas rendering techniques.
+
+## Core Capabilities
+
+1. **Visual Art Creation** — Generate abstract art, data visualizations, diagrams, and illustrations using canvas rendering
+2. **Philosophical Visualization** — Create visual representations of abstract concepts, ideas, and philosophies
+3. **Data Visualization** — Transform data into compelling visual narratives
+4. **Diagram Generation** — Create system diagrams, flowcharts, architecture diagrams, and relationship maps
+5. **Poster/Print Design** — Generate printable artwork with proper resolution and layout
+
+## Techniques
+
+### Canvas Rendering
+- Use HTML Canvas 2D API for programmatic art generation
+- Support for shapes, paths, gradients, patterns, and text
+- Anti-aliased rendering for crisp output
+- Export to PNG at 72-300 DPI depending on use case
+
+### Visual Styles
+- **Abstract/Surreal** — Generative shapes, color fields, organic forms
+- **Minimalist** — Clean lines, ample whitespace, restrained palette
+- **Data-Driven** — Charts, graphs, networks, trees
+- **Diagrammatic** — Boxes, arrows, connections, annotations
+- **Typographic** — Text as visual element, expressive typography
+
+### Color Theory
+- Complementary, analogous, triadic, monochromatic schemes
+- Gradient generation with smooth color transitions
+- Opacity and blending modes for depth
+- Dark/light background adaptation
+
+## Output Formats
+
+- **PNG** — Best for screens, social media, web (lossless, transparency support)
+- **PDF** — Best for printing, documents, high-resolution output (vector text, scalable)
+
+## Use Cases
+
+1. **Philosophical diagrams** — Visualize frameworks, mental models, systems thinking
+2. **Concept art** — Abstract representations of ideas, metaphors, concepts
+3. **Data storytelling** — Narrative-driven data visualization
+4. **Visual essays** — Combine text and imagery in a single canvas
+5. **Infographics** — Information-dense visual communication
+6. **Abstract posters** — Generate printable artwork
+7. **System architecture** — Diagram complex system relationships
+8. **Mind maps** — Hierarchical concept visualization
+
+## Best Practices
+
+1. **Always set canvas resolution** for the intended output (2x for retina)
+2. **Use `window.devicePixelRatio`** scaling for sharp rendering
+3. **Organize drawing into layers** (background → shapes → text → overlays)
+4. **Use `save()`/`restore()`** for isolated transformations
+5. **Pre-define color palettes** before starting to ensure harmony
+6. **Export at appropriate DPI** — 72 for web, 300 for print
+7. **Test output** for legibility at intended display size
+
+## Anti-Patterns
+- Don't use canvas for standard UI layouts (use DOM/CSS)
+- Don't forget devicePixelRatio scaling (results in blurry output)
+- Don't hardcode pixel values without considering output resolution
+- Don't ignore text legibility (ensure sufficient size and contrast)
+- Don't render at larger than needed resolution (performance issue)

packages/numb-design/agent-skills/anthropic-frontend/SKILL.md

@@ -0,0 +1,95 @@
+# Frontend Design — Anthropic Skills
+
+Production-grade frontend UI design skill created by Anthropic. Build beautiful, responsive, accessible user interfaces with a bold aesthetic.
+
+## Core Principles
+
+1. **Bold, Intentional Design** — Avoid generic layouts. Use asymmetric grids, overlapping elements, and clear visual hierarchy.
+2. **Accessibility is Not Optional** — Every component must meet WCAG 2.2 AA minimum. Forms need labels, buttons need aria attributes, colors need contrast verification.
+3. **Performance is Design** — Every component must be performant. Use CSS transforms and opacity for animations. Lazy load images. Avoid layout shifts.
+4. **Responsive by Default** — Mobile-first approach. Think in terms of breakpoints: single column on mobile, multi-column on desktop.
+5. **Dark Mode is Standard** — Every component needs a dark mode variant. Use CSS variables for theme switching.
+
+## Design Approach
+
+### Visual Hierarchy
+- Use size, weight, and color to create clear hierarchy
+- Stack headings, not inline them
+- White space is a design tool
+
+### Color System
+- Start with neutral palette: gray-50 through gray-950
+- Add one primary accent color
+- Add one secondary accent for variety
+- Keep semantic meaning: success (green), warning (amber), error (red)
+
+### Typography
+- Sans-serif for UI (Inter, SF Pro, or system-ui)
+- Limit to 2 families max: one for headings, one for body
+- Use integer font sizes: 14, 16, 18, 20, 24, 30, 36, 48
+- Line height: 1.5 body, 1.25 headings
+
+### Spacing
+- Use consistent 4px or 8px base unit
+- Common values: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
+
+### Motion Design
+- Keep animations under 300ms for functional UI
+- Use CSS transitions: `transition-all duration-200 ease-out`
+- Add micro-interactions: hover scale, focus ring entrance, button press
+
+## Page Sections and Implementation Strategies
+
+### Hero Sections
+- Full-width, bold headline, clear CTA
+- Background options: gradient mesh, abstract shapes, product screenshots
+- Keep headline focused on value proposition
+- Use large (60-80px) bold headings with tight line height
+
+### Feature Grids
+- 3-column grid on desktop, 1 column on mobile
+- Each feature: icon + short headline + 1-2 sentence description
+- Consistent card design: rounded corners, subtle shadow, hover elevation
+- Use 3D tilt or hover lift for interactivity
+
+### Pricing Tables
+- 3 tiers: Basic, Pro, Enterprise
+- Highlight recommended tier with accent border/shadow
+- Feature checklist for each tier
+- Annual vs monthly toggle
+
+### Testimonials
+- Social proof with real names, titles, avatars
+- Quote + attribution pattern
+- Grid layout or carousel for many testimonials
+
+### Footer
+- Multi-column link layout
+- Copyright, social links, legal links
+- Newsletter signup in footer
+
+## Component States Checklist
+- **Rest** → Default appearance
+- **Hover** → Subtle visual change (bg shift, shadow lift, underline)
+- **Active/Pressed** → Inset shadow or scale down
+- **Focus** → Visible focus ring (2px offset, matching accent)
+- **Disabled** → Reduced opacity (50%), no pointer events
+- **Loading** → Skeleton or spinner
+- **Error** → Red border on inputs, error messages below
+- **Empty** → Illustration + message + CTA
+
+## Accessibility Requirements
+- All images need descriptive alt text
+- Forms: labels on every input, error messages with aria-describedby
+- Links: distinguishable from surrounding text (underline or sufficient contrast)
+- Color contrast: 4.5:1 body, 3:1 large text
+- Focus indicators: never remove outline without replacement
+- Reduced motion: respect prefers-reduced-motion
+- Semantic HTML: use nav, main, section, article, aside correctly
+
+## Performance Guidelines
+- Images: lazy loading, WebP format, responsive srcset
+- Fonts: font-display: swap, subset if possible, preload key fonts
+- CSS: purge unused styles, use CSS variables for theming
+- JavaScript: code-split by route, lazy load non-critical components
+- Animations: use GPU-accelerated properties (transform, opacity)

packages/numb-design/agent-skills/build-dashboard/SKILL.md

@@ -0,0 +1,96 @@
+# Build Dashboard — Anthropic Knowledge Work Plugins
+
+Interactive HTML dashboard builder for creating live, data-driven dashboards with charts, filters, and real-time updates. Generates standalone HTML files with embedded JavaScript.
+
+## Overview
+
+Build beautiful, interactive dashboards as single HTML files. Each dashboard includes:
+- Data grid/table views with sorting and filtering
+- Interactive charts (bar, line, pie, area, scatter)
+- Filter controls that update charts in real-time
+- Clean, modern design system
+- Export to standalone HTML file
+
+## Quick Start
+
+```typescript
+import { DashboardBuilder } from "./dashboard-builder";
+
+const dashboard = new DashboardBuilder({
+  title: "Sales Dashboard",
+  theme: "light", // 'light' | 'dark'
+});
+
+// Add data
+dashboard.addTable("Sales Data", [
+  { month: "Jan", revenue: 12000, expenses: 8000, profit: 4000 },
+  { month: "Feb", revenue: 15000, expenses: 9000, profit: 6000 },
+  // ...
+]);
+
+// Add chart
+dashboard.addChart("Monthly Revenue", {
+  type: "bar",
+  xKey: "month",
+  yKeys: ["revenue", "expenses", "profit"],
+});
+
+// Add filter
+dashboard.addFilter("dateRange", "date", {
+  label: "Date Range",
+});
+
+// Generate HTML
+const html = dashboard.build();
+```
+
+## Chart Types
+
+| Type | Description | Best For |
+|------|-------------|----------|
+| `bar` | Vertical or horizontal bars | Comparing categories |
+| `line` | Connected data points | Trends over time |
+| `pie` | Circular segments | Part-to-whole relationships |
+| `area` | Filled line chart | Magnitude over time |
+| `scatter` | X/Y data points | Correlation analysis |
+| `stacked-bar` | Stacked bars | Part-to-whole over categories |
+
+## Filter Types
+
+| Type | Description |
+|------|-------------|
+| `date` | Date range picker |
+| `select` | Dropdown with options |
+| `multi-select` | Multi-selection dropdown |
+| `slider` | Numeric range slider |
+| `search` | Text search input |
+
+## Layout Options
+
+- **Grid layout**: 1, 2, 3, or 4 columns
+- **Full width**: Single chart/table spanning entire width
+- **Sidebar**: Filters panel on left or right
+- **Tabs**: Multiple dashboard views
+- **Header**: Title, description, and action buttons
+
+## Design Guidelines
+
+1. **Keep it focused** — Each dashboard should answer a specific question
+2. **Guide the eye** — Place the most important chart top-left or most prominent
+3. **Consistent colors** — Use a single color palette across all charts
+4. **Interactive by default** — Let users filter, sort, and explore
+5. **Mobile responsive** — Charts should reflow for smaller screens
+6. **Loading states** — Show skeleton/spinner while data loads
+7. **Empty states** — Show helpful message when filters return no data
+8. **Limit visual noise** — Remove gridlines, borders, legends where possible
+
+## Best Practices
+
+1. **Pre-aggregate data client-side** — Dashboards should be fast to render
+2. **Use semantic colors** — Green for positive, red for negative, blue for neutral
+3. **Sort data** — Sort chart data before rendering (chronological, descending value, etc.)
+4. **Label clearly** — Every chart needs a title, every axis needs a label
+5. **Export functionality** — Let users download charts as PNG or data as CSV
+6. **Auto-refresh** — Poll data source every N seconds for live dashboards
+7. **URL state** — Persist filters in URL query params for shareability
+8. **Performance** — Lazy-load chart libraries, virtualize large tables