Frontend design

Skill alebgl77/claude-inc/skills/frontend-design

Writes production-grade, distinctive interface code — one strong art direction (editorial, brutalist, soft-depth, retro-terminal), a real typographic scale, custom details (cursor, selection, focus states), semantic HTML, delivered as a single file or as components. Ships with an anti-AI-slop checklist so nothing leaves looking template-made. Use when the user says "build this page", "code the UI", "make me a beautiful front-end", or "this looks like every AI site — redo it".From its SKILL.md

Install

npx -y skills add alebgl77/claude-inc --skill frontend-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

8 stars8 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

4.8 KB, ~1.1k tokens by cl100k_base, as published. Nobody here has run it

Frontend Design — Front of House

"Build front-end UIs"

When to use

It is time to write real interface code — "build the landing page", "code this dashboard UI".
An existing front-end looks generic — "this screams AI-generated, give it a point of view".
A design system exists and needs its first consumer — pairs with ui-ux-pro-max tokens.
The user wants craft, not scaffolding — "make it feel expensive", "no template energy".

Workflow

Commit to one art direction before writing a line. Editorial (serif display, generous whitespace, hairline rules), brutalist (raw borders, mono, hard shadows), soft-depth (layered surfaces, tinted shadows), retro-terminal (phosphor palette, restraint with the scanlines), industrial (dense, technical, visible grid) — or argue for another. Write the direction as one sentence; every later decision must serve it.
Set the typographic reality. Two families max; display size at least 3x body — no 14/16/18 mush. Tighten letter-spacing on large sizes, widen it on small caps and labels. Load one hosted family at most; fall back to a deliberate system stack.
Structure in semantic HTML first. Landmarks (header/nav/main/section/footer), heading order without skips, buttons are <button>, links are <a>, inputs have labels. No div soup.
Style with intent. Spacing on one scale, color through role variables, and exactly one signature move executed hard — an oversized numeral, an asymmetric grid, sticky marginalia, an unexpected hover. One. Not four.
Craft the custom details. ::selection tinted to the palette, :focus-visible rings designed rather than default blue, cursor changes where they mean something, real empty and error states.
Wire interactions in vanilla JS — or the project's existing framework. Event delegation, no dependencies for what CSS already does.
Run the anti-slop checklist below. Any hit is rework, not an excuse.
Deliver one self-contained file (or components matching repo conventions) opening with a three-line comment: the art direction, its rules, its one signature move.

Anti-slop checklist

Reject on sight: purple/indigo gradient hero — glassmorphism without a reason — emoji as icons — the three-feature-cards-with-rounded-icons row — default-Tailwind sameness (stacks of p-4 rounded-xl shadow-md cards) — Inter-on-white with blue-600 buttons — transition: all — border-radius 12px on everything — "Supercharge your workflow" copy — perfectly symmetric everything. Any hit means rework before delivery.

Output format

<!-- direction: EDITORIAL — serif display, hairline rules, ivory ground, one oxblood accent.
     rules: no gradients; hierarchy via size and weight only; hover = underline offset shift.
     signature: oversized drop-cap section numerals. -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Product — the one-line promise</title>
  <style>
    /* 1. tokens  2. layout  3. components  4. details (::selection, :focus-visible, cursor) */
  </style>
</head>
<body>
  <header><!-- nav, one primary action --></header>
  <main><!-- sections in document order, headings intact --></main>
  <footer><!-- real links, no dead ends --></footer>
  <script>/* minimal, event-delegated */</script>
</body>
</html>

Quality bar

Art direction named in the header comment and recognizable within three seconds of load
Zero hits on the anti-slop checklist
Semantic HTML throughout: landmarks, intact heading order, real controls
:focus-visible styled on every interactive element; AA contrast on all text
Exactly one signature move — visible, deliberate, serving the direction
No horizontal scroll at 360px or 1440px; text measures stay between 45 and 75ch

Example

Invocation: "Build a landing page for a bakery-focused POS startup — warm but not cute."

Produces: One index.html (~350 lines), direction "editorial-warm": Fraunces display over a system sans, flour-white ground with rye-brown ink and one burnt-orange accent, an oversized ligature headline as the signature move, hairline section rules, oxblood ::selection, designed focus rings on the pricing table — no gradient, no emoji, no card-grid hero.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most design frontend skills give in ~1.1k tokens

Counted across 1,179 of the 2,086 authors here whose files we hold, read 2026-09-06

Commit to a bold aesthetic directionin 31 of 1179, across 24 files
Prefer component composition over inheritancein 28 of 1179, across 14 files
Animate only transform and opacity propertiesin 27 of 1179, across 22 files
Memoize expensive computations with useMemoin 26 of 1179, across 13 files
Use semantic HTML elementsin 24 of 1179, across 23 files
Virtualize long lists for performancein 21 of 1179, across 10 files
Use CSS variables for design tokensin 20 of 1179, across 14 files
Implement loading, empty, and error statesin 20 of 1179
Lazy load heavy components with Suspensein 19 of 1179, across 8 files
Respect prefers-reduced-motion media queriesin 18 of 1179, across 10 files
Prioritize CSS-only animations for HTMLin 18 of 1179, across 16 files
Use compound components for related UI elementsin 18 of 1179, across 7 files

Said here and by no other author read

Set typographic reality with two families maximum
Structure content using semantic HTML landmarks
Execute exactly one signature design move
Style selection and focus-visible states
Use vanilla JavaScript for interactions
Run the anti-slop checklist before delivery

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.