From awesome-frontend
The method for designing distinctive, high-craft frontends — the style-agnostic core: how to make ANY site or page feel art-directed and intentional rather than templated. Use whenever look-and-feel matters and the user hasn't named a specific aesthetic: landing pages, portfolios, marketing sites, hero sections, case studies. Trigger it on "make it look designed / premium / intentional / not generic", "this looks AI-made", "give it a real identity", or any composition, type-pairing, color, spacing, or motion-direction question. This is the DESIGN METHOD; for a specific look, pair it with a style LENS skill (editorial-web-design, swiss-minimal-design, brutalist-web-design, luxury-web-design, portfolio-web-design). For making the motion it calls for run at 60fps, pair with awesome-react-animations. Core belief: great design is a few bold, committed decisions executed with discipline.
How this skill is triggered — by the user, by Claude, or both
Slash command
/awesome-frontend:awesome-frontend-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Most frontends look generic because they make no decisions: a default font, a
Most frontends look generic because they make no decisions: a default font, a neutral palette, even padding everywhere, motion bolted on last. Distinctive work commits to one strong idea and executes it with restraint. This skill is the style-agnostic method for doing that — the part that's true whether the result is editorial, Swiss, brutalist, or luxury. For a specific aesthetic, layer a lens on top (see "Pick a lens" below); the lens supplies the vocabulary and a real reference teardown, this core supplies the discipline.
Decide the attitude before any pixels and name it in ~3 words. Then let that concept veto choices. A page trying to be elegant AND playful AND minimal AND techy reads as none of them. The concept is the spine every later decision serves.
Type carries more identity than anything else. The strongest systems pair two
faces in tension and use them semantically (one for statements, one for
labels/credits/body). Set a tight scale ramp — usually ~4 sizes: one massive
display step, a section step, body, and a micro label. The jump between massive
and micro is the drama. Sweat micro-typography (tracking, leading, real quotes,
optical alignment). Details + how to choose faces: references/composition-and-type.md.
Few colors, used hard. Decide a palette with a stance (a committed hue, a stark
mono, a restrained neutral system) instead of the generic gray-on-white + one blue
accent. Tint neutrals toward the concept; pick contrast deliberately.
references/composition-and-type.md covers building the palette.
Establish a grid, then break it on purpose. Use negative space as a luxury
signal, asymmetry and edge-anchoring over centered-everything, and scale
contrast as drama. Commit to one corner geometry and one base spacing unit.
Full layout playbook: references/composition-and-type.md.
Decide what moves, in what order, with what feeling — a scripted timeline (load →
reveal → scroll beats → transitions), not fade-up-on-everything. The biggest tell
of intentional motion is custom easing (expo/power/spring, never the browser
default) reused consistently. Principles: references/motion-direction.md. Then
implement it smoothly per the awesome-react-animations skill (this core decides
what and why; that skill keeps it 60fps).
When the user wants a specific aesthetic — or you've chosen one for them — apply the matching lens skill on top of this method. Each lens carries that style's vocabulary, do/don't rules, and a real reference teardown:
If no lens fits, you can still produce strong work from this method alone — just make the five decisions deliberately and commit.
rounded-xl on everything.ease on every block.Design is subtraction and commitment: one concept, two typefaces in tension, a committed palette, lots of space, and choreographed motion — then made smooth. The lenses tell you which commitments; this core makes sure you actually commit.
npx claudepluginhub gcomartins/myfskills --plugin awesome-frontendCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.