skills.rest
cookeyholder
cookeyholderCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-engineering

Design and implement accessible UI components with design-system rules.

Updated Apr 9, 2026
Search Tags:#ui#architecture#accessibility#frontend#react#components#design-system
One-click install
npx skills add https://github.com/cookeyholder/django-devcontainer-template --skill frontend-ui-engineering-cookeyholder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/cookeyholder/django-devcontainer-template/tree/main/.agent/skills/frontend-ui-engineering
Command: npx skills add https://github.com/cookeyholder/django-devcontainer-template --skill frontend-ui-engineering-cookeyholder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build production-quality user interfaces that adhere to design systems, are accessible, and visually polished, avoiding generic AI aesthetics.

Core Features & Use Cases

  • Component Architecture: colocate related code under src/components with container/presentational patterns and explicit state separation.
  • Design System Adherence: follow a consistent spacing, typography, and color system, with accessible markup and keyboard navigation.
  • Practical Use Cases: creating and iterating on components, implementing responsive layouts, and enhancing interactivity with predictable state management.

Quick Start

Create a new UI component under src/components following the container/presenter pattern and wire it into your app with a simple story or demo.

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 follow a strict design system?▼

To build React components that follow a design system, colocate related code under src/components using container/presentational patterns and enforce consistent spacing, typography, and color rules for visual polish.

What is the best way to structure frontend component architecture for state management?▼

The best way to structure frontend component architecture is by colocating related code and separating container and presentational components to ensure explicit state separation and predictable state management.

How do I ensure accessibility standards when implementing responsive layouts?▼

To ensure accessibility standards when implementing responsive layouts, apply accessible markup practices and enable keyboard navigation alongside your design system's consistent typography and spacing rules.

Can I refactor existing user interfaces to avoid generic AI aesthetics?▼

Yes, you can refactor existing user interfaces to avoid generic AI aesthetics by applying production-grade design-system rules, enforcing visual polish, and updating component architecture for consistent styling.

Does this approach work for creating stateful interactive components across platforms?▼

Yes, this approach works for creating stateful interactive components across platforms by applying predictable state management patterns and responsive layout techniques within a strict design system.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
MuccariniMuccarini

frontend-design

Automate frontend interface design and implementation with reusable components and design systems.

Community
Advanced
gkswls5006-webgkswls5006-web

moai-ref-react-patterns

Guide React/Next.js component design patterns and state management strategies.

Community
Advanced
bomberoxenviosdosruedasbomberoxenviosdosruedas

agency-ui-designer

Create design systems with component libraries and WCAG AA accessibility compliance.

Community
Advanced