frontend-design-principles

Use when building or reviewing frontend UI — dashboards, admin panels, landing pages, marketing sites, web apps. Drives domain-specific design decisions (typography, color world, layout, CSS token naming, depth and spacing systems) instead of generic AI defaults; routes to app.md (product/data UIs) or marketing.md (public/creative pages) by context.

1.21x

Quality

84%

Does it follow best practices?

Impact

92%

1.21x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Evaluation results

87%

17%

Roast Tracker Dashboard

Domain-specific CSS tokens and app design principles

Criteria

Without context

With context

Domain CSS tokens

40%

100%

oklch color definitions

100%

color-mix for derived colors

One depth strategy

100%

87%

Subtle elevation differences

85%

100%

4/8px spacing system

42%

57%

Symmetrical padding

80%

60%

Monospace + tabular-nums

100%

Four text hierarchy levels

100%

Navigation grounding

100%

Sidebar border not background

85%

100%

Color for meaning only

71%

100%

Domain vocabulary documented

100%

Rejected defaults documented

100%

10%

Independent Music Label Launch Site

Marketing landing page typography and atmosphere

Criteria

Without context

With context

Non-default display font

60%

100%

Dramatic size contrast

100%

Weight or case as design element

100%

Atmospheric background

70%

100%

Committed color position

100%

Dominant color with accent

100%

Non-predictable layout

62%

100%

No clichéd palette

100%

Entrance animation

100%

Font choice rationale

100%

Avoided anti-patterns named

100%

One accent rule

100%

No dramatic drop shadows

100%

91%

23%

Veterinary Practice Patient Record Panel

Custom form controls, interaction states, and dark mode

Criteria

Without context

With context

Custom date input

88%

100%

Custom select triggers

100%

inline-flex + nowrap on selects

42%

57%

All five interaction states

100%

light-dark() theming

100%

oklch colors

100%

One depth strategy

57%

85%

Consistent border radius

100%

83%

4/8px spacing system

57%

42%

Navigation grounding

100%

Monospace patient ID

50%

100%

Depth strategy documented

100%

Custom controls documented

100%

Repository: joshuadavidthomas/agent-skills
Commit: d20109a

Evaluated: 20 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Roast Tracker Dashboard Independent Music Label Launch Site Veterinary Practice Patient Record Panel

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.