Design frontend

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

🦖Curated Cursor AI agent skills, slash commands, MCP configs, subagents & rules for full-stack dev — React 19, Next.js 15, Supabase, Tailwind v4, TypeScript

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

6 stars6 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 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.

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, 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.