skills.rest
hodinhtuankiet
hodinhtuankietCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-engineering

Enforce design-system adherence and accessibility in React/TypeScript frontend UI projects.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds production-quality user interfaces that are accessible, performant, and visually polished to meet real-world product requirements.

Core Features & Use Cases

  • Component architecture and patterns that promote composition, reusability, and maintainability.
  • State management and layout practices aligned with design-system tokens, accessibility, and responsive design.
  • Guidance for implementing maintainable UI code, applying design-system constraints, and ensuring accessibility.
  • Real-world use case: implementing a responsive dashboard with accessible navigation and consistent theming.

Quick Start

Start by selecting a UI component and implement it with design-system tokens, accessible markup, and responsive behavior.

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 accessible React components with a design system?▼

Build accessible React components by applying design-system tokens for consistent theming and enforcing accessibility markup standards throughout your component architecture. This ensures your interfaces meet real-world product requirements while remaining maintainable.

What's the best way to manage state in a responsive React dashboard?▼

Manage state in a responsive React dashboard by aligning your state management practices with design-system tokens and responsive behavior guidelines. This approach eliminates visual inconsistencies and ensures layouts adapt correctly across different screen sizes.

How do I enforce accessibility standards in TypeScript frontend projects?▼

Enforce accessibility standards in TypeScript frontend projects by applying explicit guidelines and best practices to your component markup and layout structures. This integration ensures your UI code remains maintainable while meeting required accessibility compliance.

Can I use this for implementing maintainable UI code with component patterns?▼

Yes, you can implement maintainable UI code using component patterns that promote composition and reusability across your React and TypeScript projects. These patterns enforce design-system constraints to deliver polished, production-grade user interfaces.

Why does my frontend UI have visual inconsistencies across different components?▼

Frontend UI inconsistencies occur when components lack adherence to a unified design system and standardized accessibility practices. Eliminate these issues by enforcing design-system tokens and applying explicit architectural guidelines throughout your interface development.

Does this approach work for building responsive layouts with design-system tokens?▼

Yes, this approach works for building responsive layouts by aligning your layout practices directly with design-system tokens. It enforces responsive behavior and visual consistency across your React and TypeScript components to ensure production-grade quality.

Related Skills

Explore More Software Engineering Skills→
Fr-e-dFr-e-d
157

architecture-extract

Analyze project directory structures to generate architectural summaries.

Community
Basic
racciolyraccioly

performance-profiling

Run Lighthouse audits and analyze Core Web Vitals to identify performance bottlenecks.

Community
Advanced
tanujsutariatanujsutaria
1

swiftui-architect

Plan SwiftUI view hierarchies and MVVM state management for VitalArc features.

Community
Basic
briosoemiliobriosoemilio

tailwindcss

Style web interfaces with utility-first Tailwind CSS classes.

Community
Advanced