frontend-design

Design and implement distinctive, production-ready frontend interfaces with strong aesthetic direction. Use when asked to create or restyle web pages, components, or applications (HTML/CSS/JS, React, Vue, etc.).

0.98x

Quality

83%

Does it follow best practices?

Impact

95%

0.98x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Evaluation results

96%

Creative Developer Portfolio Showcase

Portfolio showcase grid with motion restraint and inline visuals

Criteria

Without this skill

With this skill

prefers-reduced-motion

100%

Focused motion

70%

60%

No external image URLs

100%

SVG or CSS visuals

100%

Color CSS variables

100%

Spacing CSS variables

100%

Shape/shadow CSS variables

100%

Semantic HTML structure

100%

Visible focus styles

100%

Grid/Flex layout

100%

Typographic hierarchy

100%

Distinct shapes

100%

Non-default font

100%

Landing Page: Drift Travel Journal

Underspecified landing page design with aesthetic direction

Criteria

Without this skill

With this skill

Assumptions documented

100%

Named aesthetic direction

100%

Avoids generic AI aesthetics

100%

No default display fonts

100%

Distinct body font

75%

100%

CSS color variables

100%

CSS spacing/radii/shadow tokens

100%

Strong color palette

100%

No external images

100%

Layout originality

88%

100%

CSS Grid or Flexbox used

100%

90%

-10%

Meridian Magazine — Feature Article Page

Editorial article page with distinctive typography and composition

The agent wrote 153 files outside the evaluated workspace (With this skill)

These are not visible to scoring or included in the download.

/home/agent/pkg/libasound2t64_1.2.15.3-1ubuntu1.1_amd64.deb

/home/agent/pkg/libatk-bridge2.0-0t64_2.60.4-0ubuntu0.1_amd64.deb

/home/agent/pkg/libatk1.0-0t64_2.60.4-0ubuntu0.1_amd64.deb

/home/agent/pkg/libatspi2.0-0t64_2.60.4-0ubuntu0.1_amd64.deb

/home/agent/pkg/libcairo2_1.18.4-3_amd64.deb

Criteria

Without this skill

With this skill

No default fonts

100%

Dual font system

100%

Typographic hierarchy

100%

Color CSS variables

100%

Spacing or sizing CSS variables

100%

Responsive breakpoints

100%

Fluid units in typography or layout

100%

Asymmetric or grid-breaking composition

100%

Named aesthetic direction

100%

Texture or depth technique

100%

Layout strategy comment

100%

Pull quote visual differentiation

100%

Repository: mitsuhiko/agent-stuff
Path: skills/frontend-design/SKILL.md
Commit: 13bc8f8

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

Table of Contents

Landing Page: Drift Travel Journal Creative Developer Portfolio Showcase Meridian Magazine — Feature Article Page

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.