← All skill packs

UI Design & Frontend Skills

Skill pack
2 skills0 selected
joe-simoSkills in this pack

Independent community skill for designing, redesigning, reviewing, and polishing original Awwwards-style, award-caliber experiential websites: immersive portfolios, agency sites, editorial microsites, campaign pages, cinematic launches, scroll narratives, WebGL/Three.js/R3F scenes, GSAP/Motion interactions, tactile transitions, typography, art direction, media, accessibility, performance, and UI polish. Trigger for explicit Awwwards, Site of the Day, Site of the Year, award-caliber, experiential, immersive, cinematic, experimental, motion-led, WebGL-heavy web design, or portfolio, agency, luxury, fashion, music, campaign, launch, editorial, interactive, storytelling, or narrative work paired with high-craft/experiential intent. Skip ordinary SaaS, admin, docs, CRUD, backend-only, and ordinary portfolio/campaign/launch work unless experiential treatment is requested. Community guidance; not affiliated with Awwwards and not permission to clone winners or nominees.

English

Community skill for applying the Geist design system to Vercel-inspired rendered frontend UI across React/Next.js/Vite/Astro/Svelte/Vue/HTML/CSS, Tailwind, shadcn, and Radix. Use for typography, spacing, color, materials, components, app shells, dashboards, forms, tables, dialogs, states, responsive layout, and UI polish. Community-authored, not official Vercel. Trigger for Geist, Vercel-style UI, or generic clean/modern/premium/polished SaaS/developer-product visuals when no other final visual system is requested. Skip non-visual work unless it materially changes rendered UI.

English

Includes Awwwards Style Web Design and Vercel Geist Design System.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

Supported by the Atlas install prompt. Skill-specific requirements vary.

Pack stats

Skills2CategorycontentStars0

What’s included

Awwwards Style Web Design

Independent community skill for designing, redesigning, reviewing, and polishing original Awwwards-style, award-caliber experiential websites: immersive portfolios, agency sites, editorial microsites, campaign pages, cinematic launches, scroll narratives, WebGL/Three.js/R3F scenes, GSAP/Motion interactions, tactile transitions, typography, art direction, media, accessibility, performance, and UI polish. Trigger for explicit Awwwards, Site of the Day, Site of the Year, award-caliber, experiential, immersive, cinematic, experimental, motion-led, WebGL-heavy web design, or portfolio, agency, luxury, fashion, music, campaign, launch, editorial, interactive, storytelling, or narrative work paired with high-craft/experiential intent. Skip ordinary SaaS, admin, docs, CRUD, backend-only, and ordinary portfolio/campaign/launch work unless experiential treatment is requested. Community guidance; not affiliated with Awwwards and not permission to clone winners or nominees.

Vercel Geist Design System

Community skill for applying the Geist design system to Vercel-inspired rendered frontend UI across React/Next.js/Vite/Astro/Svelte/Vue/HTML/CSS, Tailwind, shadcn, and Radix. Use for typography, spacing, color, materials, components, app shells, dashboards, forms, tables, dialogs, states, responsive layout, and UI polish. Community-authored, not official Vercel. Trigger for Geist, Vercel-style UI, or generic clean/modern/premium/polished SaaS/developer-product visuals when no other final visual system is requested. Skip non-visual work unless it materially changes rendered UI.

Quick start

  1. Choose your skills. Select individual skills above, or choose the entire pack.
  2. Copy the install prompt. Use Copy install prompt above the list.
  3. Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.

Try it with your agent

After installation, start with a request like:

Example request
Use the Awwwards Style Web Design skill to help with my task.
Ask me for the context you need before getting started.

Requirements & license

  • A coding agent that can access your project files and install skills.
  • Your agent checks each skill’s instructions, dependencies, and permissions during setup.
  • Reported license for the skills shown: MIT. The author’s terms apply.
UI Design & Frontend Skills | Agent Skills Atlas