skills.rest
arshia2114
arshia2114COMMUNITY
Explore all skills by this author →
GitHub

ui-ux-design

Generate frontend interfaces with accessible UX and visual design.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps generate high-quality, production-ready frontend interfaces that prioritize strong user experience (UX) and visual design, moving beyond generic AI outputs.

Core Features & Use Cases

  • Interface Generation: Creates working code for web components, pages, dashboards, forms, and landing pages.
  • UX & Visual Craft: Implements best practices for accessibility, responsiveness, and aesthetic appeal.
  • Use Case: When a user asks to "build a sign-up form" or "design a user dashboard," this Skill provides the code, ensuring it's accessible, interactive, and visually coherent.

Quick Start

Use the ui-ux-design skill to create a responsive pricing card component.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema
How do I build a web component with proper UX and accessibility?▼

To build accessible web components, generate frontend code that adheres to contrast, focus states, and touch targets. This ensures your interface is both interactive and visually coherent for production use.

What is the best way to create a responsive landing page with strong visual craft?▼

The best way to create a responsive landing page is to generate production-grade frontend code that incorporates UX best practices. This approach ensures your page handles empty states, error states, and labels correctly for users.

Can I generate a user dashboard that includes empty states and error states?▼

Yes, you can generate a user dashboard that includes empty states and error states. The interface generation process explicitly adheres to these UX patterns alongside labels and reduced motion support.

Does UI generation handle focus states and reduced motion for accessibility?▼

UI generation does handle focus states and reduced motion for accessibility. By adhering to these specific UX patterns, the generated frontend interfaces ensure a production-ready experience for all users.

How do I design a sign-up form that is accessible and visually coherent?▼

To design an accessible sign-up form, generate working frontend code that prioritizes UX and visual craft. This ensures the form includes proper labels, contrast, and interactive elements ready for production.

Related Skills

Explore More Design & Creative Skills→
rafael-hcrafael-hc

frontend-blueprint

Guide UI discovery and generate atomic HTML/CSS components.

Community
Advanced
bianhaifeng789-huebianhaifeng789-hue

frontend-design

Produce production-grade frontend interfaces with cohesive typography, theming, and accessibility.

Community
Advanced
vuralserhat86vuralserhat86
43

web_artifacts_builder

Generate React web interfaces with Tailwind CSS and shadcn/ui components.

Community
Intermediate
BENYEKHLEF-AnouarBENYEKHLEF-Anouar

designer-ui

Generate atomic-design UI assets and HTML mockups from wireframes.

Community
Advanced