← All skill packs

UI Design & Frontend Skills

Skill pack
9 skills0 selected
eldergenixSkills in this pack

Use for product design, UI/UX, branding, high-fidelity web/mobile/desktop interfaces, HTML prototypes, design systems, frontend implementation, and design quality work.

English

Use for empty states, no-data UI, AI output streaming, thinking steps, loading states, skeletons, progressive disclosure, and conversational product surfaces.

English

Use after design or implementation to package handoff notes, refactor UI code, split god components, document tokens, and prepare maintainable frontend deliverables.

English

Use for React Native, Expo SDK 56, NativeWind, iOS/Android UI, mobile UX flows, touch targets, safe areas, and mobile design-system implementation.

English

Use for interaction design, animations, progressive blur, animated borders, liquid metal accents, transitions, gesture feedback, and motion quality review.

English

Use before major product, UI/UX, branding, or prototype work to clarify goals, audience, constraints, design system, variations, and deliverables.

English

Use to review UI/UX quality, identify design inconsistencies, accessibility issues, visual polish defects, implementation debt, and production-readiness gaps.

English

Use when researching visual direction from Mobbin, Dribbble, Pinterest, Landing Love, 60fps Design, Godly Website, shadcn/coss/ui, or related UI references.

English

Use for production web UI implementation with Next.js 16, TypeScript, Tailwind CSS, shadcn/ui, Radix, TanStack, icons, MUI, or HTML prototypes.

French

Includes Codex Design Core, Empty States and AI Streaming, Handoff and Refactor, and other workflows.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

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

Pack stats

Skills9CategoryproductStars0

What’s included

Codex Design Core

Use for product design, UI/UX, branding, high-fidelity web/mobile/desktop interfaces, HTML prototypes, design systems, frontend implementation, and design quality work.

Empty States and AI Streaming

Use for empty states, no-data UI, AI output streaming, thinking steps, loading states, skeletons, progressive disclosure, and conversational product surfaces.

Handoff and Refactor

Use after design or implementation to package handoff notes, refactor UI code, split god components, document tokens, and prepare maintainable frontend deliverables.

Mobile App UI Implementation

Use for React Native, Expo SDK 56, NativeWind, iOS/Android UI, mobile UX flows, touch targets, safe areas, and mobile design-system implementation.

Motion and Microinteractions

Use for interaction design, animations, progressive blur, animated borders, liquid metal accents, transitions, gesture feedback, and motion quality review.

Product Design Discovery

Use before major product, UI/UX, branding, or prototype work to clarify goals, audience, constraints, design system, variations, and deliverables.

UI Quality Audit

Use to review UI/UX quality, identify design inconsistencies, accessibility issues, visual polish defects, implementation debt, and production-readiness gaps.

Visual Inspiration Research

Use when researching visual direction from Mobbin, Dribbble, Pinterest, Landing Love, 60fps Design, Godly Website, shadcn/coss/ui, or related UI references.

Web App UI Implementation

Use for production web UI implementation with Next.js 16, TypeScript, Tailwind CSS, shadcn/ui, Radix, TanStack, icons, MUI, or HTML prototypes.

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 Codex Design Core 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