skills.rest
AskTinNguyen
AskTinNguyenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-engineering

Build accessible, responsive UI components adhering to design systems with tests and Storybook.

1|Updated Jan 26, 2026
Search Tags:#ui#accessibility#frontend#components#responsive#design-systems
One-click install
npx skills add https://github.com/AskTinNguyen/vesper-team-skills --skill frontend-ui-engineering-asktinnguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/AskTinNguyen/vesper-team-skills/tree/main/frontend-ui-engineering
Command: npx skills add https://github.com/AskTinNguyen/vesper-team-skills --skill frontend-ui-engineering-asktinnguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Engineers often struggle to produce production-quality user interfaces that are both accessible and aligned with a design system, leading to inconsistent visuals and usability issues.

Core Features & Use Cases

  • Component architecture guidance that encourages colocated src/components structure and modular patterns.
  • Accessibility and responsive design best practices to ensure UI works across devices and assistive technologies.
  • Use Case: when building or updating production UI with strict design-system constraints and performance considerations.

Quick Start

Scaffold a responsive, accessible TaskList component that adheres to the design system, includes tests, and showcases in Storybook.

Frequently Asked Questions about frontend-ui-engineering

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

FAQPage Schema
How do I build production-ready UI components that strictly follow a design system?▼

Production-ready UI components require colocated src/components architecture, modular patterns, and strict design-system conformance to ensure visual consistency. This approach enforces responsive patterns and accessibility standards across web applications to prevent usability issues.

What is the best way to ensure frontend accessibility across responsive layouts?▼

Frontend accessibility across responsive layouts requires applying best practices for assistive technologies and device compatibility. Implementing responsive patterns within component architecture ensures interactive state management works consistently across all viewport sizes.

How do I scaffold a responsive TaskList component with tests and Storybook integration?▼

Scaffold a responsive TaskList component by colocating the source code, ensuring design-system adherence, adding thorough tests, and showcasing the component states in Storybook. This modular pattern maintains accessibility and production quality.

Does building production-quality UI require design-system conformance for every component?▼

Building production-quality UI requires design-system conformance for every component to prevent inconsistent visuals. Engineers must apply accessibility standards, responsive patterns, and thorough testing to ensure usability across interactive state management.

Why does my frontend UI look inconsistent despite following component architecture?▼

Frontend UI inconsistency often stems from missing design-system constraints and accessibility standards within the component architecture. Enforcing responsive patterns and modular colocated src/components structure resolves visual and usability discrepancies.

Related Skills

Explore More Software Engineering Skills→
jwmyersjwmyers

visual-style-guide

Define color palettes, SVG styling, and token designs for Zero-Day Attack interfaces.

Community
Intermediate
SensLiaoSensLiao

qa-component-behavior

Automate UI component testing for React, Vue, Svelte, and Angular with Testing Library and Storybook.

Community
Intermediate
knckknckknckknck

wcag-audit-patterns

Audit WCAG 2.2 conformance with axe-core, pa11y, and lighthouse.

Community
Advanced
r9412460971-cloudr9412460971-cloud
31

static-page-builder

Generate responsive static websites with HTML/Tailwind or Vite+Tailwind templates.

Community
Intermediate