Frontend Ui

Name: Frontend Ui
Author: J-StaR-Films-Studios

ASecurity

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.

24 stars
0 votes
0 copies
2 views
Added September 3, 2026

designreacttestingfrontend

Security analysis

A100/100

Pro scans all 20 files and shows the line behind each finding

Scanned September 3, 2026

npx -y skills add J-StaR-Films-Studios/VibeCode-Protocol-Suite --skill frontend-ui --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Frontend Ui?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/j-star-films-studios-frontend-ui/badge)](https://www.skillsdirectory.com/skills/j-star-films-studios-frontend-ui)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

---
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) |