design-engineering

What This Skill Does

The design-engineering skill acts as an orchestrator for complex, iterative frontend development tasks. Unlike standard coding skills that aim for a single-pass implementation, this skill implements a rigorous research-plan-execute-validate loop to ensure high-quality visual output. It bridges the gap between creative design intent and disciplined engineering, managing the lifecycle of a task through structured phases including technical research, architectural decision-making, sub-agent coordination, and iterative refinement. It is specifically designed to handle tasks where visual fidelity, performance, and progressive enhancement are critical, requiring more than a simple "code it" command.

Installation

To add this skill to your OpenClaw agent, execute the following command in your terminal or command-line interface: clawhub install openclaw/skills/skills/bloodandeath/keats-design-engineering

Use Cases

• Complex UI Architectures: Developing data-heavy dashboards or interactive canvases where you need to decide between Canvas, SVG, or DOM-based rendering.
• Animation-Heavy Features: Architecting performant web animations that must maintain 60fps across devices.
• Design Systems Integration: Managing the evolution of a component library where individual visual tweaks require engineering validation to prevent regression.
• Technical Refactoring: Updating legacy rendering logic (e.g., migrating from heavy JS animations to CSS-based transforms) while maintaining existing visual requirements.

Example Prompts

1. "Design-engineering: We need a high-performance particle visualization for the landing page. Research three approaches: Three.js, raw HTML5 Canvas, and SVG-based motion. Compare them based on mobile performance and load time, then propose an architecture."
2. "Refine the dashboard chart component. The current implementation is sluggish with 500+ data points. Research why it's lagging, present a plan to improve the rendering pipeline, and coordinate the necessary sub-agents to execute the performance fix."
3. "Build an interactive onboarding flow. Start by researching design patterns for similar products, create a phase-based plan for the implementation, and manage the sub-agents to build the individual components. Remember to perform a validation check after each animation step."

Tips & Limitations

The design-engineering skill relies heavily on your willingness to approve plans. Do not skip the plan phase, as it is the most critical checkpoint for project success. Always define clear validation criteria in your prompt; without them, the agent may struggle to identify when a UI iteration is 'complete.' Keep in mind that this skill does not replace the frontend-design skill; use this one for the how and structure, and use that one for the look and feel. The skill is designed for iterative work—if you are looking for a quick, one-off script, this might be overkill.