skills.rest
zhizhunbao
zhizhunbaoCOMMUNITY
Explore all skills by this author →
GitHub

dev-ui_ux_designer

Creates design systems, component patterns, and interaction guidelines for modern web interfaces.

1|2|Updated Mar 5, 2026
Search Tags:#accessibility#responsive design#design system#css#ui design#ux#wireframe
One-click install
npx skills add https://github.com/zhizhunbao/textbook-rag --skill dev-ui-ux-designer-zhizhunbao
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dev-ui_ux_designer
Source: https://github.com/zhizhunbao/textbook-rag/tree/main/.agent/skills/dev-ui_ux_designer
Command: npx skills add https://github.com/zhizhunbao/textbook-rag --skill dev-ui-ux-designer-zhizhunbao

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Designing consistent, accessible, and polished user interfaces from scratch is time-consuming and error-prone, especially when teams lack a shared design system, token structure, or clear interaction standards. ## Core Features & Use Cases - Design System Creation: Establishes HSL-based color tokens, typography scales, spacing systems, shadows, and radius values as CSS custom properties. - Component & Interaction Patterns: Provides ready-made patterns for cards, buttons, modals, toasts, navigation, and micro-interactions with defined animation timings and states. - Accessibility & Responsive Guidance: Enforces WCAG contrast ratios, keyboard navigation, ARIA usage, mobile-first breakpoints, and touch target sizing. - Use Case: When building a new landing page, use this Skill to define the color palette and tokens first, then design the hero section, feature grid, and CTA buttons with consistent hover states and responsive breakpoints before writing any code. ## Quick Start Use the UI/UX design skill to create a design system and wireframe for a new dashboard page with a primary color palette and responsive layout.

Frequently Asked Questions about dev-ui_ux_designer

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

FAQPage Schema
How do I create a design system with CSS custom properties?▼

Define HSL-based tokens for colors, spacing, typography, radius, and shadows in a :root block, then reference them with hsl(var(--token)) throughout your CSS. This makes theme switching and programmatic color adjustments straightforward.

What color contrast ratio is required for accessibility?▼

WCAG Level AA requires a contrast ratio of at least 4.5:1 for body text and 3:1 for large text. Information should never rely on color alone; combine color with icons and text labels for status indication.

How do I make a website responsive with mobile-first CSS?▼

Start with single-column stacked layouts as the default, then add min-width media queries at 640px, 768px, 1024px, and 1280px to introduce multi-column grids and expanded sidebars. Use clamp() for fluid typography scaling.

What animation duration should UI micro-interactions use?▼

Hover and active feedback should run at 100-150ms with ease-out, simple transitions at 200-250ms, and expand/collapse animations at 300-400ms. Avoid transitions over 600ms and respect prefers-reduced-motion settings.

When should I use ARIA attributes instead of native HTML?▼

Always prefer native HTML elements like button, nav, and dialog over ARIA roles. Use ARIA only for custom components, dynamic live regions, labels on icon-only buttons, and state attributes like aria-expanded or aria-invalid.

Related Skills

Explore More Design & Creative Skills→
cenjiecenjie

i-shape

Plan UX and UI through a structured discovery interview and design brief synthesis.

Community
Intermediate
luansilvadbluansilvadb

frontend-design

Design and implement production-grade frontend interfaces with bold aesthetics.

Community
Advanced
YehudaFrankelYehudaFrankel
16

ux-heuristics

Evaluate web and mobile interfaces against Nielsen's 10 heuristics and Krug's principles.

Community
Intermediate
seanyofthedeadseanyofthedead

using-streamlit-custom-components

Integrate community-built custom components into Streamlit applications.

Community
Intermediate