Gallery

Visual snapshots of shipped projects and YAML-driven UI components. Each entry pairs a screenshot with its source spec or project, showing what the declarative approach actually produces at runtime.

Images are served directly from the MCP server at /gallery/<filename>.

LLM Image Access Note

Gallery entries include image URLs, but most LLM platforms cannot fetch and render external images automatically. When asked about a gallery item, an LLM can provide the text description and the direct image URL — but actually viewing the image requires the user to open that URL in a browser. Vision-capable models that support drag-and-drop or file upload can analyze the image if the user loads and supplies it manually.

Image Map

Items

• color-picker — Screenshot of the Color Picker component with "yellow" selected — showing the reactive state loop live: selected color bar and State Variables panel both reflect the current selection simultaneously
• icon-gallery — Screenshot of the icon-gallery-005 YAML spec rendered on the proofs page — glass-morphism grid of 42 icons across mixed families with per-family color theming and click-to-select state
• icon-proofs — Screenshot of the top-level Icon Proofs page — navigable cards for all 9 icon families available in the system, each with sample icons and an Explore button that opens the family proof page
• icons-lucide-lab — Screenshot of the Lucide Lab family proof page showing 50 randomly selected icons from 373 total — experimental extension of Lucide with creative and specialized icons; "Random (50)" mode active
• icons-lucide — Screenshot of the Lucide family proof page showing 50 randomly selected icons from 1,897 total — with search, variant, and page-size controls; "Random (50)" mode active
• vercel-autos-r3t — Screenshot of the React 19 autos app — car dealer list with automotive brand logos, GraphQL backend, Tailwind CSS, action-state pattern
• vercel-funnel-r3t — Screenshot of the React 19 funnel app — 5 animated SVG funnels with navy selected, color swatch row, and live sample output; one of 8 framework implementations of the same design
• vercel-sudoku-r3t — Screenshot of the React 19 Sudoku app — 9x9 grid with a puzzle in progress, green given-number cells, pink active cell, serverless Rust puzzle API; one of 10 framework implementations
• vercel-tinker-r3t — Screenshot of the React 19 Tinker app — minimal action-state testbed with color swatch row, yellow selected, live color and sample output; one of 8 framework implementations