design-engineering
Orchestrate iterative design and frontend engineering work through research, planning, sub-agent execution, and validation loops. Use when a visual/UI task requires multiple iterations, when the first implementation needs refinement based on feedback, when choosing between competing technical approaches (Canvas vs SVG vs CSS), or when coordinating sub-agents on design-heavy work. Covers animation architecture decisions, progressive enhancement patterns, performance-aware rendering choices, and the research→plan→execute→validate workflow. Complements frontend-design (which handles aesthetics) by adding engineering discipline, iteration management, and technical decision-making.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/bloodandeath/design-engineeringWhat This Skill Does
The design-engineering skill is a meta-orchestrator designed to manage the high-complexity lifecycle of frontend visual tasks. It moves beyond simple coding by implementing a rigorous Research → Plan → Execute → Validate → Refine loop. By treating design as an engineering discipline, it coordinates sub-agents to handle specific aspects of a project—such as performance, accessibility, and visual fidelity—ensuring that implementation choices are backed by technical research rather than intuition.
Installation
You can integrate this skill into your environment by executing the following command in your terminal:
clawhub install openclaw/skills/skills/bloodandeath/design-engineering
Use Cases
Use this skill when a frontend task exceeds basic UI generation. Ideal scenarios include:
- Developing complex, performance-critical data visualizations.
- Building interactive UI components that require specific browser compatibility or progressive enhancement patterns.
- Refactoring visual systems where technical debt is accumulating, requiring a clean slate approach with defined architecture.
- Managing projects that require a choice between competing rendering technologies (e.g., SVG vs. Canvas vs. WebGL) based on scale and browser constraints.
Example Prompts
- "I need to build a high-performance interactive map component. Start the research phase to compare Canvas vs SVG performance for 500+ active data points."
- "Review the current design implementation of the dashboard; use the design-engineering loop to identify why the animation lags and propose a fix."
- "Orchestrate a sub-agent team to build a responsive, accessible navigation system that degrades gracefully for older browsers."
Tips & Limitations
- Iteration is key: Expect 2-5 iterations. This skill is optimized for quality control, not 'one-shot' output.
- Read the references: Always ensure
references/rendering-decisions.mdandreferences/validation-checklist.mdare accessible for the orchestrator to pull accurate technical context. - Limitation: This is not a design tool for aesthetics. Use
frontend-designfor stylistic choices. Design-engineering focuses on the structural and technical implementation of those designs. - Documentation: Ensure sub-agents write their findings to the filesystem so that state is persisted during session restarts.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-bloodandeath-design-engineering": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, file-read, code-execution
Related Skills
design-engineering
Orchestrate iterative design and frontend engineering work through research, planning, sub-agent execution, and validation loops. Use when a visual/UI task requires multiple iterations, when the first implementation needs refinement based on feedback, when choosing between competing technical approaches (Canvas vs SVG vs CSS), or when coordinating sub-agents on design-heavy work. Covers animation architecture decisions, progressive enhancement patterns, performance-aware rendering choices, and the research→plan→execute→validate workflow. Complements frontend-design (which handles aesthetics) by adding engineering discipline, iteration management, and technical decision-making.
agent-cost-monitor
Real-time token usage and cost tracking across all your OpenClaw agents — alerts, budgets, and optimization tips
web-monitor
Monitor web pages for content changes and get alerts. Track URLs, detect updates, view diffs. Use when asked to watch a website, track changes on a page, monitor for new posts/content, set up page change alerts, or check if a site has been updated. Supports CSS selectors for targeted monitoring.
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
code-reviewer
Conduct rigorous, adversarial code reviews with zero tolerance for mediocrity. Default behavior is a single-model adversarial review that identifies security holes, lazy patterns, edge case failures, and bad practices across Python, R, JavaScript/TypeScript, SQL, and front-end code. Supports an optional `--dual` mode for heavier cross-model iterative review when deeper scrutiny is worth the added cost and latency. Use when users ask to "critically review my code", "critically review" code or a PR, "critique my code", "find issues in my code", "find issues" in code, ask "what's wrong with this code", ask to "review this code", "critique my PR", say "double review this", or request a "cross-model review". Scrutinizes error handling, type safety, performance, accessibility, and code quality. Provides structured feedback with severity tiers (Blocking, Required Changes, Suggestions, Noted) and specific, actionable recommendations.