frontend-design-principles

Create polished, intentional frontend interfaces. Use this skill when building any UI — dashboards, admin panels, landing pages, marketing sites, or web applications. Routes to specialized guidance based on context.

1.31x

Quality

58%

Does it follow best practices?

Impact

88%

1.31x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./frontend-design-principles/SKILL.md

Evaluation results

91%

27%

Veterinary Clinic Operations Dashboard

Application dashboard CSS architecture and token design

Criteria

Without context

With context

oklch color usage

90%

Product-world token names

20%

90%

Intent questions documented

100%

Four required pre-generation outputs

70%

100%

Single depth strategy

20%

50%

Navigation grounding

100%

Four-level text hierarchy

62%

100%

Differentiated card layouts

100%

Single accent color

100%

Spacing base unit

75%

Subtle surface elevation

100%

No anti-patterns

60%

100%

98%

-2%

Artisanal Fermentation Studio Landing Page

Marketing landing page distinctive design and anti-slop

Criteria

Without context

With context

Pre-generation intent documented

100%

80%

Domain and signature documented

100%

No overused fonts

100%

Typographic range

100%

Non-standard spatial composition

100%

Atmospheric background

100%

Animation present

100%

No clichéd palette

100%

Non-predictable layout structure

100%

Rejected defaults documented

100%

77%

38%

Learning Platform Account Settings Panel

Settings panel with custom form controls and interactive states

Criteria

Without context

With context

No native select elements

100%

No native date input

100%

Custom select inline-flex

100%

Hover states

100%

Focus states

60%

100%

Disabled states

62%

Loading state

Empty state

75%

100%

Error state

Consistent icon library

40%

20%

Monospace numeric data

100%

Tabular nums

100%

Repository: joshuadavidthomas/agent-skills
Commit: 40067f1

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

Table of Contents

Veterinary Clinic Operations Dashboard Artisanal Fermentation Studio Landing Page Learning Platform Account Settings 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.