---
name: frontend-ui
description: Use when designing web or mobile UI, creating prototypes, directing or engineering distinctive web experiences, structuring evidence-based web narratives, applying UI/UX guidance, using 21st.dev components, Stitch, or Figma.
author: J StaR Films / Matt Pocock
coauthored: J StaR Films / Takomi
version: 2.2.0
---

# Frontend UI Suite

Design systems, interactive component libraries, throwaway prototyping patterns, creative WebGL experiences, 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) |
| **`story-engineer`** | Evidence-backed case-study and project-history narratives | [`story-engineer/SKILL.md`](story-engineer/SKILL.md) |
| **`creative-web-development`** | Concept direction, experience architecture, motion, Canvas, WebGL, Three.js, and GLSL | [`creative-web-development/SKILL.md`](creative-web-development/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) |