De2 Figma To Code
Track 2 rail — Figma-to-code mastery. Structuring Figma files with absolute auto-layout control, nested component architecture, variables, and design tokens so the file is a direct logical representation of the DOM. Use whenever preparing Figma files for developer handoff, translating Figma designs into code, auditing a Figma file's structure, setting up Figma variables/components, or when a user…
De7 Resource Budgets
Track 7 rail — resource budgeting and asset optimization. Concrete budget tables for JS/3D/images/fonts, lazy-loading WebGL behind dynamic imports and IntersectionObserver with poster images, KTX2/AVIF texture and image strategy, SVG optimization pitfalls, and pausing offscreen work. Use whenever setting asset limits for a project, deciding how/when to load heavy 3D or animation bundles, optimizi…
Academic Researcher
Do rigorous scholarly research — formulate a research question, run a literature review, pick a sound methodology, situate work in the existing literature, and write in academic register with disciplined citation. Goes deeper than general web research into research design, synthesis across a body of work, identifying gaps, and meeting peer-review standards. Use this skill whenever the user is wri…
De7 Webgl Fallbacks
Track 7 rail — WebGL fallbacks and adaptive quality. Device capability detection and tiering (high/medium/low/static), the quality knobs ranked by cost-effectiveness (pixel ratio first), runtime FPS-monitored degradation, designed static-tier and loading-state choreography, prefers-reduced-motion handling, and WebGL context-loss recovery. Use whenever a 3D/animated experience must work on low-end…
De1 Aesthetic Deconstruction
Track 1 rail — aesthetic deconstruction. Reverse-engineering any premium web interaction into its exact timing curves, easing functions, border-radii, layered shadows, overlay gradients, and type system. Use whenever a user shares a reference site or interaction and asks "how did they do this", wants to replicate a premium look/feel, asks for a design spec from a reference, or asks why their vers…
De8 Cicd
Track 8 rail — automated CI/CD workflows. GitHub Actions pipelines for creative-dev repos — typecheck/lint gates, unit tests for motion math, hard-failing performance budgets (size-limit), Lighthouse CI assertions against preview deploys, visual regression testing with frozen time for animations and deterministic WebGL frames, and automated preview/production deploys. Use whenever setting up or i…
De6 Typescript
Track 6 rail — TypeScript mastery for interactive systems. Strict typing for animation/gesture code — discriminated unions for machine states, generics for reusable motion primitives, const-driven design tokens with compile-time validation, template-literal and branded types, and precisely typed events. Use whenever writing or reviewing TypeScript for components, animation APIs, gesture handlers,…
De2 Motion Prototyping
Track 2 rail — video and motion prototyping. Using After Effects, Spline, Rive, or Blender playblasts to build high-fidelity motion mockups that prove a concept before writing shader or animation code, plus translating AE curves to code and choosing Lottie vs Rive vs code. Use whenever an expensive animation/3D effect should be validated before implementation, when converting an After Effects moc…
Code Reviewer
Review code diffs or files for bugs, security issues, performance pitfalls, and style. Produces a prioritized list of findings with file:line citations and concrete fix suggestions. Use when the user asks to review code, audit a PR, or check a change before merging.
Data Analyst
Analyze structured data (CSV, JSON, table) and produce findings with the methodology that produced them. Identifies patterns, outliers, distributions, and answers specific questions about the data. Use when the user asks to analyze, explore, or extract insights from a dataset.
De6 State Systems
Track 6 rail — advanced state systems. Managing complex interactive state without wasteful re-renders — the transient-vs-discrete state split, Zustand selector subscriptions, XState finite state machines for gesture/animation states, Signals for fine-grained reactivity, and re-render audit techniques. Use whenever wiring interaction state (drag/hover/open states), choosing between useState/Zustan…
Accessibility Auditor
Audits a UI, page, or component against WCAG 2.1/2.2 AA — color contrast, keyboard navigation, focus order, semantics, and touch targets. Produces a prioritized list of violations with fixes. Use when the user asks for an a11y review, a WCAG audit, or "is this accessible?".
Brand Voice Reviewer
Reviews marketing or product copy against a brand's voice, tone, and style guide, flagging deviations by severity with before/after fixes. Use when checking a draft before it ships or auditing copy for voice consistency.
Design Engineer
The core orchestrator skill for elite design engineering — building award-tier interactive web experiences that fuse designer-level visual taste with GPU-level computational performance (120 FPS). Use this skill whenever the user asks to build, review, plan, or teach anything involving creative web development, interactive websites, WebGL/Three.js, animation-heavy UI, motion design in code, Awwwa…
De3 Asset Pipeline
Track 3 rail — the 3D asset pipeline and Blender mastery. Low-poly modeling strategy, baking lighting/AO into textures, GLTF/GLB export settings, and payload optimization to under 500kb via Draco/Meshopt geometry compression and KTX2/Basis Universal texture compression with gltf-transform. Use whenever preparing, exporting, optimizing, or loading 3D models for the web, whenever a GLB/GLTF file is…
Debugger
Diagnose bugs from error messages, stack traces, logs, or reproductions. Produces a root-cause hypothesis, a minimal verification step, and a concrete fix. Use when the user reports an error, a crash, unexpected output, or a test failure.
De5 Critical Rendering Path
Track 5 rail — the critical rendering path. How the browser goes JS → Style → Layout → Paint → Composite each frame, which CSS properties trigger which stages, and eliminating layout thrashing (forced synchronous reflows from interleaved DOM reads/writes). Use whenever diagnosing animation jank or slow scroll, reviewing animation loops that touch the DOM, choosing which properties to animate, or…
De1 Perceptual Color
Track 1 rail — perceptual color spaces (OKLCH & HCT). Full procedure for building color palettes with lightness/chroma/hue curves that hold uniform perceptual contrast across light and dark modes, abandoning raw RGB/HSL. Use whenever creating or reviewing color palettes, brand color ramps, dark mode color systems, gradient code, theme tokens, or when a user asks why colors look inconsistent, mudd…
Campaign Planner
Builds a full marketing campaign brief — objectives, audience, messaging, channel strategy, content calendar, and success metrics. Use when planning a product launch, lead-gen push, or awareness campaign.
De5 Gpu Compositing
Track 5 rail — GPU compositor layer acceleration. Using transform translate3d, will-change, and opacity to promote elements onto GPU compositor layers, layer lifecycle management (promote before animating, demote after), layer-explosion memory risks, scroll-linked motion done correctly, and paint-flashing verification. Use whenever animations stutter despite simple code, when setting up transform…
De4 Momentum Inertia
Track 4 rail — kinetic momentum and inertia. Pointer velocity tracking during drag, friction-based glide after release, iOS-style destination projection for snap points and paging, and rubber-band overscroll math. Use whenever implementing flick/swipe gestures, drag-release with momentum, inertial carousels, swipe-to-dismiss, bottom sheets with detents, custom scrolling surfaces, or overscroll bo…
Deploy Checklist Writer
Builds a pre-deployment verification checklist covering migrations, feature flags, rollback triggers, and approvals. Use before shipping a release or deploying a change with database migrations.
De7 Core Web Vitals
Track 7 rail — Core Web Vitals on animation-heavy sites. Architecting for elite LCP (under 2.5s), INP (under 200ms), and CLS (under 0.1) when the page carries WebGL, heavy animation, and custom fonts — poster-image LCP strategy, hydration and long-task INP fixes, layout-reservation CLS fixes, and field measurement with the web-vitals library. Use whenever improving Lighthouse/CWV scores, diagnosi…
De6 Component Composition
Track 6 rail — component composition. Designing isolated, customizable, accessible drop-in components in React/Vue/Svelte — compound component patterns, headless-core + styled-shell separation, baked-in accessibility (keyboard, ARIA, focus, reduced motion), exit-animation-aware design, and physical motion props. Use whenever structuring reusable components or component libraries, reviewing compon…
De4 Collision Detection
Track 4 rail — collision detection algorithms. AABB overlap tests, bounding circle/sphere tests with squared distances, SAT (Separating Axis Theorem) for rotated shapes, collision resolution (MTV, velocity exchange), spatial hash broad-phase, and repulsion force fields. Use whenever UI or canvas elements need to bump, repel, contain, pile, or avoid each other — physics-piled tags, magnetic button…
De2 Interaction Storyboarding
Track 2 rail — storyboarding interactions. Cell-by-cell keyframe sequences that specify exactly how an element morphs, expands, or transitions over time, with property-level values, animation principles (anticipation, follow-through, squash/stretch, arcs, stagger), and interruption behavior. Use whenever planning any non-trivial animation or transition before coding, writing a motion spec, or whe…
De5 Lowlevel Js
Track 5 rail — low-level JavaScript performance. Typed arrays (Float32Array) for bulk numeric data, zero-allocation render loops and GC pressure, Web Workers with transferable ArrayBuffers and OffscreenCanvas, the canonical requestAnimationFrame ticker with dt clamping and teardown, and JIT-friendly micro-patterns. Use whenever writing performance-critical JavaScript for visual work — particle st…
Design Critic
Gives structured design feedback on usability, hierarchy, and consistency for a screen or flow — from early exploration to final polish. Use when reviewing a mockup, screenshot, or Figma link.
De3 Threejs R3f
Track 3 rail — Three.js and React Three Fiber scene architecture. Camera rigs, scene graph management, lighting setups, physical materials, color management/tone mapping, R3F performance rules (useFrame mutation, no per-frame setState, instancing), and draw-call budgets. Use whenever building or reviewing Three.js/R3F scenes, choosing cameras/lights/materials, debugging why web 3D "looks like a t…
De5 Canvas 2d
Track 5 rail — the HTML5 Canvas 2D API at production quality. High-DPI (Retina) setup with devicePixelRatio, pre-rendering to offscreen canvases, particle-system batching with typed arrays, clipping/masking/composite operations, motion trails, and knowing when Canvas beats DOM. Use whenever building canvas animations, particle effects, generative visuals, custom drawing surfaces, or whenever canv…
De8 Telemetry
Track 8 rail — telemetry and observability. Production monitoring for creative sites — Sentry with source maps and release tagging, explicit capture of WebGL context loss / shader compile failures / asset load errors with GPU info, real-user monitoring of Core Web Vitals segmented by device tier, sampled FPS metrics for hero scenes, session replay, and alerting that catches visual regressions in…
De5 Pointer Gestures
Track 5 rail — advanced pointer event handling. Unified Pointer Events for mouse/trackpad/touch/pen, setPointerCapture, touch-action CSS, velocity tracking with sample buffers, multi-touch pinch-zoom and rotation math, coalesced events for high-Hz styluses, and decoupling input handlers from rendering. Use whenever implementing drag, swipe, pinch-to-zoom, rotate gestures, drawing surfaces, or cus…
De1 Micro Typography
Track 1 rail — micro-typography. Size-responsive letter-spacing (tracking) curves, line-height scaling, orphan/widow control, and OpenType features (tabular figures, ligatures, optical sizes). Use whenever setting or reviewing typography in CSS or design tokens, choosing letter-spacing or line-height, fixing "cramped" or "loose" text, columns of numbers that jitter, headlines with dangling single…
De7 Profiling
Track 7 rail — performance profiling with Chrome DevTools. Performance panel frame-hunting under CPU throttling, reading flame charts, eliminating Long Tasks, Memory panel heap-snapshot leak hunting (detached nodes, undisposed WebGL resources), and the Rendering panel (paint flashing, layer borders, FPS meter). Use whenever diagnosing frame drops, jank, sites that slow down over time, memory leak…
De4 Euler Integration
Track 4 rail — Euler integration. Implementing the core physics loop (v += a*dt; x += v*dt) with real delta-time from RAF timestamps, dt clamping, semi-implicit Euler stability, fixed-timestep substeps, and frame-rate independence. Use whenever writing any real-time physics or motion simulation loop, custom animation tickers, or debugging motion that behaves differently at 60Hz vs 120Hz, explodes…
Color Grading
Correct and grade video color — balance exposure and white balance first, then build a look. Produces a node/layer-by-layer grade plan with scope targets, a stated mood, and shot-matching notes. Use when the user asks to color correct, grade footage, fix white balance, match shots, create a look or LUT, or make video "look cinematic.
De2 Perspective Sketching
Track 2 rail — perspective and industrial sketching. 1/2/3-point perspective methods for visualizing UI cards, folders, device mockups, and 3D scenes on paper before coding. Use whenever a user wants to sketch or visualize a spatial/3D concept before building it, plan a 3D scene's camera and composition, learn perspective drawing for design work, or when Claude is describing how a 3D layout shoul…
Competitive Analyst
Researches competitors and produces a positioning/messaging comparison with content gaps, opportunities, and threats. Use when building sales battlecards, finding positioning gaps, or assessing a competitor's move.
De4 Bezier Splines
Track 4 rail — bezier curve and spline math. Cubic bezier evaluation, how CSS cubic-bezier() easing actually works (time-remapping and Newton-Raphson inversion), standard easing functions in JS, Hermite/Catmull-Rom splines for path-through-points motion, and arc-length reparameterization for constant-speed travel. Use whenever hand-rolling easing functions, implementing motion along a curved path…
De6 Token Pipeline
Track 6 rail — Figma-to-code design token pipelines. Automated systems (Style Dictionary, Tokens Studio, Figma Variables API) that export design tokens from Figma variables into Tailwind configs, CSS custom properties, SCSS, JSON, and TypeScript declarations — with primitive/semantic tiers, light/dark modes, and CI automation. Use whenever setting up or reviewing a design token system, syncing Fi…
De3 Glsl Shaders
Track 3 rail — GLSL shader writing (vertex & fragment), including SDFs (signed distance fields), raymarching, and noise math (Perlin, Simplex, Worley, fBm, domain warping). Use whenever writing or debugging WebGL/GLSL shaders, building liquid/blob/metaball effects, hover image distortion, fire/smoke/water/aurora effects, procedural backgrounds, rendering shapes mathematically without polygons, or…
De4 Spring Damper
Track 4 rail — spring-mass-damper systems (Hooke's law). Writing custom spring solvers (F = -kx - cv), damping ratio theory (under/critical/overdamped), stiffness-damping preset vocabulary, interruptible retargeting, settle detection, and chained springs for follow-through. Use whenever implementing springy/bouncy UI motion, configuring Framer Motion/react-spring/GSAP spring parameters, replacing…
Animated Component Architect
Architects state and component structure for animation-heavy UI — avoiding re-render storms, typing animation APIs safely, and structuring interactive components so motion logic stays isolated and reusable. Use when an animation-heavy React/Vue/Svelte app is re-rendering too much, when structuring a reusable animated component library, or when typing complex interaction state.
Creative Artist
Generate genuinely original creative work and concepts — across visual art, writing, music, naming, campaigns, world-building, and mixed media. Pushes past the obvious first ideas to bold, surprising, well-developed concepts, and can direct, critique, and refine creative work. Use this skill whenever the user wants to brainstorm, ideate, come up with concepts, "make it more creative/original/bold…
De3 Linear Algebra
Track 3 rail — linear algebra for graphics. Working vector math (2D/3D vectors, dot products for lighting and facing, cross products for normals), 3x3 and 4x4 matrix transformations, homogeneous coordinates, transform composition order, normal matrices, and Euler vs quaternion rotation. Use whenever writing or explaining 3D/graphics math, lighting calculations, camera math, transform code in Thre…
De1 Optical Alignment
Track 1 rail — optical vs. mathematical alignment. Rules for when and how far to nudge icons, shapes, and text off mathematical center to compensate for human optical weight. Use whenever centering icons in buttons, aligning icons with text, mixing circles/triangles/squares at "equal" size, vertically centering text in badges/buttons, or whenever a user says something "looks off-center" or "looks…
De8 Bundling
Track 8 rail — advanced bundling architecture. Vite/Rollup/Webpack setup for creative sites — tree-shaking three.js correctly, route-level and experience-level code splitting, manualChunks vendor pinning, hashed immutable asset caching, Brotli compression, image/SVG build steps, and mandatory bundle analysis. Use whenever configuring build tools, when a bundle is too large or three.js won't tree-…
De8 Edge Deployment
Track 8 rail — global edge deployment. Static-first architecture with edge functions, platform selection (Cloudflare Pages/Workers/R2 vs Vercel vs AWS CloudFront/Lambda@Edge), CDN caching rules for creative sites, stale-while-revalidate, edge middleware for redirects/AB tests, and preview deployments as a design review workflow. Use whenever choosing hosting for a site, deploying static sites or…
De1 Grid Spacing
Track 1 rail — grid systems and spacing logic. Geometric spacing scales (4→8→12→16→24→32→48→64), spacing-as-hierarchy (Gestalt grouping), fluid layouts with clamp(), asymmetric grids, deliberate grid-breaking, and nested border-radius math. Use whenever choosing margins/padding/gaps, designing page layout or grids, reviewing a "cluttered" or "unbalanced" UI, setting up spacing tokens, or any time…
Component Designer
Design a UI component from scratch — structure, states, variants, props/API, accessibility, and edge cases. Produces a component spec a designer and engineer can build from without ambiguity. Use when the user asks to design a button, input, modal, card, menu, or any reusable UI primitive.