frontend-ui v2.0.0A

Immutable. This exact content is served forever at /api/v1/blob/6dbbc62388a446eb.

---
name: frontend-ui
description: Use when designing web/mobile UI, creating prototypes ('prototyping-variants' Logic demo/UI switch bar), applying UI/UX Pro Max, 21st.dev components, Stitch, or Figma.
author: J StaR Films / Matt Pocock
coauthored: J StaR Films / Takomi
version: 2.0.0
---

# Frontend UI Suite

Design systems, interactive component libraries, throwaway prototyping patterns, and responsive UI guidelines.

## Sub-Skills

| Sub-Skill | Purpose | Path |
|---|---|---|
| **`prototyping-variants`** | Two-branch throwaway prototyping: Logic Simulator HTML demo & in-app UI variant switch bar | [`prototyping-variants/SKILL.md`](prototyping-variants/SKILL.md) |
| **`frontend-design`** | Foundational frontend design principles and typography | [`frontend-design/SKILL.md`](frontend-design/SKILL.md) |
| **`ui-ux-pro-max`** | High-end visual styling, animations, and micro-interactions | [`ui-ux-pro-max/SKILL.md`](ui-ux-pro-max/SKILL.md) |
| **`21st-dev-components`** | Modern UI component patterns from 21st.dev | [`21st-dev-components/SKILL.md`](21st-dev-components/SKILL.md) |
| **`web-design-guidelines`** | Usability, UX consistency, and accessibility standards | [`web-design-guidelines/SKILL.md`](web-design-guidelines/SKILL.md) |
| **`building-native-ui`** | React Native and Expo mobile UI development | [`building-native-ui/SKILL.md`](building-native-ui/SKILL.md) |
| **`figma`** | Figma asset inspection and translation to code | [`figma/SKILL.md`](figma/SKILL.md) |
| **`stitch`** | Component stitching and layout orchestration | [`stitch/SKILL.md`](stitch/SKILL.md) |
| **`component-analysis`** | Auditing component composition and hierarchy | [`component-analysis/SKILL.md`](component-analysis/SKILL.md) |
| **`webapp-testing`** | Playwright web application integration testing | [`webapp-testing/SKILL.md`](webapp-testing/SKILL.md) |