skills.rest
chenxingqiang
chenxingqiangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-engineering

Build accessible, responsive user interfaces following design-system guidelines.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds production-quality user interfaces that are accessible, performant, and visually polished, aligning with real design systems rather than AI aesthetics.

Core Features & Use Cases

  • Enforce design-system adherence, accessible components, and responsive layouts.
  • Promote component-driven architecture with reusable patterns and clear separation of concerns.
  • Provide guidance for state management, testing, and performance-conscious UI decisions.

Quick Start

Create a new component under src/components following the recommended file structure and connect it to the design system.

Frequently Asked Questions about frontend-ui-engineering

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

FAQPage Schema
How do I ensure frontend UI components meet accessibility standards?▼

To ensure accessible UI, apply keyboard accessibility guidelines and use semantic HTML markup when building components. This approach guarantees that user interfaces are navigable and usable across real-world apps and devices.

What is the best way to build responsive layouts that align with a design system?▼

The best way to build responsive layouts is to enforce design-system guidelines for consistent spacing and typography. This ensures visually polished, production-quality UI that adapts seamlessly across different devices.

How do I structure new UI components for state management and reusability?▼

Structure new UI components under a standard directory like src/components using a component-driven architecture. This promotes reusable patterns and clear separation of concerns for effective state management and testing.

Does this approach work for managing state in complex frontend applications?▼

Yes, this approach works for managing state by providing guidance on component-driven architecture and performance-conscious UI decisions. It satisfies requirements for real-world apps requiring robust state handling and testing.

Why does my AI generated UI lack visual polish and design consistency?▼

AI generated UI often lacks visual polish because it misaligns with real design systems. Enforcing design-system adherence for consistent spacing, typography, and semantic markup resolves these aesthetic inconsistencies.

Related Skills

Explore More Software Engineering Skills→
vamseeachantavamseeachanta
14

base-template-generator

Generate foundational project templates and boilerplates with TypeScript typing and test scaffolding.

Community
Advanced
Jonathan0823Jonathan0823
7

frontend-design

Translate design direction into React, Vue, HTML/CSS, or Next.js frontend code.

Community
Basic
ll1llkll1llk

design-system

Manage token-based UI design and generate slides with design tokens.

Community
Advanced
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate