How do I install the Frontend UI skill?

Run npx skillmds@latest add j-star-films-studios/frontend-ui in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Frontend UI safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend UI?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Frontend UI free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Frontend UI?

j-star-films-studios (@j-star-films-studios) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend UI by j-star-films-studios

Name: Frontend UI
Author: j-star-films-studios

Frontend UI

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.

j-star-films-studios 384b047 96 files · 788.9 KB Updated Sep 17, 2026

File contents

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`
`story-engineer`	Evidence-backed case-study and project-history narratives	`story-engineer/SKILL.md`
`creative-web-development`	Concept direction, experience architecture, motion, Canvas, WebGL, Three.js, and GLSL	`creative-web-development/SKILL.md`
`frontend-design`	Foundational frontend design principles and typography	`frontend-design/SKILL.md`
`ui-ux-pro-max`	High-end visual styling, animations, and micro-interactions	`ui-ux-pro-max/SKILL.md`
`21st-dev-components`	Modern UI component patterns from 21st.dev	`21st-dev-components/SKILL.md`
`web-design-guidelines`	Usability, UX consistency, and accessibility standards	`web-design-guidelines/SKILL.md`
`building-native-ui`	React Native and Expo mobile UI development	`building-native-ui/SKILL.md`
`figma`	Figma asset inspection and translation to code	`figma/SKILL.md`
`stitch`	Component stitching and layout orchestration	`stitch/SKILL.md`
`component-analysis`	Auditing component composition and hierarchy	`component-analysis/SKILL.md`
`webapp-testing`	Playwright web application integration testing	`webapp-testing/SKILL.md`

---name: frontend-uidescription: 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.---# Frontend UI SuiteDesign 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) |

Frequently asked questions