Frontend design
Production-grade Claude Code skills for shipping quality code. One command takes your branch from "done coding" to PR-ready via audit → review → docs → push.
npx -y skills add cloverink/shipwright --skill frontend-designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 0 stars0 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.
What its author says it does
Copied from the file, not written here
Create distinctive, production-grade frontend interfaces. Rejects generic AI aesthetics (purple gradients, Inter font, glassmorphism). Design direction first, then implementation.
SKILL.md
2.4 KB, as published. Nobody here has run it
/frontend-design
Build frontend that doesn't look like every other AI-generated UI.
Philosophy
Most AI-generated UI converges on the same aesthetic: purple gradients, Inter font, glassmorphism cards, excessive rounded corners. This skill deliberately breaks from that pattern.
Design direction comes first. Before writing any code, establish:
- What mood/tone should the UI convey?
- What makes this interface distinctive?
- What's the one bold choice that sets it apart?
Process
- Understand — what is this page/component for? Who uses it? In what context?
- Direction — propose 2-3 aesthetic directions (not wireframes — moods)
- Commit — pick one direction and commit to it boldly
- Build — implement with high craft quality
- Refine — iterate on details (spacing, transitions, micro-interactions)
Anti-patterns (avoid these)
- Purple/blue gradients as default accent
- Inter or system font without intention
- Glassmorphism/frosted glass on everything
- Excessive border-radius (not everything needs to be a pill)
- Drop shadows on every element
- Dark mode as the default without reason
- Generic hero sections with stock illustration style
What good looks like
- Intentional typography — weight, spacing, and size serve hierarchy, not decoration
- Restrained color — 1-2 accent colors max, used with purpose
- Meaningful motion — 150-200ms micro-interactions, 500ms transitions
- Whitespace as design element — not filler, but rhythm
- One bold choice — a distinctive layout, an unusual color, a typographic statement
Adapting to your project
<!-- CONFIGURE: Replace with your project's design system -->Stack: [your framework] + [your UI library] + [your CSS approach]
Design tokens: [your color system, typography, spacing scale]
Component library: [your shared components]
The skill works with any stack. The principles are universal — the implementation details are yours.
Usage
/frontend-design # Start design process for a new page/component
Best used for greenfield UI. For wiring data, fixing bugs, or extending existing components, use a standard frontend-dev approach instead.