visual-engineering-intelligence

# Visual Engineering Intelligence Turn product intent into an observable visual experience. Define outcomes, relationships, constraints, and acceptance conditions; let the project choose how to implement them. Preserve the user's scope, existing behavior, and useful visual identity. When the request is to create or improve something, apply these skills to the finished artifact. A thesis, plan, checklist, or critique is an intermediate aid unless it is the requested deliverable. Carry authorized construction and refinement through to completion with the capabilities available. ## Activate from the work Select capabilities from the artifact and its affected relationships, even when the request says only "make it beautiful." Read the owning skill before making a consequential decision in that area. Apply its decisions to the artifact rather than merely repeating its vocabulary. For substantial interface work, resolve composition, interaction, responsive behavior, accessibility, and visual QA. Add direction when identity is open, motion when movement has a defined role, and performance when complexity or response warrants it. For object presentation, resolve geometry, material, lighting, camera, and rendering. Add object structure for connected or articulated parts, and assembly for release, insertion, or exploded presentation. Spatial interaction additionally needs placement, input zones, and accessible task equivalents. The `premium-ui` bundle groups the complete interface foundations, including responsive and accessibility bodies. The `product-3d` bundle groups scene construction, assembly/disassembly, materials, lighting, framing and rendering. Use these as bounded starting selections through MCP or text export; load further bodies by unresolved decision. For different visual tastes or theme variations read [visual languages and themes](../visual-direction/references/visual-languages-and-themes.md); for layer, alpha and glass problems read [compositing and blending](../rendering-judgment/references/compositing-and-blending.md). Start reference-driven work with reconstruction. Add storytelling when order changes what the viewer learns. For a narrow repair, load its responsible capability and inspect only the affected relationships. Do not activate every specialist for every task, and do not omit a relevant one merely because the user did not name its discipline. For original flagship, editorial or launch work, [award craft](../award-craft/SKILL.md) adds concept exploration and critique. The `award-ui` bundle supplies its creative foundations; combine it with `premium-ui` for responsive and accessible delivery. Choose a direction using real content, then test an opening, ordinary section and primary action together. A distinctive still composition or useful data comparison can be the signature; do not require effects or a rebrand to demonstrate creativity. Use [Three.js engineering](../threejs-engineering/SKILL.md) when implementing a browser 3D scene with Three.js or React Three Fiber. It supplies the execution patterns that translate geometry, motion, and rendering decisions into a working scene. Read linked implementation references only when their stated condition applies. For cinematic websites, scroll-directed scenes, shader experiences, or film-like sequences, use [cinematic web](../cinematic-web/SKILL.md). Produce its numeric motion storyboard before implementation, choose the rendering medium, and verify deterministic states and actual playback. Ordinary small interface transitions do not need the cinematic workflow. When the user requests motion graphics, cursor tracking, scroll effects, GIF/video motion or an animated UI based on a topic, use [interactive motion](../interactive-motion/SKILL.md). Resolve the topic's audience, primary action, hierarchy and motion role before picking effects. Its named `interactive-motion` bundle supplies the common selection, implementation and verification bodies together; keep deeper references selective. For luxury, premium or editorial work, use [luxury editorial direction](../visual-direction/references/luxury-editorial-direction.md) to translate the subject and audience into composition, typography, imagery and motion character. The named `luxury-cinematic` bundle combines this with recorded sequences, cursor object control, Three.js and QA. Work in the user's actual project; these bundles supply reusable decisions and algorithms, not a fixed design template. ## Establish the contract Inspect the affected experience, actual content or subject, established visual rules, interaction behavior, available assets, implementation conventions, and delivery conditions. Separate the user's task from any commercial objective. Identify the primary action or viewing question, the information it requires, and what establishes completion. For substantial work, establish a concise visual thesis, focal hierarchy, relevant states, delivery views, input conditions, and observable success criteria. Convert adjectives into observable choices: what dominates, which relationship creates distinction, how the subject is framed, and what remains quiet. For a local repair, infer the existing direction and change the responsible relationship. Planning should support the artifact; it need not create another document. Distinguish known facts, inferred relationships, and deliberate artistic choices. Record decisions and observable evidence when useful; do not request or reconstruct private reasoning traces. Never convert a project-specific aesthetic or mechanism into a universal requirement. ## Load by unresolved decision Each linked folder is an independently usable skill. Use the table to locate the next source of needed detail. If a specialist's contents are unavailable, continue with available guidance and identify any consequential decision that remains unsupported. Keep the skill folders as siblings when relocating the suite so relative links retain their meaning. A host must expose the skill descriptions through its discovery mechanism or supply this entrypoint explicitly. A model without file access needs the selected skill bodies as context; links alone do not supply guidance. The visual principles do not depend on a particular model, but file availability cannot guarantee discovery or equivalent capability. | Decision | Owning skill | | --- | --- | | What visual character belongs to this product; what identity survives a redesign? | [Visual direction](../visual-direction/SKILL.md) | | Which original concept deserves development, and what does critique show needs refinement? | [Award craft](../award-craft/SKILL.md) | | Which typefaces, roles, fluid sizes and loading strategy express the content? | [Typography system](../typography-system/SKILL.md) | | Which palette, theme and state colors remain readable in context? | [Color system](../color-system/SKILL.md) | | How do shared values become maintainable CSS and component decisions? | [Design tokens](../design-tokens/SKILL.md) | | How do navigation, forms, media, commerce and data tables behave and feel complete? | [Component craft](../component-craft/SKILL.md) | | How do timelines, scroll patterns and page transitions integrate with the chosen stack? | [Motion engineering](../motion-engineering/SKILL.md) | | Can a procedural visual express the idea within the asset and rendering budget? | [Procedural WebGL](../procedural-webgl/SKILL.md) | | What leads; how do type, spacing, color, density, and grouping express relationships? | [Visual composition](../visual-composition/SKILL.md) | | What can users do; what responds, commits, recovers, and stays stable? | [Interaction design](../interaction-design/SKILL.md) | | How should movement start, progress, interrupt, reverse, and settle? | [Motion intelligence](../motion-intelligence/SKILL.md) | | How should silhouette, proportions, thickness, surfaces, and connections be constructed? | [Geometric reasoning](../geometric-reasoning/SKILL.md) | | Which parts inherit movement; where are pivots; what defines exact rest? | [Object structure](../object-structure/SKILL.md) | | Which parts release first; along what paths; how does reassembly remain valid? | [Assembly choreography](../assembly-choreography/SKILL.md) | | How do placement, scale, depth, labels, and interaction zones explain space? | [Spatial reasoning](../spatial-reasoning/SKILL.md) | | What is each surface made from; how should it respond to illumination? | [Material reasoning](../material-reasoning/SKILL.md) | | Which illumination reveals form, separation, grounding, and atmosphere? | [Lighting design](../lighting-design/SKILL.md) | | What should the viewer see; how do framing, perspective, and travel reveal it? | [Camera composition](../camera-composition/SKILL.md) | | Which source produces visible edge, shadow, color, reflection, or temporal defects? | [Rendering judgment](../rendering-judgment/SKILL.md) | | What does each stage reveal; how can users skip, revisit, or explore? | [Visual storytelling](../visual-storytelling/SKILL.md) | | How does composition change with space, content, orientation, and input? | [Responsive composition](../responsive-composition/SKILL.md) | | What underlying system explains a supplied reference? | [Visual reconstruction](../visual-reconstruction/SKILL.md) | | Which costs can be reduced while preserving perceptual value and response? | [Visual performance](../visual-performance/SKILL.md) | | How are meaning and task access preserved across sensory and input needs? | [Visual accessibility](../visual-accessibility/SKILL.md) | | What is visibly wrong, what matters most, and what correction is supported? | [Visual QA](../visual-qa/SKILL.md) | | How does a Three.js scene load, render, respond, resize, and release its resources? | [Three.js engineering](../threejs-engineering/SKILL.md) | | How do scroll, camera, shaders, 3D components and DOM form a directed, measurable sequence? | [Cinematic web](../cinematic-web/SKILL.md) | | Which movement fits this topic, and how do cursor, scroll, graphics and recorded media respond correctly? | [Interactive motion](../interactive-motion/SKILL.md) | For substantial construction, read [the delivery workflow](references/delivery-workflow.md) to establish a compact working specification and acceptance decisions. For a host without skill discovery or browser tools, read [capability and loading adaptations](references/host-capabilities.md). Neither reference is required for an ordinary narrow repair. ## Work in dependency order Establish product intent and visual direction, then structure and hierarchy. Add interaction and temporal rules where state changes. For spatial work, resolve part structure and placement before detailed surfaces, illumination, and camera choreography. Construct a representative view or journey early enough to expose the largest uncertainty. Carry decisions between specialists as a compact working specification: selected subject and identity, actual values or dimensional relationships, state and motion ownership, relevant frames and units, preserved invariants, and unresolved assumptions. Keep this in working context unless a document is requested. The next specialist should refine those decisions rather than invent a competing interpretation. Revisit an upstream decision when it prevents the downstream result, and propagate the change to affected relationships. Space and motion earn their cost through explanation, inspection, atmosphere, play, or identity. An intentionally minimal result can be complete. Preserve one authoritative meaning for each selection, status, value, and outcome across every presentation. Keep implementation decisions inside the project; these skills do not authorize replacing its technology, expanding its functionality, or changing its business rules. ## Pursue expressive precision Choose a strong organizing relationship that the product can own: an unusual but useful composition, revealing object behavior, deliberate image direction, expressive typography, or a spatial explanation. Let supporting elements reinforce it. Restraint should concentrate expression; it does not require timid scale, neutral styling, or conventional layouts. Treat visual force and correctness as simultaneous requirements. Preserve supplied dimensions, reference fidelity, data meaning, usable controls, and truthful outcomes while exploring expression. When novelty conflicts with an explicit fidelity requirement, the required relationship wins. When a result is correct but visually anonymous, revisit direction and composition rather than merely adding surface effects. ## Judge the delivered experience Render, observe, identify the largest failure, load its owning specialist if needed, correct its cause, and inspect the affected result again. Repair blocked tasks and incorrect structure before local polish. Evaluate stills at delivery size and motion through playback; construction success alone does not establish appearance. Stop when material defects in the requested scope are resolved and available observations support the result. Where inspection is unavailable, distinguish completed construction from unobserved appearance or behavior. Report remaining uncertainty without inventing evidence.