skills.rest
Borisserz
BorisserzCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-engineering

Create production-quality web UI components with design-system conformance and accessibility.

1|1|Updated Apr 11, 2026
Search Tags:#typescript#ui#accessibility#frontend#react#components#design-system
One-click install
npx skills add https://github.com/Borisserz/FoodTracker --skill frontend-ui-engineering-borisserz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/Borisserz/FoodTracker/tree/main/.agents/skills/skills/frontend-ui-engineering
Command: npx skills add https://github.com/Borisserz/FoodTracker --skill frontend-ui-engineering-borisserz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds production-quality UIs that are accessible, performant, and visually polished, ensuring they meet design-system standards rather than AI aesthetics.

Core Features & Use Cases

  • Co-locate components with clear structure and guidelines.
  • Enforce design-system adherence, responsive layouts, and accessible interactions.
  • Use cases include creating new dashboards, refining existing interfaces, and theming components to match brand identity.

Quick Start

Create a production-ready Button component following the project design system with accessible labels and keyboard support.

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 components that conform to an existing design system?▼

Building production-quality UIs with React involves co-locating components with clear structure and enforcing strict design-system adherence, responsive layouts, and accessible interactions to ensure interfaces meet production standards.

What is component-driven architecture for frontend web apps?▼

Component-driven architecture structures frontend web apps by co-locating components with clear guidelines, enforcing design-system conformance and accessible interaction patterns to deliver visually polished, production-ready interfaces.

Can I use TypeScript to manage state in responsive layouts?▼

TypeScript manages state in responsive layouts by applying component-driven architecture and design-system adherence, ensuring accessible interactions and production-quality UIs for web applications.

How do I enforce accessibility in a React UI dashboard?▼

Enforce accessibility in a React UI dashboard by implementing accessible interaction patterns and keyboard support alongside strict design-system conformance, ensuring components meet production-quality standards for all users.

What is the best way to theme components to match brand identity?▼

Theme components to match brand identity by enforcing strict design-system adherence during component creation, ensuring responsive layouts and accessible interactions align with your brand's visual standards.

Why do my generated UI components not match design-system standards?▼

Generated UI components miss design-system standards due to default AI aesthetics; enforcing strict design-system adherence, component-driven architecture, and accessible interaction patterns resolves these visual and structural mismatches.

Related Skills

Explore More Software Engineering Skills→
nickstradnickstrad

tailwind-design-system

Build scalable design systems with Tailwind CSS and design tokens.

Community
Intermediate
manutejmanutej
1

playwright-visual-testing

Automate browser testing and visual regression analysis with Playwright.

Community
Advanced
coelhotvcoelhotv
2

ui-design-brain

Generate user interfaces with design patterns and micro-interactions across React, Vue, and HTML/CSS.

Community
Advanced
flitzrrrflitzrrr
4

ui-design

Define responsive web layouts with 12-column grids and 8px spacing.

Community
Intermediate