skills.rest
koolerkx
koolerkxCOMMUNITY
Explore all skills by this author →
𝕏@koolerkxGitHub

frontend-ui-engineering

Create and refine React UI components aligned with design systems.

Updated May 26, 2026
Search Tags:#ui#accessibility#frontend#react#design-system#component-patterns
One-click install
npx skills add https://github.com/koolerkx/vibe-react-2d-map-editor-yaml --skill frontend-ui-engineering-koolerkx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/koolerkx/vibe-react-2d-map-editor-yaml/tree/main/.claude/skills/frontend-ui-engineering
Command: npx skills add https://github.com/koolerkx/vibe-react-2d-map-editor-yaml --skill frontend-ui-engineering-koolerkx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build production-quality user interfaces that are accessible, performant, and visually polished, ensuring they meet design-system requirements and provide consistent experiences.

Core Features & Use Cases

  • Colocate components with related files to improve maintainability and collaboration.
  • Enforce accessibility, responsive layouts, and predictable interaction patterns.
  • Align with a design system to deliver consistent visuals across projects and teams.

Quick Start

Create a new UI component following the patterns shown in src/components and integrate it into a page to validate design-system compliance.

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 React UI components that conform to a design system?▼

Build React UI components with design-system conformance by colocating related files and enforcing accessibility, responsive layouts, and predictable interaction patterns. This approach delivers consistent visuals across projects and teams.

What is the best way to ensure accessibility in frontend UI engineering?▼

The best way to ensure accessibility in frontend UI engineering is to automate the creation and refinement of components while enforcing design-system conformance and accessibility standards during the build and review process.

How do I refine existing user-facing React components for visual polish?▼

Refine existing React components for visual polish by reviewing them against design-system requirements and applying predictable interaction patterns, ensuring they are accessible, performant, and visually consistent.

Does this approach to frontend UI engineering work for reviewing layouts?▼

Yes, this approach works for reviewing layouts, as it applies design-system conformance and accessibility checks to user-facing components, layouts, and interactions across React projects to validate compliance.

When do I need to colocate components with related files in a React project?▼

You need to colocate components with related files in a React project to improve maintainability and collaboration when building or refining production-grade UI components that require design-system fidelity.

Related Skills

Explore More Software Engineering Skills→
kvnapontekvnaponte

design-system

Generate presentation slides from design tokens and component specifications.

Community
Advanced
AskTinNguyenAskTinNguyen

frontend-ui-engineering

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

Community
Advanced
oakossoakoss
1

storybook

Create Storybook stories and interaction tests for React components.

Official
Intermediate
AutomatticAutomattic
31

liberate-local

Convert static HTML, CSS, and JS directories into WordPress block themes.

Official
Advanced