How do I handle accessibility requirements?

The skill includes 'Constraint-First Prompting' which prioritizes WCAG 2.1 AA compliance and ARIA roles during the initial generation phase.

Does this work with specific CSS frameworks?

While the examples are optimized for Tailwind CSS, these patterns are framework-agnostic and can be applied to CSS-in-JS, SASS, or any styling library.

What is the Visual Reference Chain pattern?

It is a prompting method that guides the LLM from abstract design moods to concrete CSS values, ensuring the final output matches the intended aesthetic and emotion.

How does this skill improve UI generation?

It provides structured prompt patterns like Component Contracts and State Machines that ensure the AI understands visual specs, accessibility, and behavior before generating code.

Can I use this for design systems?

Yes, it specifically includes patterns for 'Design Token Injection' to help the AI accurately map your brand's specific spacing, color, and typography tokens to code.

UI Prompt Engineering Patterns

Name: UI Prompt Engineering Patterns
Author: HermeticOrmus

byHermeticOrmus

•

Herramientas de Diseño

Generates consistent, production-grade user interfaces by applying specialized prompt patterns for design systems and component specifications.

Acerca de

This skill optimizes Claude Code for frontend development by introducing structured prompting frameworks that bridge the gap between design intent and code implementation. It provides templates for component contracts, design token injection, and state machine specifications, ensuring that generated UI elements are accessible, responsive, and aligned with modern design systems. By leveraging these patterns, developers can reduce iterative friction and achieve high-fidelity results across React, Tailwind CSS, and other frontend stacks.

Características Principales

Visual Reference Chaining to bridge abstract moods and concrete CSS
Component Contract framework for explicit input/output specifications
Constraint-First Prompting to ensure WCAG accessibility and performance
5 GitHub stars
State Machine Specification for robust interaction and transition logic
Design Token Injection for consistent brand alignment and styling

Casos de Uso

Generating complex, accessible React components from design system tokens
Building reusable prompt templates for team-wide frontend standards
Refining AI-generated UI layouts with structured feedback protocols

Acerca de

Características Principales

Visual Reference Chaining to bridge abstract moods and concrete CSS
Component Contract framework for explicit input/output specifications
Constraint-First Prompting to ensure WCAG accessibility and performance
5 GitHub stars
State Machine Specification for robust interaction and transition logic
Design Token Injection for consistent brand alignment and styling

Casos de Uso

Generating complex, accessible React components from design system tokens
Building reusable prompt templates for team-wide frontend standards
Refining AI-generated UI layouts with structured feedback protocols