frontend-ui-engineering

Name: frontend-ui-engineering
Availability: InStock
Author: cookeyholder

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

Updated Apr 9, 2026

Search Tags:#ui #architecture #accessibility #frontend #react #components #design-system

Ready to run

npx skills add https://github.com/cookeyholder/django-devcontainer-template --skill frontend-ui-engineering-cookeyholder

💬 Prompt for ChatGPT / Claude Chat▼

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.