skills.rest
nicorevo
nicorevoCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-engineering

Builds accessible, responsive, production-quality user interfaces following design system standards.

Updated May 21, 2026
Search Tags:#accessibility#frontend#react#responsive design#design system#wcag#ui components
One-click install
npx skills add https://github.com/nicorevo/AI-SDLC-Template --skill frontend-ui-engineering-nicorevo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/nicorevo/AI-SDLC-Template/tree/main/.opencode/skills/frontend-ui-engineering
Command: npx skills add https://github.com/nicorevo/AI-SDLC-Template --skill frontend-ui-engineering-nicorevo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic, ignore accessibility requirements, and break on different screen sizes. This Skill enforces disciplined frontend engineering practices so components are accessible, responsive, and consistent with the project's design system instead of exhibiting the recognizable "AI aesthetic." ## Core Features & Use Cases - Component Architecture Guidance: Enforces composition over configuration, colocated file structure, and separation of data fetching from presentation in React/TypeScript components. - WCAG 2.1 AA Accessibility: Provides concrete patterns for keyboard navigation, ARIA labels, focus management, and meaningful empty/error states. - Responsive & State Management Patterns: Covers mobile-first layouts, breakpoint testing, skeleton loading, optimistic updates, and a decision ladder for choosing state management approaches. - Use Case: When asked to build a task list page, the agent produces a composable component tree with skeleton loading, empty states, keyboard-accessible controls, semantic color tokens, and layouts verified at 320px through 1440px breakpoints. ## Quick Start Ask the agent to build a new UI component or page, such as "create an accessible, responsive settings page following our 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 build accessible React components that meet WCAG standards?▼

Use native interactive elements like button instead of div, add aria-label to icon-only controls, manage focus when dialogs open, and ensure 4.5:1 contrast for normal text. Verify by tabbing through the page and running axe-core checks.

What state management approach should I use in a React app?▼

Choose the simplest option that fits: useState for local UI state, lifted state for a few siblings, Context for read-heavy values like theme, URL params for shareable filters, React Query or SWR for server data, and Zustand or Redux for complex app-wide state.

How do I avoid the generic AI-generated look in UI design?▼

Use the project's actual color palette and spacing scale instead of purple gradients, excessive rounding, and uniform card grids. Prefer content-first layouts, realistic placeholder copy, and subtle shadows consistent with the design system.

Does this approach work with Tailwind CSS and mobile-first layouts?▼

Yes, the guidance uses Tailwind-style mobile-first responsive classes, starting with single-column mobile layouts and expanding with sm and lg breakpoints. Layouts should be tested at 320px, 768px, 1024px, and 1440px widths.

Why should I use skeleton loading instead of spinners?▼

Skeleton placeholders preserve layout structure and reduce perceived loading time, while spinners cause layout shifts and give no hint of incoming content. Combine skeletons with optimistic updates for mutations to make the interface feel responsive.

Related Skills

Explore More Software Engineering Skills→
booklib-aibooklib-ai
35

refactoring-ui

Apply Refactoring UI principles to improve visual hierarchy in UI designs.

Official
Intermediate
yourlabptyourlabpt

code-review-and-quality

Reviews code changes across correctness, readability, architecture, security, and performance before merge.

Community
Intermediate
serkan-ozalserkan-ozal
7

api-testing

Mock API responses and intercept HTTP requests in browser automation.

Community
Intermediate
PatternsDevPatternsDev
235

react-server-components

Server-render React components to reduce client-side JavaScript in Next.js App Router.

Official
Intermediate