feat: add ascii-renderer skill

.github/workflows/validate-skills.yml

@@ -63,7 +63,10 @@ jobs:
               fi
 
               # Run skill-specific validator if exists
-              if [ -f "${skill_dir}scripts/validate-skill.js" ]; then
+              if [ -f "${skill_dir}scripts/validate-skill.cjs" ]; then
+                echo "  🔧 Running custom validator..."
+                node "${skill_dir}scripts/validate-skill.cjs" "${skill_dir}SKILL.md" || exit 1
+              elif [ -f "${skill_dir}scripts/validate-skill.js" ]; then
                 echo "  🔧 Running custom validator..."
                 node "${skill_dir}scripts/validate-skill.js" "${skill_dir}SKILL.md" || exit 1
               fi

README.md

@@ -47,6 +47,25 @@ Error prevention and best practices enforcement for AI agent-assisted coding.
 - Model configuration recommendations (Claude 3.5+, GPT-4+, extended thinking)
 - 60KB+ of reference documentation
 
+### [ascii-renderer](./skills/ascii-renderer)
+
+Generate ASCII art from images or text using shape vector rendering.
+
+**Use when:**
+
+- Creating ASCII text banners for terminals, READMEs, or CLI tools
+- Converting images to ASCII art with high-quality edge detection
+- Building terminal splash screens or headers
+- Generating retro/terminal aesthetic text
+
+**Features:**
+
+- Text-to-ASCII with customizable fonts (Arial Black, Impact, etc.)
+- Image-to-ASCII conversion with sharp edge detection
+- Shape vector algorithm for superior quality vs traditional brightness mapping
+- Adjustable contrast, size, and invert options
+- Built-in demo mode
+
 ---
 
 ## Installation
@@ -108,7 +127,7 @@ description: What it does and when to use it
 1. **Keep SKILL.md under 500 lines** - Move detailed docs to `references/`
 2. **Write for agents** - Clear, actionable instructions
 3. **Include examples** - Show both ❌ BAD and ✅ GOOD patterns
-4. **Test your skill** - Run `node scripts/validate-skill.js` if available
+4. **Test your skill** - Run `node scripts/validate-skill.cjs` if available
 
 ---
 

biome.json

@@ -0,0 +1,42 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.14/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "style": {
+        "noNonNullAssertion": "off"
+      },
+      "suspicious": {
+        "useIterableCallbackReturn": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "semicolons": "asNeeded"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "skills",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "format": "biome format --write ."
+  },
+  "dependencies": {
+    "sharp": "^0.34.5"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.14"
+  }
+}

skills/ascii-renderer/SKILL.md

@@ -0,0 +1,139 @@
+---
+name: ascii-renderer
+description: Generate ASCII art from images or text using shape vector rendering. Creates sharp-edged ASCII art banners, converts photos to terminal art, and renders text with customizable fonts.
+---
+
+# ASCII Art Renderer
+
+Convert images or text to ASCII art using the **shape vector algorithm** - a technique that produces sharp edges instead of blurry pixelated results.
+
+Based on [Alex Harri's ASCII rendering research](https://alexharri.com/blog/ascii-rendering).
+
+## When to Use This Skill
+
+Activate this skill when:
+- User wants to create ASCII text banners (e.g., "make ASCII art saying HELLO")
+- Converting images to ASCII art for terminals or READMEs
+- Generating retro/terminal aesthetic text
+- Building CLI tool splash screens or headers
+
+## When NOT to Use This Skill
+
+Skip this skill when:
+- User needs simple block letters (figlet/toilet may be simpler)
+- Color ASCII art is required (this produces monochrome output)
+- User wants emoji or unicode art (this uses standard ASCII characters)
+
+## Quick Start
+
+### Text to ASCII
+
+```bash
+# Basic text banner
+bun run scripts/render.ts --text "DUPE.COM"
+
+# Filled letters (inverted)
+bun run scripts/render.ts --text "HELLO" --invert --cols 80
+
+# Custom font and size
+bun run scripts/render.ts --text "WOW" --font "Impact" --cols 60 --rows 12
+```
+
+### Image to ASCII
+
+```bash
+# Convert image
+bun run scripts/render.ts photo.png --cols 80 --rows 40
+
+# Demo sphere (no image needed)
+bun run scripts/render.ts --demo
+```
+
+## Command Reference
+
+| Option | Short | Default | Description |
+|--------|-------|---------|-------------|
+| `--text` | `-t` | - | Text to render as ASCII art |
+| `--cols` | `-c` | 80 | Output width in characters |
+| `--rows` | `-r` | auto | Output height (auto-calculated for text) |
+| `--invert` | `-i` | false | Invert colors (filled vs outlined) |
+| `--font` | `-f` | Arial Black | Font for text rendering |
+| `--contrast` | - | 1.5 | Contrast enhancement (higher = sharper) |
+| `--demo` | `-d` | false | Render demo sphere |
+| `--help` | `-h` | - | Show help |
+
+## Examples
+
+### Text Banner (Outlined)
+
+```bash
+bun run scripts/render.ts --text "DUPE" --cols 60
+```
+
+```
+@@@@@TTTTTTTT@@@@TTT@@@@TTT@@FTTTTTTT#@@FTTTTTTTT%@@@@@
+@@@@@        `#@@   #@@@   #@i  ,w:   %@i  ,;;;;;]@@@@@
+@@@@@   ]@@i  `@@   #@@@   #@i  `@@i  ]@i  J@@@@@@@@@@@
+@@@@@   ]@@D   @@   #@@@   #@i  `T^   W@i        @@@@@@
+@@@@@   ]@@P   @@   #@@@   #@i  ,cssw#@@i  ,=====@@@@@@
+@@@@@   J#P'  s@@.  J#@t  ,@@i  `@@@@@@@i  `@@@###@@@@@
+@@@@@        ,@@@W.      ,W@@i  `@@@@@@@i        ]@@@@@
+@@@@@=======#@@@@@@==www=@@@@#===@@@@@@@#========#@@@@@
+```
+
+### Text Banner (Filled/Inverted)
+
+```bash
+bun run scripts/render.ts --text "DUPE" --cols 60 --invert
+```
+
+```
+     =======w:   a===   a===  a======ww  ,=========:
+     @@@P#@@@w  &@@@   J@@@  ]@@@PP#@@# `@@@@PPPPP'
+     @@@i  `@@@i &@@D   J@@@  ]@@@,,W@@@ ,@@@lwwwwc
+     @@@i   @@@i &@@D   ]@@@  ]@@@@@@@P' `@@@@PPPPP
+     @@@l,;w@@@' ]@@@c.,W@@@  ]@@@       ,@@@l.,.,..
+     @@@@@@@@P'   T@@@@@@@P'  ]@@@       `@@@@@@@@@i
+```
+
+## How It Works: Shape Vectors
+
+Traditional ASCII converters map pixel brightness → single character. This creates blurry results.
+
+**Shape vectors** capture character *geometry* using 6 sampling regions per cell:
+
+```
+┌─────────────┐
+│  ●₀    ●₁   │   ← Top samples
+│  ●₂    ●₃   │   ← Middle samples
+│  ●₄    ●₅   │   ← Bottom samples
+└─────────────┘
+```
+
+Each ASCII character has a unique 6D "shape signature". The algorithm finds the best-matching character for each image cell based on geometric similarity, not just brightness.
+
+This produces sharp edges that follow the actual boundaries in the image.
+
+## Requirements
+
+- **Runtime:** Bun (or Node.js with modifications)
+- **Dependencies:** `sharp` for image processing
+
+```bash
+bun add sharp
+```
+
+## Available Fonts
+
+Font availability depends on your system. Common options:
+- Arial Black (default, bold and clean)
+- Impact (condensed, strong)
+- Helvetica Bold
+- Georgia
+- Times New Roman
+- Courier New
+
+## Further Reading
+
+- [Original blog post](https://alexharri.com/blog/ascii-rendering) - Deep dive into the algorithm
+- Shape vector math and K-d tree optimization details in the source code