skills.rest
rakibulism
rakibulismCOMMUNITY
Explore all skills by this author →
Website𝕏@rakibulismGitHub

design-engineer

Plan and review WebGL and motion-heavy web experiences with performance guardrails.

2|1|Updated May 17, 2026
Search Tags:#performance optimization#webgl#three.js#motion design#design engineering#interactive websites
One-click install
npx skills add https://github.com/rakibulism/agent-skills-os --skill design-engineer-rakibulism
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-engineer
Source: https://github.com/rakibulism/agent-skills-os/tree/main/skills/design-engineer
Command: npx skills add https://github.com/rakibulism/agent-skills-os --skill design-engineer-rakibulism

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design, review, plan, and teach elite creative web experiences that need both exceptional visual taste and high performance. It is built for work where aesthetics, motion, WebGL, and browser efficiency all matter at the same time.

Core Features & Use Cases

  • Design Engineering Strategy: Choose the right rendering layer, motion model, and interaction pattern for premium websites and interactive hero sections.
  • Visual Craft and Motion Direction: Specify timing, spacing, color, typography, shadows, and optical alignment with production-level precision.
  • 3D, WebGL, and Animation Systems: Plan or implement shader effects, Three.js scenes, physics-based motion, and scroll-driven experiences while preserving frame budget.
  • Performance and Accessibility Guardrails: Review code for layout thrashing, repaint-heavy effects, asset bloat, reduced-motion support, and fallback behavior.
  • Training and Curriculum Planning: Build a structured roadmap for learning design engineering from taste and sketching through GPU math, browser internals, deployment, and profiling.

Quick Start

Ask the design-engineer skill to evaluate your interactive web project, identify the right motion and rendering approach, and give you a production-ready implementation plan with performance and accessibility constraints.

Frequently Asked Questions about design-engineer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize Three.js performance for interactive websites to hit 120 FPS?▼

Optimize Three.js performance by selecting the right rendering layer, minimizing layout thrashing, and managing asset budgets. This Skill evaluates your WebGL scenes to preserve the frame budget while maintaining visual taste and high frame rates across DOM, Canvas, and WebGL environments.

What is design engineering for premium web experiences?▼

Design engineering for premium web experiences is the process of combining visual taste with high frame-rate performance. It involves specifying motion models, timing, and shader effects while applying performance and accessibility guardrails to build elite interactive websites.

How do I plan scroll-driven motion design without causing browser repaints?▼

Plan scroll-driven motion by choosing the correct interaction pattern and rendering layer to avoid repaint-heavy effects. This Skill provides production-level architecture decisions across DOM and Canvas, ensuring smooth physics-based motion without layout thrashing.

Does WebGL support accessibility fallbacks for reduced-motion preferences?▼

WebGL must support accessibility fallbacks for reduced-motion preferences to ensure usable interactive websites. This Skill reviews your code to verify fallback behavior, reduced-motion support, and asset bloat prevention within 3D hero sections and shader effects.

When should I use Canvas versus WebGL for 3D hero sections?▼

Choose Canvas versus WebGL for 3D hero sections based on your specific motion specs and frame budget requirements. This Skill helps select the right rendering layer and architecture decisions to balance visual craft with browser efficiency.

How do I build a curriculum to learn shader effects and browser internals?▼

Build a design engineering curriculum by structuring a roadmap from sketching through GPU math and browser internals. This Skill plans training covering shader effects, deployment, and profiling to teach creative frontend systems comprehensively.

Related Skills

Explore More Design & Creative Skills→
PelekePeleke

visual-pass

Analyze educational content to produce a prioritized visual asset injection manifest.

Community
Advanced
fratilanicofratilanico
7

performance-optimization

Profile and optimize React/Next.js web apps to improve Core Web Vitals.

Community
Advanced
rakibulismrakibulism
2

webgl-creative-coder

Build GPU-driven WebGL visuals and shader effects for Three.js and React Three Fiber.

Community
Advanced
CrumbgrabberCrumbgrabber
3

artifacts-builder

Generate and bundle React, TypeScript, Vite, Tailwind CSS, and shadcn/ui applications into single HTML files.

Community
Advanced