frontend-ui v2.0.0A

Immutable. This exact content is served forever at /api/v1/blob/454b6c148bd0d558.

---
name: frontend-ui
displayName: Frontend & UI/UX Suite
description: Use when designing web or mobile UI, applying frontend design principles, auditing accessibility and UX guidelines, using 21st.dev components, styling with UI/UX Pro Max, integrating Figma assets, building Expo native UI, or running Playwright webapp tests.
version: 2.0.0
author: J StaR Films
tags: [frontend, design, ui, ux, figma, components, tailwind, testing]
---

# Frontend & UI/UX Suite

This is the router for frontend development, interface design, component libraries, and visual quality assurance. Open and read the relevant sub-skill file for your task:

## Design Systems & Principles

| Area | Sub-Skill Path | Use When |
|---|---|---|
| Frontend Design | `frontend-design/SKILL.md` | Crafting distinctive, intentional web UI |
| Web Design Guidelines | `web-design-guidelines/SKILL.md` | Accessibility, contrast, layout, and UX audits |
| UI/UX Pro Max | `ui-ux-pro-max/SKILL.md` | Comprehensive styles, palettes, fonts, and chart specs |
| Native UI (Expo) | `building-native-ui/SKILL.md` | Building mobile apps with Expo Router and NativeWind |

## Components & Visual Integration

| Area | Sub-Skill Path | Use When |
|---|---|---|
| 21st.dev Components | `21st-dev-components/SKILL.md` | Building with curated React components from 21st.dev |
| Component Analysis | `component-analysis/SKILL.md` | Analyzing React/TS components for quality and conventions |
| Figma Integration | `figma/SKILL.md` | Importing Figma frames, design tokens, and assets |
| Stitch UI | `stitch/SKILL.md` | Rapid UI prototyping and stitching component blocks |

## Verification & Testing

| Area | Sub-Skill Path | Use When |
|---|---|---|
| Webapp Testing | `webapp-testing/SKILL.md` | End-to-end testing with Playwright, screenshots, logs |