skills.rest
arvindand
arvindandCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-design

Translate design concepts into semantic HTML with responsive, accessible styling.

16|2|Updated Jan 8, 2026
Search Tags:#design#ui#accessibility#frontend#components#responsive#ux
One-click install
npx skills add https://github.com/arvindand/agent-skills --skill ui-ux-design-arvindand
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/arvindand/agent-skills/tree/main/skills/ui-ux-design
Command: npx skills add https://github.com/arvindand/agent-skills --skill ui-ux-design-arvindand

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers often struggle to translate ideas into production-grade frontend code that is accessible, fast, and maintainable.

Core Features & Use Cases

  • Generate production-ready frontend components, pages, dashboards, and forms with semantic HTML.
  • Enforce accessibility, responsive design, and design-token driven styling.
  • Reuse consistent UX patterns across projects to accelerate delivery.

Quick Start

Design a responsive login form with accessible inputs and validation.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema
How do I generate production-ready frontend components with accessible HTML?▼

To generate production-ready frontend components, this Skill translates design concepts into semantic HTML, enforcing accessibility standards and responsive design while delivering ready-to-run code with interactive states.

What is the best way to build a responsive login form with accessible inputs?▼

The best way to build a responsive login form is using semantic HTML with CSS variables for design tokens, ensuring accessible inputs and validation while providing ready-to-run code with interactive states.

Can I use this to improve existing UI with UX focus without rebuilding from scratch?▼

Yes, you can improve existing UI with UX focus by translating updated design concepts into production-grade frontend interfaces, applying semantic HTML, accessibility, and CSS variable-driven styling to your current components.

Do I need specific frontend dependencies to create design-token driven styling?▼

No specific dependencies are required to create design-token driven styling; this Skill outputs CSS variables and semantic HTML directly, ensuring accessible, fast, and maintainable interfaces without external library constraints.

Does this approach enforce accessibility and responsive design for dashboards and pages?▼

This approach enforces accessibility and responsive design for dashboards and pages by translating design concepts into production-grade frontend interfaces with semantic HTML, CSS variables, and ready-to-run code with interactive states.

Why does frontend code often lack maintainable UX patterns and how can I fix it?▼

Frontend code often lacks maintainable UX patterns because designers struggle to translate ideas into production-grade code; this Skill fixes it by delivering semantic HTML, accessibility, responsive design, and consistent reusable patterns.

Related Skills

Explore More Design & Creative Skills→
nikglavinnikglavin
1

lyra-grid-system

Create responsive 12-column CSS grid layouts with 8pt spacing.

Community
Intermediate
archibatearchibate
6

frontend-design

Convert design briefs into runnable HTML/CSS/JS frontend interfaces.

Community
Advanced
Muskan492Muskan492

frontend-builder

Develop web pages and reusable UI components with HTML, CSS, and JavaScript.

Community
Intermediate
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic