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.

Install with Tessl CLI

npx tessl i github:boisenoise/skills-collections --skill frontend-design

What are skills?

1.35x

Review — 71%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Evaluation — 96%

↑ 1.35x

Agent success when using this skill

Validation — 11 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

Evaluation results

100%

17%

Artisan Coffee Roaster Landing Page

CSS-only animation and typography in HTML

Criteria

Without context

With context

No banned fonts

100%

No Space Grotesk

100%

Distinctive font pairing

100%

CSS variables for theming

100%

No purple gradient on white

100%

CSS-only animations

100%

Staggered page-load animation

100%

Hover interactions

100%

Non-solid backgrounds

100%

Visual texture or depth effect

100%

Unexpected layout

100%

Dominant accent color strategy

100%

58%

Music Streaming Analytics Dashboard

React motion library and dashboard theming

Criteria

Without context

With context

Motion library usage

100%

No banned fonts

100%

No Space Grotesk

100%

Distinctive font pairing

100%

CSS variables for theming

100%

No purple gradient on white

100%

Non-solid backgrounds

100%

Hover interactions

100%

Staggered entrance animations

100%

Unexpected layout composition

100%

Visual texture or depth

100%

Dominant accent color

100%

81%

Architecture Firm Portfolio Page

Editorial layout and contextual visual details

Criteria

Without context

With context

Asymmetric or grid-breaking layout

Intentional spacing strategy

No banned fonts

100%

Characterful font choice

62%

100%

Font pairing

100%

Contextual texture effects

100%

Non-solid backgrounds

100%

CSS variables

100%

No purple gradient on white

100%

CSS-only animations

100%

Scroll or hover interaction

100%

Context-specific design

100%

25%

Underground Electronic Music Festival Site

Dark theme and atmospheric design

Criteria

Without context

With context

Dark theme

100%

No banned fonts

100%

No Space Grotesk

100%

Font pairing

100%

CSS variables

100%

Staggered animation-delay

100%

Atmospheric background effects

100%

Dramatic shadows or glow

100%

Unexpected layout element

100%

Hover interactions

100%

Dominant accent color

42%

100%

CSS-only animations

70%

100%

23%

Luxury Watchmaker Product Showcase

React refined aesthetics and complexity matching

Criteria

Without context

With context

Motion library usage

100%

No banned fonts

100%

Distinctive font pairing

100%

CSS variables

100%

No purple gradient on white

100%

Restrained animation approach

50%

100%

Generous negative space

100%

Non-solid backgrounds

100%

Hover interactions

100%

Staggered entrance

100%

Dominant accent color

100%

Context-specific design

100%

Evaluated: 19 days ago
Agent: Claude Code

Table of Contents

Artisan Coffee Roaster Landing Page Music Streaming Analytics Dashboard Architecture Firm Portfolio Page Underground Electronic Music Festival Site Luxury Watchmaker Product Showcase

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.