skills.rest
CodeCrafterAdi2006
CodeCrafterAdi2006COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-engineering

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

Updated Jul 10, 2026
Search Tags:#accessibility#state management#react#responsive design#design system#wcag#component architecture
One-click install
npx skills add https://github.com/CodeCrafterAdi2006/Ink-and-Code --skill frontend-ui-engineering-codecrafteradi2006
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/CodeCrafterAdi2006/Ink-and-Code/tree/main/Skills/frontend-ui-engineering
Command: npx skills add https://github.com/CodeCrafterAdi2006/Ink-and-Code --skill frontend-ui-engineering-codecrafteradi2006

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI-generated interfaces often look generic, ignore accessibility requirements, and lack proper loading, error, and empty states. This Skill enforces disciplined component architecture, design system adherence, and WCAG 2.1 AA accessibility so UI output looks professionally engineered rather than machine-generated. ## Core Features & Use Cases - Component Architecture Patterns: Enforces composition over configuration, container/presentation separation, and colocated file structures for React components. - Accessibility Enforcement: Provides concrete patterns for keyboard navigation, ARIA labels, focus management, and meaningful empty/error states meeting WCAG 2.1 AA. - Design System Discipline: Rejects the generic "AI aesthetic" (purple gradients, excessive rounding, stock card grids) in favor of consistent spacing scales, semantic color tokens, and type hierarchy. - Use Case: When asked to build a task management dashboard, the Skill produces a responsive grid with skeleton loading states, optimistic updates via React Query, keyboard-accessible controls, and styling drawn from the project's actual design tokens. ## Quick Start Ask the AI to build a responsive, accessible task list component with loading, error, and empty states using the project's 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?▼

Use semantic HTML elements like button instead of div, add aria-label to icon-only controls, associate labels with form inputs via htmlFor, and manage focus when dialogs open. Verify by tabbing through the page and testing with a screen reader.

How to choose between useState, Context, and Zustand for state management?▼

Use useState for component-local UI state, Context for read-heavy shared values like theme or auth, URL search params for shareable filters, and Zustand or Redux only for complex client state shared app-wide. Pick the simplest option that works.

What is the container/presentational component pattern?▼

Container components handle data fetching and render loading, error, and empty states, while presentational components only render received props. This separation keeps rendering logic testable and data logic reusable.

Why does AI-generated UI look generic and how to avoid it?▼

AI defaults to purple gradients, excessive border radius, stock card grids, and uniform padding. Avoid this by using the project's actual color tokens, a consistent spacing scale, content-first layouts, and realistic placeholder content.

What breakpoints should I test for responsive design?▼

Test at 320px, 768px, 1024px, and 1440px widths. Build mobile-first with single-column layouts, then expand to multi-column grids at larger breakpoints using responsive utility classes.

Related Skills

Explore More Software Engineering Skills→
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced
jorgeasaurusjorgeasaurus
12

playwright-testing

Automate end-to-end web application testing with Playwright across browsers.

Community
Advanced
Hack23Hack23
9

playwright-testing

Automate end-to-end browser testing for static websites with Playwright.

Official
Advanced
rierino-openrierino-open
1

component-builder

Generates React editor components for the Rierino low-code page builder.

Official
Intermediate