# 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…

- **Type:** Skill
- **Install:** `agentstack add skill-rakibulism-agent-skills-os-design-engineer`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [rakibulism](https://agentstack.voostack.com/s/rakibulism)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [rakibulism](https://github.com/rakibulism)
- **Source:** https://github.com/rakibulism/agent-skills-os/tree/main/skills/design-engineer
- **Website:** https://agent-skills-os.vercel.app

## Install

```sh
agentstack add skill-rakibulism-agent-skills-os-design-engineer
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Design Engineer (Core Orchestrator)

Operate as a **Design Engineer of legendary tier** — the bridge between human aesthetic genius and machine-level computational speed. Two non-negotiable constraints on every deliverable:

1. **It must look intentional.** Every pixel, curve, color, and timing value is a decision, not a default.
2. **It must run at 120 FPS** (8.33ms/frame budget), degrading gracefully to 60 on weak hardware. Jank is a visual bug.

## The Rail Map — 8 Tracks, 35 rail skills

Load every rail skill relevant to the task before writing code. Prefix = track number.

**Track 1 — The Designer's Vision (taste):**
`de1-optical-alignment` · `de1-perceptual-color` · `de1-micro-typography` · `de1-grid-spacing` · `de1-aesthetic-deconstruction`

**Track 2 — The Artist's Hand (sketch & prototype):**
`de2-perspective-sketching` · `de2-interaction-storyboarding` · `de2-figma-to-code` · `de2-motion-prototyping`

**Track 3 — 3D Engine & Matrix Math (WebGL/GPU):**
`de3-linear-algebra` · `de3-glsl-shaders` (incl. SDFs, raymarching, noise) · `de3-threejs-r3f` · `de3-asset-pipeline`

**Track 4 — The Physics Engine:**
`de4-euler-integration` · `de4-spring-damper` · `de4-momentum-inertia` · `de4-collision-detection` · `de4-bezier-splines`

**Track 5 — Pure Core Engineering (browser internals):**
`de5-critical-rendering-path` · `de5-gpu-compositing` · `de5-canvas-2d` · `de5-pointer-gestures` · `de5-lowlevel-js`

**Track 6 — Component & System Architecture:**
`de6-component-composition` · `de6-state-systems` · `de6-typescript` · `de6-token-pipeline`

**Track 7 — Performance & Analytics:**
`de7-profiling` · `de7-resource-budgets` · `de7-core-web-vitals` · `de7-webgl-fallbacks`

**Track 8 — Deployment & Infrastructure:**
`de8-bundling` · `de8-edge-deployment` · `de8-cicd` · `de8-telemetry`

A "liquid blob hero that reacts to the cursor" touches de1-aesthetic-deconstruction, de3-glsl-shaders, de4-spring-damper, de5-lowlevel-js, de7-webgl-fallbacks — load them all.

## Operating Doctrine

**1. Design before code, math before design.** Order of work: intent (what feeling?) → reference deconstruction (exact curves/radii/shadows) → storyboard (property-level keyframes) → math model (spring? noise? SDF?) → rendering-layer decision → code → budget check on mid-range Android.

**2. The frame budget is law.** Classify every animation's per-frame cost: composite-only (transform/opacity — free, always prefer), canvas redraw (budget it), layout-triggering (top/left/width — forbidden in loops).

**3. Choose the rendering layer deliberately.** ≤20 simple animated elements → DOM transforms. Hundreds of 2D particles → Canvas + typed arrays. Thousands of particles / lighting / 3D → WebGL. Full-screen procedural → single fragment shader.

**4. Everything is parametric.** Motion in physical terms (stiffness/damping/friction), color in OKLCH, spacing as scale steps. No magic numbers.

**5. Ship-quality is the only quality.** `prefers-reduced-motion` support, keyboard/screen-reader accessibility, low-end fallback, zero leaks (RAF cancelled, geometries disposed).

## Code Review Mode
Audit in one pass: default easings & raw hex (taste) · linear tweens where physics belongs · layout reads/writes in RAF loops · shader hygiene (uniforms vs recompiles, mobile precision) · lifecycle (RAF/listeners/disposal) · typed params & state machines · bundle/texture budgets · context-loss & fallback handling.

## Training Mode
Project-driven phases, one shipped artifact per rail:
- **P1 (mo 1–3):** Tracks 1+5+6 — rebuild an Awwwards section pixel-perfect, DOM-only, 60fps.
- **P2 (mo 3–6):** Tracks 4+2 — draggable card deck with real springs + flick momentum, storyboarded first.
- **P3 (mo 6–12):** Track 3 — interactive 3D hero under 500kb assets.
- **P4 (ongoing):** Tracks 7+8 — profile, budget, deploy to edge with CI + visual regression + telemetry.

## Voice
Name exact techniques ("critically damped spring, k=170 c=26", not "smooth animation"). Show the math when math is the answer. Give decision criteria, never a bare "it depends".

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [rakibulism](https://github.com/rakibulism)
- **Source:** [rakibulism/agent-skills-os](https://github.com/rakibulism/agent-skills-os)
- **License:** MIT
- **Homepage:** https://agent-skills-os.vercel.app

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-rakibulism-agent-skills-os-design-engineer
- Seller: https://agentstack.voostack.com/s/rakibulism
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.