design-ux

Name: design-ux
Availability: InStock
Author: e-xode

Apply visual hierarchy, spacing, color, accessibility, and responsive UX rules to Vue SSR interfaces.

3|Updated Jan 14, 2023

Search Tags:#accessibility #responsive design #wcag #ux #micro-interactions #ui hierarchy #spacing rhythm

Ready to run

npx skills add https://github.com/e-xode/vue-ssr --skill design-ux

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-ux
Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/design-ux
Command: npx skills add https://github.com/e-xode/vue-ssr --skill design-ux

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents inconsistent, inaccessible, and visually unclear interfaces by providing a decision framework for UX and design direction in the Vue SSR Starter Kit.

Core Features & Use Cases

Visual hierarchy system: Prioritizes by size > color > weight > position to make primary actions obvious.
Design-token alignment: Enforces the project’s 8px spacing rhythm and semantic color usage compatible with Vuetify 4.
Accessible interaction design: Sets WCAG 2.1 AA requirements for contrast, focus, ARIA, touch targets, and reduced-motion behavior.

Quick Start

Ask the design agent to produce a UX plan for your new pricing page section (hierarchy, spacing, color semantics, micro-interactions, accessibility, and responsive layout) before you implement any Vuetify components.

Frequently Asked Questions about design-ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I ensure my Vue SSR interface meets WCAG 2.1 AA accessibility requirements?▼

To meet WCAG 2.1 AA accessibility requirements for Vue SSR interfaces, apply a decision framework covering contrast, focus, ARIA, touch targets, and reduced-motion behavior. This ensures accessible interaction design and consistent component compliance.

What's the best way to plan UX and visual hierarchy before implementing Vuetify components?▼

The best way to plan UX before implementing Vuetify components is to generate a UX plan specifying visual hierarchy, spacing rhythm, color semantics, micro-interactions, and responsive layout rules. This prioritizes primary actions by size, color, weight, and position.

How do I maintain consistent 8px spacing rhythm and semantic color usage in UI design?▼

Maintain consistent 8px spacing rhythm and semantic color usage by enforcing design-token alignment within your project. This framework prevents visually unclear interfaces and ensures strict adherence to your established spacing and color constraints.

Does this UX design framework handle per-component reduced-motion and micro-interactions?▼

Yes, this UX design framework handles per-component reduced-motion and micro-interactions. It specifies animation and motion behavior while setting accessibility requirements, ensuring motion preferences are respected across all interactive interface elements.

Can I use this to conduct an accessibility audit and review UI quality for existing views?▼

Yes, you can use this to conduct accessibility audits and review UI quality for existing views. It evaluates visual hierarchy, color semantics, and responsive layouts against WCAG 2.1 AA expectations and 8px spacing constraints to identify inconsistencies.