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. Generates creative, polished code that avoids generic AI aesthetics.

1.34x

Quality

82%

Does it follow best practices?

Impact

97%

1.34x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Evaluation results

100%

37%

Artisan Coffee Roasters — Brand Website Hero

Typography and color system choices

Criteria

Baseline

With context

No banned fonts

100%

OKLCH colors

100%

No pure black or white

37%

100%

No AI color palette

100%

No gradient text

100%

Fluid type with clamp

100%

Tinted neutrals

100%

No identical card grid

50%

100%

No large rounded icons above headings

100%

Asymmetry or varied layout

100%

Varied spacing

100%

No generic drop shadows

100%

97%

34%

Project Tracker — Animated Dashboard Page

Animation and layout antipattern avoidance

Criteria

Baseline

With context

No hero metric template

100%

No identical card grid

62%

No nested cards

100%

Transform/opacity only animation

100%

Exponential easing

30%

100%

No bounce/elastic easing

100%

grid-template-rows height animation

100%

Reduced motion support

100%

Staggered animation with CSS custom properties

100%

No glassmorphism

100%

Varied spacing

100%

95%

Workspace Invite — Team Member Onboarding Form

Accessible form interactions and UX writing

Criteria

Baseline

With context

No generic button label

100%

Descriptive error message

100%

Blur validation

100%

Error below field with aria-describedby

100%

Visible labels (not placeholder-only)

100%

focus-visible keyboard ring

50%

Container query responsiveness

100%

Meaningful empty state

100%

Button hierarchy

100%

No inline validation on keystroke

100%

No humor in error state

100%

Pointer media query

100%

Repository: holaboss-ai/holaOS
Path: runtime/harnesses/src/embedded-skills/frontend-design/SKILL.md
Commit: 74c7b6f

Evaluated: 5 months ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Artisan Coffee Roasters — Brand Website Hero Project Tracker — Animated Dashboard Page Workspace Invite — Team Member Onboarding Form

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.