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.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/aa-on-ai/ux-baseline-checkWhat This Skill Does
The ux-baseline-check skill acts as an automated quality assurance auditor for OpenClaw AI agents, specifically engineered to enforce rigorous visual and frontend design standards. It operates as a mandatory core component in any frontend workflow, ensuring that no UI component or page is finalized without addressing the comprehensive list of UX states—ranging from empty, loading, and error data states to nuanced interaction, form, responsiveness, and accessibility requirements. By institutionalizing this checklist, the skill eliminates the common pitfalls of 'happy path' development, where developers might ignore edge cases, accessibility concerns, or state transitions that lead to broken user experiences.
Installation
To integrate this essential quality gate into your workspace, run the following command within your terminal or OpenClaw interface:
clawhub install openclaw/skills/skills/aa-on-ai/ux-baseline-check
Once installed, the agent will monitor your development process and automatically prompt you to perform either a 'Quick Pass' or 'Full Pass' depending on the scope of the current task.
Use Cases
This skill is indispensable for:
- Feature Shipping: Use a 'Full Pass' before finalizing any page or user flow to guarantee all six UX categories are covered.
- Component Refinement: Use a 'Quick Pass' when building individual components like buttons, input fields, or cards to ensure basic interaction and data states are defined.
- Design Reviews: Prep your code for a review session by ensuring you have already addressed the baseline requirements, allowing designers and lead engineers to focus on higher-level product feedback rather than missing error states or accessibility issues.
Example Prompts
- "Perform a Full Pass on the new user registration flow to ensure all form validation and edge cases are covered."
- "Run a Quick Pass for this card component to check if hover, active, and empty states are correctly implemented."
- "Help me document the known gaps for the data table responsive views before our design review starts."
Tips & Limitations
For the best results, treat this skill as a secondary layer of validation. While it is highly effective at identifying missing states, it cannot 'see' the aesthetic intent of your design. Always verify the output visually. Remember that you should never skip a state silently; if a state is deferred, use the AI agent to explicitly document the gap so the project team is fully informed during sign-off.
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-ux-baseline-check": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Related Skills
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.
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.