wjgoarxiv

My Frontend Design Skill — Design skill for Claude Code

Design community

Award-winning frontend design skill for Claude Code — anti-slop certified.

How to install My Frontend Design Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open wjgoarxiv/my-frontend-design-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What My Frontend Design Skill does

Award-winning frontend design skill for Claude Code — anti-slop certified.

Alternatives in Design

Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
Maestro Impeccable — Use when designing, auditing, polishing, improving, or codifying frontend UI — websites, dashboards, landing p 530 ★
Fireworks Design — Generate a world-class frontend page via fireworks-design (explore → judge → synthesize → refine → polish) 96 ★

README

frontend-design

*Award-winning frontend interfaces that look human-designed. Because they are.*

[Features](#features) | [Quick Start](#quick-start) | [Usage](#usage) | [How It Works](#how-it-works) | [Anti-Slop Checklist](#the-anti-slop-philosophy)

**Note:** This skill produces frontends that are **indistinguishable from expensive agency work**. It enforces bold aesthetic choices, distinctive typography, intentional motion, and atmospheric depth — while systematically eliminating the visual signatures of AI-generated design (generic fonts, purple gradients, symmetric card grids, cookie-cutter SaaS layouts).

Features

Anti-Slop Manifesto — Concrete blacklists of fonts (Inter, Roboto, Poppins...), colors (#6366f1, purple gradients), layouts (3-column card grids), animations (fade-in-up on everything), and copy ("Revolutionize your workflow") that produce instantly recognizable AI output
Mandatory Tone Selection — Forces a bold aesthetic direction (brutalist, luxury editorial, retro-futuristic, etc.) before any code is written — prevents convergence to "clean modern" defaults
20+ Curated Font Pairings — Distinctive typography organized by aesthetic tone with copy-paste Google Fonts imports and CSS snippets
15+ Non-Cliche Color Palettes — CSS custom property blocks ready to paste, organized by mood — from warm editorial to neon brutalist
12+ Motion Recipes — Hero entrances, scroll-linked effects, hover interactions with both CSS-only and Framer Motion implementations
Output Type Protocols — Specific structural rules for landing pages (Hero->Support->Detail->CTA), dashboards (Linear-style restraint), components (atomic tokens), posters, and web apps
Automated Slop Detection — slop_checker.py scans generated HTML/CSS for AI aesthetic patterns and reports PASS/WARN/FAIL with line numbers
Project Scaffolding —