← All skills
frontend-ui
75 / 100 · Review before installing
Check before installing.
By J-StaR-Films-Studios/VibeCode-Protocol-Suite (GitHub) · design · 26 stars · scanned at commit bb9e238
Use when designing web or mobile UI, creating prototypes, directing or engineering distinctive web experiences, structuring evidence-based web narratives, reviewing visible UI copy for unsupported claims ('unslop-gpt-ui'), applying UI/UX guidance, using 21st.dev components, Stitch, or Figma.
Works with any agent that supports SKILL.md skills.
What this skill can do
Runs commands on your computer
The author does not mention this.
Found in 35 places.
Show 17 more
- assets/.agent/skills/frontend-ui/21st-dev-components/SKILL.md, line 200
node scripts/build-manual-handoff-template.mjs --sections "header,hero,features,pricing,footer" --out 21st-handoff.md - assets/.agent/skills/frontend-ui/figma/SKILL.md, line 52
hyperframes figma asset '<url-or-fileKey:nodeId>' [--format svg|png|jpg|pdf] [--scale 2] [--description "..."] [--entity "..."] - assets/.agent/skills/frontend-ui/figma/SKILL.md, line 60
hyperframes figma tokens <fileKey> - assets/.agent/skills/frontend-ui/figma/SKILL.md, line 70
hyperframes figma component '<url-or-fileKey:nodeId>' - assets/.agent/skills/frontend-ui/stitch/remotion/SKILL.md, line 75
npm create video@latest -- --blank - assets/.agent/skills/frontend-ui/stitch/remotion/SKILL.md, line 82
cd video - assets/.agent/skills/frontend-ui/stitch/remotion/SKILL.md, line 199
npm run dev - assets/.agent/skills/frontend-ui/stitch/remotion/SKILL.md, line 218
npx remotion render WalkthroughComposition output.mp4 - assets/.agent/skills/frontend-ui/stitch/shadcn-ui/SKILL.md, line 40
npx shadcn@latest add [component-name] - assets/.agent/skills/frontend-ui/stitch/shadcn-ui/SKILL.md, line 70
npx shadcn@latest create - assets/.agent/skills/frontend-ui/stitch/shadcn-ui/SKILL.md, line 76
npx shadcn@latest init - assets/.agent/skills/frontend-ui/ui-ux-pro-max/SKILL.md, line 15
python3 --version || python --version - assets/.agent/skills/frontend-ui/ui-ux-pro-max/SKILL.md, line 22
brew install python3 - assets/.agent/skills/frontend-ui/ui-ux-pro-max/SKILL.md, line 27
sudo apt update && sudo apt install python3 - assets/.agent/skills/frontend-ui/ui-ux-pro-max/SKILL.md, line 54
python3 ~\.gemini\antigravity\skills\ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"] - assets/.agent/skills/frontend-ui/ui-ux-pro-max/SKILL.md, line 65
python3 ~\.gemini\antigravity\skills\ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa" - assets/.agent/skills/frontend-ui/ui-ux-pro-max/SKILL.md, line 73
python3 ~\.gemini\antigravity\skills\ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
and 15 more places
Sends data to these websites: nextjs.org, nuxt.com, kit.svelte.dev
The author does not mention this.
Found in 13 places.
Show 10 more
- assets/.agent/skills/frontend-ui/ui-ux-pro-max/data/react-performance.csv, line 2
1,Async Waterfall,Defer Await,async await defer branch,React/Next.js,Move await into branches where actually used to avoid blocking unused code paths,Move await - assets/.agent/skills/frontend-ui/ui-ux-pro-max/data/react-performance.csv, line 4
3,Async Waterfall,Dependency Parallelization,better-all dependency parallel,React/Next.js,Use better-all for operations with partial dependencies to maximize pa - assets/.agent/skills/frontend-ui/ui-ux-pro-max/data/react-performance.csv, line 17
16,Client,SWR Deduplication,swr dedup cache revalidate,React/Next.js,Use SWR for automatic request deduplication and caching,Use useSWR for client data fetching - assets/.agent/skills/frontend-ui/ui-ux-pro-max/data/stacks/nextjs.csv, line 13
12,DataFetching,Fetch data in Server Components,Fetch directly in async Server Components,async function Page() { const data = await fetch() },useEffect for ini - assets/.agent/skills/frontend-ui/ui-ux-pro-max/data/stacks/nextjs.csv, line 14
13,DataFetching,Configure caching explicitly (Next.js 15+),Next.js 15 changed defaults to uncached for fetch,Explicitly set cache: 'force-cache' for static data - assets/.agent/skills/frontend-ui/ui-ux-pro-max/data/stacks/nuxtjs.csv, line 10
9,DataFetching,Use useFetch for simple data fetching,Wrapper around useAsyncData for URL fetching,useFetch for API calls,$fetch in onMounted,"const { data } = a - assets/.agent/skills/frontend-ui/ui-ux-pro-max/data/stacks/nuxtjs.csv, line 12
11,DataFetching,Use $fetch for non-reactive requests,$fetch for event handlers and non-component code,$fetch in event handlers or server routes,useFetch in clic - assets/.agent/skills/frontend-ui/ui-ux-pro-max/data/stacks/nuxtjs.csv, line 30
29,State,Use callOnce for one-time async operations,Ensure async operations run only once,callOnce for store initialization,Direct await in component,"await cal - assets/.agent/skills/frontend-ui/ui-ux-pro-max/data/stacks/react.csv, line 41
40,ErrorHandling,Handle async errors,Catch errors in async operations,try/catch in async handlers,Unhandled promise rejections,try { await fetch() } catch(e) {} - assets/.agent/skills/frontend-ui/ui-ux-pro-max/data/stacks/svelte.csv, line 45
44,SvelteKit,Use form actions,Server-side form handling,+page.server.js actions,API routes for forms,export const actions = { default },fetch('/api/submit'),Med
Downloads and installs other software
The author does not mention this.
Found in 108 places.
Show 17 more
- assets/.agent/skills/frontend-ui/building-native-ui/references/webgpu-three.md, line 500
npx expo prebuild - assets/.agent/skills/frontend-ui/building-native-ui/references/webgpu-three.md, line 501
npx expo run:ios - assets/.agent/skills/frontend-ui/figma/SKILL.md, line 80
**Usage beacon:** MCP phases have no CLI touchpoint, so fire the skill beacon at start and finish (anonymous, consent-gated, never fails): `npx hyperframes even - assets/.agent/skills/frontend-ui/figma/SKILL.md, line 88
5. Run `npx hyperframes lint && npx hyperframes validate` before calling it done. - assets/.agent/skills/frontend-ui/stitch/design-md/README.md, line 6
npx add-skill google-labs-code/stitch-skills --skill design-md --global - assets/.agent/skills/frontend-ui/stitch/enhance-prompt/README.md, line 6
npx add-skill google-labs-code/stitch-skills --skill enhance-prompt --global - assets/.agent/skills/frontend-ui/stitch/react-components/README.md, line 6
npx add-skill google-labs-code/stitch-skills --skill react:components --global - assets/.agent/skills/frontend-ui/stitch/remotion/README.md, line 46
npx add-skill google-labs-code/stitch-skills --skill remotion --global - assets/.agent/skills/frontend-ui/stitch/remotion/SKILL.md, line 218
npx remotion render WalkthroughComposition output.mp4 - assets/.agent/skills/frontend-ui/stitch/remotion/SKILL.md, line 307
- **Installation**: `npx skills add remotion-dev/skills` - assets/.agent/skills/frontend-ui/stitch/shadcn-ui/README.md, line 6
npx skills add google-labs-code/stitch-skills --skill shadcn-ui --global - assets/.agent/skills/frontend-ui/stitch/shadcn-ui/README.md, line 102
npx create-next-app@latest my-app - assets/.agent/skills/frontend-ui/stitch/shadcn-ui/README.md, line 104
npx shadcn@latest init - assets/.agent/skills/frontend-ui/stitch/shadcn-ui/README.md, line 107
npx shadcn@latest add button - assets/.agent/skills/frontend-ui/stitch/shadcn-ui/README.md, line 108
npx shadcn@latest add card - assets/.agent/skills/frontend-ui/stitch/shadcn-ui/README.md, line 115
npx shadcn@latest init - assets/.agent/skills/frontend-ui/stitch/shadcn-ui/README.md, line 124
npx shadcn@latest add button
and 88 more places
Safer alternatives
Low-risk skills in the same category (design) that look related. Check that one does what you need.
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'frontend-ui' ] || [ -L ~/.agents/skills/'frontend-ui' ]; then echo 'A skill folder named frontend-ui already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/J-StaR-Films-Studios/VibeCode-Protocol-Suite' "$d" && git -C "$d" checkout --quiet 'bb9e2387e4c7cb850ab9795fd8630486991c0337' -- 'assets/.agent/skills/frontend-ui' && mkdir -p ~/.agents/skills && cp -R "$d"/'assets/.agent/skills/frontend-ui' ~/.agents/skills/'frontend-ui' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'frontend-ui' ~/.claude/skills/'frontend-ui' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for J-StaR-Films-Studios/VibeCode-Protocol-Suite shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/J-StaR-Films-Studios/VibeCode-Protocol-Suite/)
Score history
| Date | Version | Score |
|---|
| 2026-11-12 | bb9e238 | 75 |