ui-engineering
Expert system for creating high-quality, brand-aligned user interfaces. Use this skill when asked to design websites, create components, or implement specific visual styles. It contains specifications for major tech companies, design trends, and specific site types like blogs or presentations.
Best use case
ui-engineering is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Expert system for creating high-quality, brand-aligned user interfaces. Use this skill when asked to design websites, create components, or implement specific visual styles. It contains specifications for major tech companies, design trends, and specific site types like blogs or presentations.
Teams using ui-engineering should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/ui-engineering/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How ui-engineering Compares
| Feature / Agent | ui-engineering | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Expert system for creating high-quality, brand-aligned user interfaces. Use this skill when asked to design websites, create components, or implement specific visual styles. It contains specifications for major tech companies, design trends, and specific site types like blogs or presentations.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# UI Engineering Skill
## Overview
This skill provides a comprehensive library of **UI Engineering Specifications**. Each specification acts as a "stylesheet for logic", defining the exact colors, typography, interactions, and mental models for a specific style.
**When to use:**
- "Design a website like Apple"
- "Create a personal blog"
- "Build a dashboard like Stripe"
- "Make a PPT-style website"
## How to Use
### 1. Identify the Style
First, determine the most appropriate style for the user's request.
- Consult [Registry](references/_meta_registry.md) for a complete list of 60+ styles.
### 2. Read the Spec
Once a style is identified (e.g., `stripe`, `personal_blog`), read the corresponding reference file.
- Example: If the style is `stripe`, read `references/stripe.md`.
### 3. Apply the Rules
Use the Design Tokens, Component Recipes, and Tech Stack defined in the spec `references/[spec_name].md` to generate code. **Do not deviate** from the spec's defined hex codes or physics unless explicitly asked.
## Available References
### Core Registry
- [Meta Registry](references/_meta_registry.md): The master index of all styles, categorized by industry and vibe.
### High-Frequency Styles
- **SaaS / Fintech**: [Stripe](references/stripe.md), [Linear](references/linear.md)
- **Content / Blog**: [Personal Blog](references/personal_blog.md), [Notion](references/notion.md)
- **Presentation**: [Presentation Scroll](references/presentation_scroll.md)
- **Big Tech**: [Apple](references/apple.md), [Google](references/google.md), [Microsoft](references/microsoft.md)
## Skill Structure
```
ui-engineering/
├── SKILL.md
└── references/
├── _meta_registry.md <- START HERE
├── apple.md
├── stripe.md
├── personal_blog.md
├── ... (60+ specs)
```Related Skills
software-engineering-lead
Expert software engineering lead who translates product requirements into comprehensive engineering plans using GitHub Projects. Reviews PRDs and user stories, identifies gaps and conflicts, pushes back constructively on poor requirements, applies software engineering best practices, creates detailed technical plans with tasks and milestones, and ensures production-ready architecture. Use when translating product specs into actionable development plans, validating requirements, or designing system architecture.
prompt-engineering-patterns
Master advanced prompt engineering techniques to maximize LLM performance, reliability, and controllability in production. Use when optimizing prompts, improving LLM outputs, or designing production prompt templates.
midjourney-prompt-engineering
Use when generating images with Midjourney, constructing MJ prompts, iterating on MJ output quality, choosing between --sref/--oref/style codes, scoring image results, or building reusable prompt patterns. Also use when exploring MJ style codes, animating images, or debugging why a prompt isn't producing the intended result.
engineering
Guides technical decisions, architecture, and implementation. Use for tech choices, system design, API design, refactoring, or "how should I build this" questions.
engineering-standards
Comprehensive engineering standards for monorepo projects with Claude Code, covering hooks, testing, documentation, quality gates, and best practices. Use when setting up new projects, validating compliance, or extracting patterns from existing codebases.
data-engineering-backend-architect
Expert backend architect specializing in scalable API design, microservices architecture, and distributed systems. Masters REST/GraphQL/gRPC APIs, event-driven architectures, service mesh patterns, and modern backend frameworks. Handles service boundary definition, inter-service communication, resilience patterns, and observability. Use PROACTIVELY when creating new backend services or APIs. Use when: the task directly matches backend architect responsibilities within plugin data-engineering. Do not use when: a more specific framework or task-focused skill is clearly a better match.
context-engineering
Use when starting a new session, when agent output quality degrades, when switching between tasks, or when you need to configure rules files and context for a project.
Binary Analysis and Reverse Engineering
Systematic approach to analyzing compiled binaries, understanding program behavior, and identifying vulnerabilities without source code access
assisting-reverse-engineering
Provides reverse engineering analysis support including function identification, data structure analysis, and behavior understanding. Use when analyzing unknown binaries, understanding program structure, or investigating binary behavior.
android-engineering-core
This skill is used to implement Android features within the existing Kotlin, Compose, Room, Hilt and Navigation architecture, including data, navigation and background work.
Chaos Engineering
Design and execute controlled failure experiments to validate system resilience
chaos-engineering-fundamentals
Use when implementing chaos engineering, designing fault injection experiments, or building resilience testing practices. Covers chaos principles and experiment design.