frontend-design

Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.

1.58x

Quality

61%

Does it follow best practices?

Impact

87%

1.58x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Fix and improve this skill with Tessl

tessl review fix ./prompts/frontend-design/SKILL.md

Evaluation results

81%

42%

SaaS Product Landing Page

Design workflow and color theme

Criteria

Without context

With context

ASCII wireframe present

100%

oklch colors used

100%

No bootstrap blue

100%

Semantic CSS variables

60%

100%

Dark mode considered

Approved font selection

50%

100%

Tailwind CDN import

Lucide icons used

100%

Real image services

100%

Subtle shadows only

25%

62%

Theme planning documented

100%

Semantic HTML structure

50%

100%

90%

34%

Analytics Dashboard with Interactive Components

Animation planning and component libraries

Criteria

Without context

With context

Animation micro-syntax

100%

Hover animation timing

50%

100%

Button press animation timing

100%

Entry animation timing

50%

100%

Flowbite CDN imported

Tailwind CDN imported

100%

Card hover lift effect

100%

Subtle card shadows

100%

Button touch targets

37%

100%

Button visual hierarchy

100%

oklch or modern colors

100%

No bootstrap blue

100%

92%

22%

Community Platform Signup and Navigation

Accessibility and component design

Criteria

Without context

With context

Semantic HTML elements

100%

Heading hierarchy

100%

Aria-labels on interactive elements

100%

Labels above inputs

100%

Visible focus states

100%

Form field spacing

100%

Sticky navigation

100%

Mobile hamburger menu

100%

Mobile-first media queries

25%

Desktop max-width container

57%

71%

Button touch target size

100%

Approved font from list

42%

100%

No bootstrap blue

100%

Repository: jdrhyne/agent-skills
Commit: 292843f

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

Table of Contents

SaaS Product Landing Page Analytics Dashboard with Interactive Components Community Platform Signup and Navigation

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.