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.
Scanned 9/3/2026
Install to Claude Code
Skills Directorynpx -y skills add J-StaR-Films-Studios/VibeCode-Protocol-Suite --skill frontend-ui --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Frontend Ui?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/j-star-films-studios-frontend-ui)More formats (shields.io, HTML) on the badges page.
---
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) |
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
