Claude Skills by nexu-io

A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations, scribbled chart placeholders, hatched fills. Reads like a designer's whiteboard before any pixels are committed. Use when the brief asks for "wireframe", "sketch wireframe", "hand-drawn", "lo-fi", "whiteboard", "草稿", or "手绘原型".

A real-time data/particle/simulation visualizer whose heavy compute runs in a Web Worker (off the main thread), optionally sharing memory with the UI via SharedArrayBuffer, and renders to a canvas at 60fps. Produced as a single self-contained `index.html`. Use when the brief asks for a "web worker", "simulation", "particle system", "physics", "off-main-thread", "fractal", "real-time compute", or "audio/data visualizer". OpenDesign serves this in powered-preview mode so Workers and SharedArray...

Default reference pipeline for the code-migration taskKind — code-import → design-extract → token-map → rewrite-plan → patch-edit ↔ build-test devloop → diff-review → handoff.

Hidden fallback scenario for free-form Home prompts. Infer the task type and ask only when routing is materially ambiguous.

Use this plugin when the user wants to improve an existing OpenDesign artifact rather than create a new one.

Default reference pipeline for the figma-migration taskKind — figma-extract → token-map → generate → critique.

Default reference pipeline for image, video, and audio projects — routes through media-image / media-video / media-audio atoms based on the project kind, wraps the output in a live artifact, and devloops on critique-theater until the score converges.

Default reference pipeline for the new-generation taskKind — discovery → plan → generate → critique with a critique-theater devloop.

Bundled OD Next V2 strategy entrypoint for route-locked planning and Build execution.

Use this plugin when the user wants to hand an accepted OpenDesign artifact to a Next.js App Router project.

Guided scenario for creating an OpenDesign plugin folder that can be installed into My plugins.

Use this plugin when the user wants to hand an accepted OpenDesign artifact to a React app.

Package the user's just-finished work as an OpenDesign plugin without asking for fields the project files already answer, then surface the existing Add-to-My-plugins / Open-Design-PR buttons.

Default reference pipeline for the tune-collab taskKind — pick a direction, patch-edit the existing artifact, critique, hand off.

Use this plugin when the user wants to hand an accepted OpenDesign artifact to a Vue 3 project.

Extract visual effects, animation systems, Canvas/WebGL/Shader behavior, and interaction details from a reference website, then rebuild them as an editable OpenDesign web artifact.

Use this plugin when the user wants a "Bold Poster Frame" HyperFrames motion video — A 1970s European editorial poster in motion — a red rule draws across, a giant tilted figure drops in, a three-line headline rises line-by-line, an italic serif standfirst fades.

Use this plugin when the user wants a "Bold Signal Frame" HyperFrames motion video — Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.

Use this plugin when the user wants a "Build Minimal Frame" HyperFrames motion video — Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.

Use this plugin when the user wants a "Creative Voltage Frame" HyperFrames motion video — Electric split with hand-drawn script — offset panels slide in, display title rises with an outlined word, script strokes itself in.

Use this plugin when the user wants a "NYT-Style Data Chart Frame" HyperFrames motion video — NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).

Use this plugin when the user wants a "Data Rollup Frame" HyperFrames motion video — A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync.

Use this plugin when the user wants a "Decision Tree" HyperFrames motion video — Animated flowchart with branching paths

Use this plugin when the user wants a "Electric Studio Frame" HyperFrames motion video — Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line.

Use this plugin when the user wants a "Glitch Title Frame" HyperFrames motion video — Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.

Use this plugin when the user wants a "Kinetic Type" HyperFrames motion video — Bold kinetic typography promo

Use this plugin when the user wants a "Light-Leak Cinematic Frame" HyperFrames motion video — Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.

Use this plugin when the user wants a "Liquid Background Hero" HyperFrames motion video — WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.

Use this plugin when the user wants a "Logo Outro Frame" HyperFrames motion video — Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.

Use this plugin when the user wants a "NYT Graph" HyperFrames motion video — Animated data chart in print editorial style

Use this plugin when the user wants a "Pentagram Stat Frame" HyperFrames motion video — Swiss-grid statistic anchor — giant number, red accent, growing bars, black data bar. Rational and editorial.

Use this plugin when the user wants a "Play Mode" HyperFrames motion video — Playful elastic animations

Use this plugin when the user wants a "Product Promo · 30s" HyperFrames motion video — Multi-scene 30-second product promo: problem-type intro, brand reveal, benefits flowchart, product surfaces, value pillars, foundation, CTA outro. Forked from Nate Herk's hyperframes-student-kit (linear-promo-30s); brand-specific copy + assets replaced with generic placeholders.

Use this plugin when the user wants a "Product Promo" HyperFrames motion video — Multi-scene product showcase with SVG assets

Use this plugin when the user wants a "Swiss Grid" HyperFrames motion video — Structured grid layout

Use this plugin when the user wants a "Takram Organic Frame" HyperFrames motion video — Soft-tech radial node graph as art — frosted rounded card, curved links drawing in, nodes popping outward, gentle float.

Use this plugin when the user wants a "Vignelli" HyperFrames motion video — Bold typography with red accents

Use this plugin when the user wants a "Warm Grain" HyperFrames motion video — Cream aesthetic with grain texture

Use this plugin when the user wants a "VFX Text Cursor" HyperFrames motion video — Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

This pack is consumed by the `open-design-landing` skill. Every page-level image is rendered with `gpt-image-fal` (preferred) or `gpt-image-azure`. The pack has three layers: 1. **Style anchor** — the long block that tells the model what universe we are in. Always prepend to every prompt. 2. **Variable slots** — the per-render content (subject, motifs, accent, page type). 3. **Per-slot variants** — explicit composition templates for hero, about, capabilities, method tiles, lab cards, work car...

Audit cloned or reimplemented websites for fidelity gaps, tracking scripts, source-brand and language residue, placeholders, and risky external dependencies. Use before handoff or deployment, or when asked to review a website clone for cleanup and readiness.

Use this plugin when the user wants a maximum-effort reasoning workflow for a complex, high-stakes, or ambiguous task.

This file is generated during setup and should be treated as source evidence for the design-system project. Use it before writing or revising DESIGN.md, previews, tokens, UI kit examples, or assets.

Use this Claude / Anthropic style design system for warm, restrained, editorial AI workbench interfaces.

Use this skill when generating OpenDesign artifacts that should follow the HiCatcat G2 AR glasses HUD design system. This plugin packages a browser-reviewable UI kit, local token CSS, and modular React role components.

Use this skill when generating OpenDesign artifacts that should follow the HiCatcat G2 AR glasses HUD design system.

Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study.

A presentation system for agent-made PPTs — born for the talk, not just the template. It turns raw material into an AST (audience-state-transfer) outline with per-page visual-enhancement decisions (image / SVG diagram / video), hands a production brief to a downstream renderer (HTML-PPT skills or native PPTX), then runs a capped 3-round presentation checkup (演讲体检) on the rendered deck. It never renders slides itself. Use before generating PPT/HTML slides from raw material, and after rendering...

A portable community plugin for validating OpenDesign plugin import flows.