Frontend Design Direction

Salvaged from a stale community PR by linus707, this is ECC's fork of frontend design guidance that pushes you to pick an explicit direction before writing UI code. It asks you to name the purpose, audience, tone, and one memorable detail so you don't default to purple gradients and hero sections on every dashboard. The anti-patterns list is honest: no cards inside cards, no decorative blobs when the domain needs restraint, no hiding the actual product behind marketing copy. Use this when you're building something that needs to feel intentional and matched to its context, not just functional. ECC keeps this separate from Anthropic's official frontend-design skill on purpose.

skills.sh installs: 1.7K
GitHub stars: 229.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/everything-claude-code --skill frontend-design-direction --agent claude-code

Installs into .claude/skills of the current project.

Files

Frontend Design Direction

Use this skill when the work is not just making UI function, but making it feel purposeful, polished, and appropriate to the product domain.

Source: salvaged from stale community PR #1659 by linus707.

Note: ECC intentionally does not rebundle the canonical Anthropic frontend-design skill. Install that from anthropics/skills when you want the official upstream skill. This skill is the ECC-specific design-direction salvage of the useful local guidance from #1659.

When to Use

The user asks to build a web page, app, dashboard, artifact, component, or UI.
The user asks to make an interface more polished, distinctive, beautiful, or less generic.
The implementation needs visual hierarchy, typography, color, motion, layout, and interaction choices.
The current UI works but reads as flat, generic, templated, or mismatched to the audience.