frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

1.03x

Quality

81%

Does it follow best practices?

Impact

88%

1.03x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Evaluation results

100%

Grainful — Artisan Bakery Landing Page

Distinctive HTML landing page design

Criteria

Without this skill

With this skill

No generic fonts

100%

Distinctive font pairing

100%

CSS custom properties for color

100%

Dominant color with sharp accent

100%

@keyframes animation

100%

Staggered animation-delay

100%

Unconventional spatial layout

100%

Atmospheric background

100%

No purple-on-white gradient

100%

Visual detail depth

100%

65%

Lumière Product Card Component

Animated luxury React product card with distinctive styling

Criteria

Without this skill

With this skill

Motion library import

motion component used

CSS custom properties defined

100%

CSS variables referenced

100%

No generic primary font

100%

Distinctive font pairing

100%

No purple gradient on white

100%

Hover animation

100%

Entrance animation

Background depth

100%

10%

Portfolio Website for Mara Veld — Industrial Designer

HTML/CSS/JS portfolio page with distinctive design

Criteria

Without this skill

With this skill

No generic fonts

100%

Display/body font pairing

100%

No Space Grotesk

100%

Atmospheric background

100%

Scroll-triggered animation

100%

Non-trivial hover effects

100%

Non-standard spatial composition

100%

No purple-on-white palette

100%

Non-uniform works grid

100%

Decorative depth detail

100%

Repository: revokslab/ShipFree
Path: .cursor/skills/frontend-design/SKILL.md
Commit: 7360d6a

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

Table of Contents

Grainful — Artisan Bakery Landing Page Lumière Product Card Component Portfolio Website for Mara Veld — Industrial Designer

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.