skills.rest
suhanr
suhanrCOMMUNITY
Explore all skills by this author →
Website𝕏@suhanraahmanGitHub

ui-ux-design-engineer

Design and implement accessible, responsive interfaces with design systems and component workflows.

2|Updated Aug 21, 2026
Search Tags:#accessibility#frontend#responsive design#design system#components#ux design#ui design
One-click install
npx skills add https://github.com/suhanr/next-gen-claude-skills --skill ui-ux-design-engineer-suhanr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design-engineer
Source: https://github.com/suhanr/next-gen-claude-skills/tree/main/skills/09-ui-ux-design-engineer
Command: npx skills add https://github.com/suhanr/next-gen-claude-skills --skill ui-ux-design-engineer-suhanr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? It bridges the gap between UX design and frontend engineering, ensuring interfaces are not only visually polished but also accessible, responsive, and production-implementable rather than stopping at static mockups. ## Core Features & Use Cases - Design Systems & Components: Define design tokens for color, typography, spacing, and motion, then build reusable components with all states covered. - Accessibility & Responsive Validation: Verify keyboard navigation, screen-reader behavior, contrast, and layouts from small to large screens. - Use Case: When building a new dashboard, use this Skill to map user flows, define a token-based design system, implement responsive components with loading and error states, and run a visual QA pass before shipping. ## Quick Start Ask the AI to design and implement a responsive, accessible settings page with a reusable component structure and design tokens.

Frequently Asked Questions about ui-ux-design-engineer

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

FAQPage Schema
How do I create a design system with reusable components?▼

Start by defining design tokens for color, typography, spacing, radius, elevation, and motion, then build reusable components on top of those tokens. Cover every component state including loading, empty, error, success, and permission variants.

How to make a web interface accessible for screen readers?▼

Use semantic HTML, validate keyboard navigation across all interactive elements, and check color contrast ratios. Test screen-reader behavior explicitly as part of the quality gate before declaring the interface complete.

What is the workflow for design-to-code implementation?▼

Map critical user flows first, define tokens, build components with all states, implement responsive behavior from small to large screens, then perform visual QA against the intended design. This keeps design intent aligned with the shipped frontend.

Does responsive design require testing on real devices?▼

Responsive behavior should be implemented and verified across breakpoints from small to large screens. Where device testing tools are unavailable, state the limitation clearly rather than claiming verification that was not performed.

When should I not add motion or micro-interactions to a UI?▼

Avoid motion that adds complexity without a user requirement or harms performance and accessibility. Motion should support hierarchy and feedback, and every addition should be justified by the user experience rather than visual fashion.

Related Skills

Explore More Design & Creative Skills→
lucabattistinilucabattistini

design-flows

Map user journeys with happy paths, error states, and branching logic.

Community
Intermediate
AIDotNetAIDotNet
84

ci-cd-generator

Generate CI/CD pipeline configurations for GitHub Actions, GitLab CI, Azure DevOps, and Jenkins.

Official
Intermediate
idiaz01idiaz01
3

browser-qa

Automate browser-based UI testing with smoke, interaction, visual, and accessibility checks.

Community
Advanced
raphaelmansraphaelmans

product-designer

Translate product goals into UI/UX concepts, wireframes, and design systems.

Community
Intermediate