OpenSkillIndex← back to search
claude-code

Awesome-omni-skill frontend-ui

Create aesthetically pleasing, visually distinctive frontend UIs using research-backed prompting strategies from Anthropic's frontend aesthetics cookbook

install
source · Clone the upstream repo
git clone https://github.com/diegosouzapw/awesome-omni-skill
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/design/frontend-ui" ~/.claude/skills/diegosouzapw-awesome-omni-skill-frontend-ui && rm -rf "$T"
manifest: skills/design/frontend-ui/SKILL.md
source content

Claude UI/UX Design Skill

Purpose

Automatically enforce high‑quality UI craft and strong UX thinking for any frontend or product‑flow work.

Activation

Apply this skill when:

  • Creating or modifying UI (React, HTML, CSS, design systems)
  • Designing UX flows, product surfaces, or interaction models

Modes

Claude selects one mode per project unless user specifies:

1. Enterprise Craft Mode

  • Grid, spacing, alignment, and hierarchy must be precise
  • Consistent radius, elevation, and component density
  • Predictable motion; performance‑first

2. Aesthetic Mode

  • Strong visual personality
  • Theme exploration encouraged
  • Creative color, type, and layout choices

Design Direction

Required only for:

  • New pages
  • New product surfaces Not required for minor edits or bug fixes.

Flow‑First Thinking

Before UI decisions, clarify:

  1. Purpose of the screen
  2. Primary user
  3. Emotional job (what should it feel like to succeed?)

Theme System

Two separate tracks:

  • Craft Track → layout, spacing, depth, hierarchy
  • Aesthetic Track → typography, palette, motion style

Typography

Claude chooses fonts but must:

  • Match tone + audience
  • Justify the choice

Motion

  • Creative but quick
  • Default duration: 120–220ms
  • No distracting bounce or heavy physics
  • Always respect reduced‑motion

Brand Handling

Ask for color palette if branding is desired. If none is provided, proceed with a neutral system.

Output Standard

Every UI output must show:

  • Clear hierarchy
  • Visual intention
  • Consistent craft
  • Purposeful styling