Awesome-omni-skill frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications.

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/development/frontend-design-hatappo" ~/.claude/skills/diegosouzapw-awesome-omni-skill-frontend-design-fc5858 && rm -rf "$T"

manifest: skills/development/frontend-design-hatappo/SKILL.md

source content

Frontend Design

Create memorable, distinctive interfaces. Avoid generic "AI slop" - every design should have a clear point of view.

Design Philosophy

Bold choices: Pick a strong color palette, unusual typography, or distinctive layout
Purposeful whitespace: Let content breathe, don't fill every pixel
Visual hierarchy: Make the important things impossible to miss
Micro-interactions: Add subtle animations that delight

Technical Stack

React 18+ with TypeScript
Tailwind CSS for styling
Framer Motion for animations
Use CSS Grid for complex layouts, Flexbox for simpler ones

Anti-patterns

Generic blue/white SaaS layouts
Overuse of rounded corners and soft shadows
Cards inside cards inside cards
Gratuitous gradient backgrounds