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.