ux-baseline-check
UX Baseline Check
Core Pack — Always Active
This is a core skill. Apply it on ALL visual and frontend work alongside design-review.
Every screen ships with ALL states covered. No exceptions. This is the minimum bar.
The State Inventory
Before any page or component is "done", verify each applicable state exists:
1. Data States
- Empty — no data yet. Helpful message + clear CTA, not a blank screen
- Loading — skeleton, spinner, or shimmer. Never a white flash
- Loaded — the happy path, obviously
- Error — API failure, network issue. User-friendly message + retry action
- Partial — some data loaded, some failed. Don't hide what works
- Long content — what happens with 200 items? 2000-character names? Test it
More from aa-on-ai/agentic-design-system
ui-polish-pass
>
10design-review
>
10web-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.
9agentic-design-system
>
9agent-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.
9visual-reference-calibration
Use before implementing UI/design from a visual reference, screenshot, CodePen, Dribbble shot, website, or “make it feel like this” request. Prevents cargo-culting mechanics, fake UI chrome, and code-first misses by forcing reference breakdown, user-question calibration, visual target approval, and side-by-side review before implementation.
3