Signature Visual

A self-contained design Skill for original computational visuals on the web.

Live website · Install · V3 method · Runtime QA · Benchmark

People rarely ask for a renderer. They ask for a page to feel alive, precise, spatial, organic, atmospheric, trustworthy, strange, or memorable.

Signature Visual turns that intent into a product-owned visual system. It expands the creative search at the right scale, challenges candidates against target evidence and nearby outputs, chooses a temporal structure, routes to the smallest suitable engine, implements production behavior, and captures deterministic evidence for critique.

Use it to:

• add one memorable moment to an existing page;
• redirect a familiar Canvas, Three.js, WebGL, shader, or SVG effect;
• study a visual or HTML reference while preserving source distance;
• turn one selected rule into a reusable family of related visuals;
• verify responsive, reduced-motion, interaction, and lifecycle behavior.

Install

npx skills add Ryan-yang125/signature-visual

Run the same command again to update. The package follows the portable SKILL.md convention and has no external Skill dependency.

Manual installation works by copying skills/signature-visual/ into the Skill directory used by your agent:

• Claude Code: ~/.claude/skills/signature-visual/
• Codex: ~/.codex/skills/signature-visual/ or .codex/skills/signature-visual/
• Cursor and compatible agents: keep SKILL.md, references/, schemas/, and scripts/ together in the agent's Skill path

V3 method

V3 treats computational visual design as four connected problems:

target page + ambiguous creative intent
                  |
                  v
scope the search: landmark / section / refine
                  |
                  v
evidence-led candidates + taxonomy-external direction
                  |
                  v
candidate distance + source distance + output distance
                  |
                  v
convergence forecast + causal cluster break
                  |
                  v
adversarial selection and direction freeze
                  |
                  v
composition + material + temporal archetype + interaction
                  |
                  v
late renderer choice and neutral production shell
                  |
                  v
semantic captures + derived views + runtime scenarios
                  |
                  v
critique, targeted revision, compact design record

Creative search entropy

Search depth follows the visual's role and actual uncertainty.

• Landmark work first names the obvious product-name, category, and noun-to-artifact answers as a shadow baseline. It then generates an anti-literal direction and a taxonomy-external direction under a fresh, replayable creative offset before Pattern Language, renderer guides, starter visuals, or trend galleries enter the process.
• Section work begins with the strongest evidence-led direction. A new branch appears only after a named fit or distance failure.
• Refine work retains the confirmed thesis and changes the smallest structural layer responsible for the visible failure.

Landmark candidates are compared pairwise across silhouette, spatial grammar, material causality, temporal archetype, interaction meaning, and type role. Every pair retained for selection needs visible distance on at least four of those six axes. Palette, count, intensity, camera, easing, and renderer changes usually remain tuning inside one direction.

The bundled generator adds per-run structural pressure while staying renderer, artifact, and palette neutral:

npm run creative-offset
npm run creative-offset -- --seed replay-this-search
npm run creative-offset -- --cohort 3 --seed replay-this-cohort

Its JSON records a quarantine list, evidence move, spatial pressure, coherent substance/temporal/interaction pressures, a representation pressure, counterfactual, and winner challenge. The causal route and representation coordinate stay renderer, artifact, and palette neutral. When output history is unavailable, the direct shadow baseline remains ineligible until a second-order transform changes at least three structural axes. This collision insurance gives isolated runs a wider search distribution while preserving exact replay.

Coordinated independent alternatives and benchmark runs create one cohort roster up front. Every entry receives a distinct causal route and spatial representation mode, then replays as a normal single offset from its derived seed. Ordinary landmark work continues to use one offset.

Adversarial selection

The strongest candidate and any external direction enter the same trial. Useful challenges include:

• remove color and inspect whether the silhouette still belongs to the product;
• freeze the visual and inspect hierarchy, tension, and content safety;
• substitute the renderer and test whether the governing idea survives;
• compare the nearest direct source and recent accessible output separately;
• forecast the artifact, renderer, material, time model, and interaction an independent run will likely choose, then make the winner visibly break at least two of material causality, temporal archetype, and interaction meaning;
• name the strongest counterevidence before freezing the direction.

The selected direction freezes when target evidence drives its governing rule, the held frame is complete, distance checks pass at the chosen tier, the primary risk is testable, and implementation is credible.

Temporal archetypes

Time follows the governing rule. A static direction can carry the full idea, and an animated direction can use any causal shape the product requires.

V3 recognizes structures such as:

• Pulse
• Accumulation or accretion
• Bifurcation or branching
• Irreversible event
• Inspection or reveal
• State machine
• Scroll causality
• Authored still
• One-shot, event-response, ambient, and live data pacing

Semantic capture states come from the selected archetype. A universal five-beat percentage sequence is optional.

Pattern Atlas after freeze

Pattern Language opens after the candidate set and selected direction freeze. Its patterns act as critique operators:

• a coherence operator asks whether local behavior reveals one larger rule;
• a boundary operator tests identity, porosity, and recovery;
• an instrument operator turns invisible state into bounded inspection;
• a memory operator checks which history must remain visible;
• a deposition operator gives computation material trace and residue;
• a threshold operator creates a decisive event and useful aftermath.

Operators pressure or expand one selected rule. They never supply a replacement thesis or finished template.

Late renderer choice

The experience chooses the engine:

Family	Best when the direction depends on
Canvas 2D	many planar marks, trails, deposition, field state
Three.js	camera, geometry, occlusion, light, spatial assembly
Raw WebGL	continuous GPU-evaluated material, displacement, simulation
SVG	paths, topology, type, labels, semantic geometry, instrument precision

Neutral runtime shells carry ownership, responsive sizing, capped DPR, visibility pause, reduced motion, deterministic controls, and teardown. The project-specific visual program supplies geometry, equations, topology, material, temporal behavior, and meaning.

Live cases

The four public studies share production discipline and occupy distinct visual worlds.

Memory Loom Canvas 2D · coordination becomes fibres that gather, cross, knot, and release	Permeable Intelligence Three.js · an external signal crosses a boundary, changes the interior, and heals
Signal Weather Raw WebGL · system pressure moves through spike, outage, reroute, and cool	Decision Plate 027 Semantic SVG · evidence, alternatives, review, commitment, and archive form one trace

Each case includes an authored mobile composition, a meaningful reduced-motion presentation, complete lifecycle cleanup, and the deterministic window.__signatureVisual bridge. Showcase fonts and Three.js are self-hosted. The Three.js case includes a tested static fallback for unavailable GPU contexts.

Deterministic runtime QA

The bundled CLI opens every state in a fresh browser context with a fixed seed, epoch, virtual clock, viewport, DPR, locale, timezone, color scheme, motion preference, and scripted pointer sequence.

npm run visual-qa -- path/to/manifest.json

Print the current manifest example:

npm run visual-qa -- --print-example

Run the repository's desktop, mobile, and reduced-motion production manifests:

npm run visual-qa:cases

The V3 manifest supports capture, interaction, and production tiers. Relevant runtime capabilities are recorded as supported or N/A with a reason. Declarative runtime scenarios can exercise lifecycle and input behavior.

Each run can produce:

visual-qa-output/
├── .signature-visual-qa  # ownership marker for safe managed replacement
├── captures/*.png         # exact state captures
├── derived/*/*.png        # 160px thumbnail, 12-16px blur, silhouette
├── contact-sheet.png      # side-by-side thumbnail sheet
├── contact-sheet.html     # dependency-free review surface
└── results.json           # state metadata and SHA-256 image hashes

Managed artifacts are written to a staging directory and promoted through a rollback transaction, so renamed or removed states cannot leave stale captures in a new review. The first successful adoption writes .signature-visual-qa; later runs require that ownership marker before preserving reviewer notes beside managed evidence. Broad or unrelated output targets are rejected, and an incomplete rollback retains its recovery directory instead of discarding the previous evidence.

Hashes are determinism signals. The public-case runner repeats every manifest: CPU-rendered cases use a near-zero same-host raster tolerance capped at one millionth of changed channels, while GPU cases use a separately bounded tolerance for driver-level channel rounding. Byte-identical PNGs, pixel-identical PNGs, and bounded raster replays are reported separately. Visual approval comes from authored states, derived views, visible critique, and production behavior.

See visual-qa.md, motion-direction.md, and failure-signatures.md.

Benchmark discipline

The repository includes public forward-test scenarios in evals/scenarios.json and anchored review criteria in evals/rubric.md. The canonical 1-5 evaluation anchors also live in evaluation.md.

A useful comparative evaluation keeps the generation conditions equal and reports its evidence boundary:

1. Run the same hidden brief with isolated agents under the same model, tools, time, and starting surface; allocate one recorded offset cohort for diversity runs and replay each derived seed for reproducibility checks.
2. Randomize and anonymize the outputs before blind review.
3. Repeat across briefs, renderer families, task scopes, and model seeds.
4. Report pairwise preference, every rubric criterion, production-gate pass rate, reviewer agreement, and uncertainty separately.
5. Treat a one-brief score as one observation. Claims such as near-peer quality or statistical confidence require direct peer controls and repeated comparisons.

The V3 rubric passes only when every criterion reaches at least 4. A world-class artifact candidate averages at least 4.7/5, includes at least four independently supported 5s, and keeps Tier, Originality, and Production at 4 or higher. Every individual 5 requires artifact evidence, the strongest counterevidence, and independent review. A 95-point Skill release also requires multi-brief controls, no three-axis convergence within one brief, and at least 95% automated runtime-gate passage.

No aggregate public benchmark score is claimed in this README.

Design record

After direction freeze, the Skill creates a compact signature-visual.design.json record near the owning component when the project permits. The record stores:

• scope tier and page context;
• selected thesis, directions, fingerprints, and distance evidence;
• landmark obvious-attractor baseline, creative-offset seed, optional cohort coordinate, convergence forecast, causal cluster-break axes, and winner challenge;
• strongest selection evidence and counterevidence;
• source and output-distance results;
• signature rule and late renderer decision;
• semantic states and runtime capabilities;
• the highest-value critique and resulting revision.

Validate the record against design-record.schema.json, then run node skills/signature-visual/scripts/validate-design-record.mjs path/to/signature-visual.design.json. The executable validator replays the creative offset, counts candidate distance, and enforces the landmark causal cluster-break gate. The record gives future runs enough evidence for accurate output-distance checks without preserving a long process transcript.

Skill architecture

The package uses progressive disclosure. The main workflow stays concise and opens focused references only when the current decision needs them.

skills/signature-visual/
├── SKILL.md
├── agents/openai.yaml
├── references/
│   ├── visual-direction.md
│   ├── creative-search.md
│   ├── composition.md
│   ├── material-language.md
│   ├── motion-direction.md
│   ├── pattern-language.md
│   ├── reference-study.md
│   ├── interaction.md
│   ├── routing.md
│   ├── integration.md
│   ├── visual-qa.md
│   ├── failure-signatures.md
│   ├── design-record.md
│   ├── evaluation.md
│   ├── families/
│   └── starters/
├── schemas/
│   ├── design-record.schema.json
│   ├── visual-qa-manifest-v3.schema.json
│   └── visual-qa-results-v3.schema.json
└── scripts/
    ├── creative-offset.mjs
    ├── creative-offset.test.mjs
    ├── validate-design-record.mjs
    ├── validate-design-record.test.mjs
    ├── visual-qa.mjs
    └── visual-qa.test.mjs

Example prompts

The hero feels visually generic. Give it one memorable moment that communicates how independent agents arrive at a defensible shared decision. Keep our existing React stack and make the mobile composition intentional.

This biotechnology hero has a glowing displaced sphere and feels familiar. Refine it around selective permeability: an external signal crosses the membrane, changes the interior, then the organism heals.

Study this HTML reference. Extract the spatial, material, and temporal rules that give it conviction, then develop a structurally distant direction for our archival search product.

Our SVG provenance diagram is crowded on mobile and every route moves continuously. Direct it around one decision trace from evidence to signed output, with keyboard, touch, and reduced-motion states.

Develop and verify

npm ci
npx playwright install chromium
npm run build:site
npm run test:creative-offset
npm run test:design-record
npm run test:evals
npm run test:schemas
npm run check
npm run test:visual-qa
npm run visual-qa:cases
npm run test:schemas -- --results-root .visual-qa --require-results 12
npm run screenshots
npm pack --dry-run

Build the Cloudflare Pages output in .site-dist:

npm run build:site

Deploy the same verified output:

npm run deploy:site

The production build excludes site/_tests. CI compiles all three Draft 2020-12 schemas, validates the documented examples and 12 production manifests, validates every generated result, and verifies the package, browser behavior, runtime shells, mobile, reduced motion, teardown, and error handling. The deploy command pins its Wrangler release for reproducible Cloudflare uploads.

Repository

.
├── skills/signature-visual/        # installable universal Skill
├── site/                           # Edition 03 site and four live cases
├── evals/                          # public scenarios and rubric
├── docs/                           # worked direction evidence
├── ACKNOWLEDGEMENTS.md             # research and license boundaries
└── .github/workflows/verify.yml    # package, browser, and QA verification

The package architecture draws inspiration from Hallmark. Motion, renderer, evaluation, and deterministic-review research is documented with source and license boundaries in ACKNOWLEDGEMENTS.md.

Signature Visual is released under the MIT License.