skills.rest
jordanhubbard
jordanhubbardCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-designer-engineer

Translate design specifications into accessible, responsive web components.

105|16|Updated Jan 18, 2026
Search Tags:#accessibility#a11y#frontend#responsive-design#design-to-code#ui-components#web-performance
One-click install
npx skills add https://github.com/jordanhubbard/loom --skill web-designer-engineer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-designer-engineer
Source: https://github.com/jordanhubbard/loom/tree/main/personas/default/web-designer-engineer
Command: npx skills add https://github.com/jordanhubbard/loom --skill web-designer-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and engineers often struggle to translate designs into accessible, high-performance web interfaces that work across devices and assistive technologies.

Core Features & Use Cases

  • Accessible UI implementation: turn design specifications into semantic, keyboard-navigable components.
  • Performance-first development: optimize load times, minimize layout shifts, and ensure responsive rendering.
  • Component-driven workflow: build reusable UI blocks that can be composed into complete interfaces.

Quick Start

Start by outlining a design spec and convert it into a production-ready front-end component that meets accessibility and performance targets.

Frequently Asked Questions about web-designer-engineer

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

FAQPage Schema
How do I turn design specifications into accessible UI components?▼

To turn design specifications into accessible UI components, you translate visual layouts into semantic, keyboard-navigable elements. This process ensures front-end interfaces meet accessibility guidelines while remaining responsive across devices and assistive technologies.

What is the best way to optimize web performance during a design-to-code handoff?▼

Optimizing web performance during a design-to-code handoff involves building component-driven UI blocks that minimize layout shifts and ensure responsive rendering. This approach targets fast load times and high interface performance.

How does component-driven workflow improve responsive web development?▼

A component-driven workflow improves responsive web development by building reusable UI blocks that can be composed into complete interfaces. This architecture ensures consistent rendering and maintainable code across different screen sizes.

Do I need to follow specific accessibility guidelines to build keyboard-navigable components?▼

Yes, building keyboard-navigable components requires following specific accessibility guidelines to ensure semantic structure. This guarantees that front-end interfaces work properly across assistive technologies and support full keyboard navigation.

Can I use this approach for frontend development workflows across different responsive platforms?▼

Yes, this approach applies directly to front-end development workflows and component-driven UI builds across responsive platforms. It specifies requirements for performance metrics, accessibility, and responsive implementation practices.

Related Skills

Explore More Design & Creative Skills→
dtsongdtsong
1

Interaction Design

Design UI component interaction specifications with visual states, transitions, and WCAG accessibility.

Community
Advanced
KentoShimizuKentoShimizu
7

accessibility-design

Define accessibility behavior for UI flows and components.

Community
Intermediate
khaliqgantkhaliqgant
790

frontend-design

Generate accessible, responsive frontend interfaces with cohesive design systems.

Community
Advanced
ajelinekajelinek

ui-engineering

Codify and enforce shared UI engineering standards for TypeScript projects.

Community
Advanced