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.

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

01Visual Reference Chaining to bridge abstract moods and concrete CSS

02Component Contract framework for explicit input/output specifications

03Constraint-First Prompting to ensure WCAG accessibility and performance

045 GitHub stars

05State Machine Specification for robust interaction and transition logic

06Design Token Injection for consistent brand alignment and styling

Casos de Uso

01Generating complex, accessible React components from design system tokens

02Building reusable prompt templates for team-wide frontend standards

03Refining AI-generated UI layouts with structured feedback protocols

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hermeticormus/libreuiux-claude-code prompt-engineering-ui

For use in Claude.ai and ChatGPT

Download Skill