skills.rest
caraya
carayaCOMMUNITY
Explore all skills by this author →
Website𝕏@elrond25GitHub

ui-engineering

Automate production-grade UI creation with WCAG-compliant accessibility and design-system adherence.

1|Updated Mar 22, 2026
Search Tags:#ui#accessibility#frontend#component#responsive#design-system
One-click install
npx skills add https://github.com/caraya/agent-skills --skill ui-engineering-caraya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-engineering
Source: https://github.com/caraya/agent-skills/tree/main/skills/ui-engineering
Command: npx skills add https://github.com/caraya/agent-skills --skill ui-engineering-caraya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend development often suffers from gaps between design and implementation, leading to inconsistent UI, accessibility issues, and brittle layouts. This skill provides a structured approach to building production-grade interfaces that align with design systems and WCAG guidelines.

Core Features & Use Cases

  • Provides architecture guidance for components, layout, and state management across frameworks or vanilla JS.
  • Emphasizes accessibility, responsive design, and design-system adherence to ensure production-quality UI.
  • Use Case: When rebuilding a complex dashboard, apply this skill to craft accessible, maintainable components with consistent styling and responsive behavior.

Quick Start

Build a production-grade UI component that is accessible and responsive, using the design system tokens and a11y guidelines.

Frequently Asked Questions about ui-engineering

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

FAQPage Schema
How do I build accessible UI components that conform to WCAG guidelines?▼

To build accessible UI components, you need a structured approach enforcing WCAG-compliant architecture and design-system token usage. This ensures consistent component architecture and responsive behavior across frameworks or vanilla JS.

What's the best way to maintain design-system adherence when building frontend layouts?▼

Maintaining design-system adherence requires applying consistent component architecture across your frontend projects. Using structured design tokens and a11y guidelines ensures production-quality interfaces and bridges the gap between design and implementation.

Can I use this approach to create responsive layouts with vanilla JS or popular frameworks?▼

Yes, you can apply this approach to create responsive layouts with vanilla JS and popular frameworks. It provides architecture guidance for components, layout, and state management across multiple frontend environments.

Why does my frontend UI suffer from inconsistent styling and brittle layouts?▼

Your frontend UI suffers from inconsistent styling and brittle layouts due to gaps between design and implementation. Applying a structured approach with design-system adherence and responsive behavior guidelines resolves these production-quality issues.

How do I structure a complex dashboard with maintainable and accessible components?▼

To structure a complex dashboard with maintainable components, apply structured architecture guidance emphasizing accessibility, responsive design, and design-system conformance. This ensures consistent styling and WCAG-compliant behavior across your interface.

Related Skills

Explore More Software Engineering Skills→
yonatangrossyonatangross
3

design-system-starter

Generate design tokens, atomic components, and documentation templates for UI systems.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
noartemnoartem

web-artifacts-builder

Bundle frontend artifacts into a single HTML file for Claude.

Community
Advanced
sigridjinethsigridjineth
20

frontend-ui-ux

Create reusable UI components with responsive layouts and accessibility compliance.

Community
Intermediate