design-review
Core pack — always active for visual work. Quality gate for UI, components, pages, layouts, or frontend work. Triggers on any visual/design task automatically. Use before presenting work, during builds, and for design QA.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/aa-on-ai/design-reviewWhat This Skill Does
The design-review skill acts as a mandatory quality gate for all visual and frontend development tasks within OpenClaw. It enforces a standardized design process based on 'Aaron's Core Principles,' ensuring that all UI components, pages, and layouts meet professional standards before they are presented for final review. By automating the design verification process, this skill removes subjectivity, enforces visual hierarchy, and ensures strict adherence to project-specific design systems, spacing tokens, and typography scales.
Installation
To integrate this skill into your environment, run the following command in your terminal:
clawhub install openclaw/skills/skills/aa-on-ai/design-review
Use Cases
This skill is designed for critical visual tasks including:
- Frontend feature implementation: Verifying that new components match existing tokens.
- Dashboard and Layout design: Ensuring spacing and rhythm adhere to design guidelines.
- Responsive adjustments: Validating layouts across target viewports rather than arbitrary devtools sizes.
- Design QA: Running a systematic check against anti-patterns to identify common visual mistakes before a human reviewer sees the work.
Example Prompts
- "I've finished building the new settings panel. Please run the design-review skill to ensure the spacing and typography hierarchy match our current guidelines before I push the PR."
- "Perform a design-review on the updated landing page and compare the header section against our spacing documentation in
references/spacing.md." - "Before I present these new interactive cards to the team, apply the design-review skill to check for anti-patterns and ensure the motion easing is within our accepted range."
Tips & Limitations
- Tip: Always load the relevant reference file for your specific task (e.g., typography, color, or motion) to ensure the AI evaluates your work against the correct constraint set.
- Tip: Treat this as a quality gate. If the skill flags an issue, do not bypass it. The AI will often suggest pixel-level adjustments that dramatically improve the 'feel' of the interface.
- Limitation: This skill is a visual and design logic tool; it does not perform functional or unit testing of code. It assumes the underlying implementation is functional and focuses strictly on the aesthetics, layout, and UX standards defined in your project repository.
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-aa-on-ai-design-review": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-read
Related Skills
ux-baseline-check
Core pack — always active for visual work. Enforces UX quality standards on any screen, flow, form, or dashboard. Ensures nothing ships with missing states. Auto-activates alongside design-review for all frontend work.
Whimsical Design
Skill by aa-on-ai
agent-friendly-design
Design websites and applications that AI agents can consume, navigate, and interact with. Use when building any site, app, or product that agents will use as an end-user — not just crawl or index. Covers semantic structure, accessibility-as-agent-interface, machine-readable data, API-first patterns, and the emerging protocols (llms.txt, MCP, NLWeb, A2UI) that make sites agent-ready. Triggers on: agent-friendly, agent-readable, agent-accessible, AX, agent experience, agentic web, dual-interface, machine-readable, llms.txt, MCP integration, NLWeb, accessibility tree, ARIA for agents, structured data, JSON-LD, Schema.org, API-first design, build for agents, agent-ready.
World Build
Skill by aa-on-ai
web-animation-design
Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.