Pixel Art
Hardware palettes, dithering, sprites, weather loops
Spectacular mode • hosted-ready static site
pixel-art

A complete retro conversion lab.

Shows the full spirit of the skill: era presets, hardware color palettes, chunky blocks, source-to-sprite thinking, and animation overlays like rain, stars, neon pulse, and character idle loops.

Real skill output: photo → dithered PNG → MP4/GIF with scene effects.

Palette presets

NES / SNES / Game Boy / PICO-8 / C64 / CRT mono / neon / pastel

Dither pipeline

contrast → posterize → downscale → Floyd-Steinberg → nearest upscale

Scene FX

rain, snow, embers, fireflies, heat shimmer, lightning, bubbles

Color swatch
ascii-art

Text becomes the medium.

Beyond a banner: this tab demonstrates the whole ASCII toolkit — FIGlet logo, decorative boxes, cowsay dragon, terminal scanlines, QR-like blocks, and image-to-text style shading.

FIGlet
571 fonts
cowsay
characters
boxes
70+ frames
image→ASCII
braille/color


baoyu-comic
Knowledge comic production board.
Full skill display: style/tone selection, character continuity, storyboard beats, panel layout, prompt provenance, and final generated comic pages.
Analyze
Pick style
Storyboard
Prompt files
Render pages
A skill is not magic. It is a repeatable creative workflow.
AHA!
Cover / visual thesis
Step 1: extract the concept, audience, and teaching goal.
Panel 1 / analysis
Step 2: recurring characters lock the visual memory.
✦
Panel 2 / character sheet
Step 3: each page gets a saved prompt before rendering.
Panel 3 / provenance
Step 4: final comic folder = source, storyboard, prompts, PNGs.
✓
Panel 4 / complete artifact


claude-design
Artifact-grade interface design.
This tab is an in-page design artifact: a full product prototype surface with taste rules, motion, stateful UI, tweakable variants, and polished presentation.
Creative Ops Console
mobile prototype
Skill Run
Pixel conversion queued
Comic storyboard approved
Pretext canvas verified
Design system
Clear hierarchy, unusual composition, responsive layout, motion that clarifies state.
Variants
Conservative / strong-fit / divergent — generated as real HTML, not descriptions.
Prototype states
Hover, active, success toast, selected tabs, mobile surface, export interaction.
Anti-slop filter
No generic SaaS cards unless they earn their place. Every surface has a job.


design-md
A design system that agents can obey.
Full display: frontmatter tokens, human rationale, components, WCAG contrast status, Tailwind/DTCG exports, and token references.
Token matrix
void
#050609
gold
#FFD166
mint
#8CFFC1
cyan
#70E7FF
Aa 14.8:1
WCAG contrast demo for primary component text/background.
DESIGN.mdlintTailwind JSONDTCG tokens
---
version: alpha
name: Creative Observatory
colors:
  void: "#050609"
  ink: "#FFF7EA"
  gold: "#FFD166"
  mint: "#8CFFC1"
typography:
  display:
    fontFamily: Georgia
    fontSize: 4rem
    fontWeight: 700
components:
  button-primary:
    backgroundColor: "{colors.gold}"
    textColor: "{colors.void}"
    rounded: "999px"
---

## Overview
A maximal dark observatory with warm action colors.

## Components
Primary buttons use gold because they are launch controls, not decoration.


excalidraw
Whiteboard diagrams with source-of-truth JSON.
Shows architecture, flowchart, annotations, sticky notes, colors, bindings, arrows, and JSON export — the pieces the skill actually creates as `.excalidraw` files.
Drag into excalidraw.com • all nodes are editable JSON elements
Prompt
Skill
Rules
JSON
Elements
Editable
Diagram
Bound text labels
Arrows + bindings
Warnings / notes
No invalid
shape.label!
Virgil font
roughness: 1
{ type: "excalidraw", elements: [...] }


manim-video
3Blue1Brown-style educational cinema.
Full display: narrative arc, geometry-first reveal, opacity layering, subtitles, formulas, pacing, and render pipeline. Replay to see the scene animation.
plan.md
script.py
final.mp4
Why waves add
Geometry first. Equation second. Aha moment last.
f(x) + g(x) → structure you can see



sketch
Compare directions before building.
The complete sketch workflow: three meaningfully different stances, realistic content, interactions, tradeoffs, and a head-to-head comparison.
Density
airy / compact / split
Emphasis
content / action / preview
Interaction
toast / filter / toggle
Decision
pick or hybridize
Calm Editorial
Best for trust and explanation. One idea per section, restrained controls.
Hero essay block
Primary CTA only
Dense Operator
Best for power users. Queue, filters, logs, status cards, high information scent.
Run queue • 14
Errors • 0
Exports • 8
Playful Split
Best for creative review. Live preview beside knobs and quick variants.
Preview canvas
Style knobs
Before / after


pretext
Language behaves like water.
Move your cursor across the canvas. Text reflows around the obstacle as measured geometry — the essence of Pretext’s DOM-free layout primitive. The demo includes orbit, glow, proportional text, and live wrapping.
Pattern
reflow around obstacle
API analogue
layoutNextLineRange
Creative use
editorial canvas / kinetic type
Interaction
cursor-driven geometry