skills.rest
zangxin75
zangxin75COMMUNITY
Explore all skills by this author →
GitHub

Frontend

Generate UX/UI guidelines for designing accessible, responsive web and mobile interfaces.

Updated Mar 1, 2026
Search Tags:#design#ui#web development#frontend#mobile development#ux#interface
One-click install
npx skills add https://github.com/zangxin75/openclaw-skills --skill frontend-zangxin75
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend
Source: https://github.com/zangxin75/openclaw-skills/tree/main/frontend
Command: npx skills add https://github.com/zangxin75/openclaw-skills --skill frontend-zangxin75

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides guidelines and best practices for building user interfaces that are intuitive, accessible, and performant across various platforms.

Core Features & Use Cases

  • UI/UX Best Practices: Covers loading states, empty states, error recovery, and immediate feedback.
  • Interaction Design: Details on touch targets, spacing, and discoverability of actions.
  • Visual Design: Principles for hierarchy, consistency, and motion.
  • Accessibility & Responsiveness: Ensures usability for all users and devices.
  • Performance: Optimizes for perceived speed and efficient loading.
  • Use Case: A developer can use this skill to ensure their new web application's user interface adheres to modern design standards, leading to a better user experience and higher engagement.

Quick Start

Follow the frontend skill's guidelines to implement skeleton screens for loading content with a known layout.

Frequently Asked Questions about Frontend

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

FAQPage Schema
What are the best practices for designing loading and empty states in web interfaces?▼

Best practices for loading and empty states in user interfaces include implementing skeleton screens for known layouts and providing clear guidance or calls to action during empty states to ensure immediate user feedback.

How do I ensure my mobile and web UI is accessible and responsive across all devices?▼

To ensure accessibility and responsiveness in UI design, follow established UX principles for touch targets, spacing, and visual hierarchy, guaranteeing your interface is usable and performs efficiently across all mobile and web platforms.

How do I handle error recovery and interaction design in frontend development?▼

Error recovery in frontend development involves providing clear feedback and recovery paths, while interaction design focuses on discoverability of actions, proper touch targets, and consistent spacing to create intuitive user experiences.

What's the best way to optimize perceived performance in user interface design?▼

Optimizing perceived performance in UI design involves implementing immediate feedback mechanisms, utilizing skeleton screens, and following performance perception guidelines to ensure efficient loading and a polished user experience.

Does this Skill provide guidelines for both web and mobile platform interface design?▼

Yes, this Skill provides comprehensive guidelines for building user interfaces across both web and mobile platforms, focusing on user experience, accessibility, interaction design, and performance perception for each environment.

Why does visual hierarchy matter when building polished user interfaces?▼

Visual hierarchy matters in user interface design because it establishes consistency and guides user attention through motion and structured layout, resulting in intuitive and polished interfaces that improve overall user engagement.

Related Skills

Explore More Design & Creative Skills→
thejordanleopoldthejordanleopold
4

design-system

Codify design tokens, color, typography, spacing, and motion into a DESIGN.md deliverable.

Community
Advanced
EdgeHuntEdgeHunt

ck:frontend-design

Translate design tokens and guidelines into functional frontend code.

Official
Intermediate
loveconnorloveconnor

craft

Evaluate visual hierarchy and interaction quality of interface designs.

Community
Advanced
SufficientDaikonSufficientDaikon
8

ux-test-suite

Run UX test suites covering task completion, accessibility, and performance.

Community
Advanced