Frontend Design Direction

Salvaged from a stale community PR by linus707, this gives Claude opinionated design direction before it generates production UI. It pushes back on the usual purple gradients and generic hero sections, asks you to pick a tone that matches the domain (dense and scannable for tools, expressive for portfolios), and walks through hierarchy, responsive constraints, and motion with specific anti-patterns. ECC intentionally doesn't rebundle Anthropic's canonical frontend-design skill, so install this when you want the local design-direction guidance or the official one from anthropics/skills when you need upstream coverage. Useful when you're building dashboards, components, or landing pages that need to feel purposeful instead of templated.

skills.sh installs: 6.4K
GitHub stars: 300.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/ecc --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.