Design frontend

Skill kensaurus/cursor-kenji/skills/design-frontend

Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Use when the user says "build this UI", "design this page", "make it look good", "dashboard layout", "beautify this", or "make the UI feel premium". Produces accessible, responsive components with intentional typography, color, and spacing. Pairs with design-system, enhance-web-ui. Do NOT use for pure logic or API work.From its SKILL.md

Install

npx -y skills add kensaurus/cursor-kenji --skill design-frontend

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.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

3.0 KB, 747 tokens by cl100k_base, as published. Nobody here has run it

Frontend Design Skill

Discover design systems, respect existing patterns, create beautiful interfaces.

Phase 1: Design System Discovery (MANDATORY)

Before writing ANY frontend code:

1.1 Find Design System Files

Glob: **/*design-system*.{md,ts,css}
Glob: **/tokens*.{ts,json}
Glob: **/components/ui/**
Glob: **/_*README*

1.2 Extract & Document Tokens

Category	Find	Examples
Typography	Sizes, weights	`text-xs`, `font-medium`
Spacing	Padding, gaps	`p-4`, `gap-2`
Colors	Palette, semantic	`bg-emerald-50`
Borders	Radius, styles	`rounded-sm`
Animations	Durations	`duration-200`

1.3 Find Forbidden Patterns

grep -r "NEVER\|FORBIDDEN\|❌" docs/ README*

1.4 Verification Statement (REQUIRED)

"Design System Discovery:
├─ Found: [design system path]
├─ Typography min: [e.g., text-xs]
├─ Radius standard: [e.g., rounded-sm]
├─ Forbidden: [list patterns]
└─ Reusing: [existing components]"

Phase 2: Implementation Standards

Typography Minimums

Context	Minimum	Usage
Body	`text-sm` (14px)	Primary content
Captions	`text-xs` (12px)	Labels, hints
Compact	`text-[10px]`	Dense dashboards only

Never use text-[8px] or text-[9px] for readable content.

Accessibility Requirements

Check	Requirement
Touch targets	≥44×44px
Contrast	4.5:1 text, 3:1 UI
Keyboard	`tabIndex`, focus styles
Motion	`prefers-reduced-motion`

Quick Reference

Typography: text-xs=12px, text-sm=14px, text-base=16px
Spacing: 1=4px, 2=8px, 3=12px, 4=16px, 6=24px, 8=32px

Phase 3: Quality Checklist

[ ] Uses design system tokens (no hardcoded values)
[ ] Extends existing components (no duplicates)
[ ] Typography ≥ text-xs for readable content
[ ] Touch targets ≥ 44px
[ ] Focus states visible
[ ] prefers-reduced-motion respected

Common Fixes

Issue	Fix
Tiny text	`text-[9px]` → `text-xs`
Bold weights	`font-bold` → `font-medium`
Large radius	`rounded-lg` → `rounded-sm`
Spin animation	`animate-spin` → `animate-pulse`

Anti-Generic Checklist

Avoid these AI clichés:

Inter/Roboto/Arial fonts
Purple gradients on white
Cookie-cutter card layouts
Same choices every generation

Remember: The codebase's design system is the source of truth. Search before creating. Reuse before reinventing.

What ships with it

Read from the repository

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