design-frontend

Visual design system patterns for web UIs — layout, responsive, Tailwind tokens. Use when implementing visual designs, working with CSS/Tailwind, or building responsive layouts.

Install with Tessl CLI

npx tessl i github:ravnhq/ai-toolkit --skill design-frontend

What are skills?

0.98x

Quality

58%

Does it follow best practices?

Impact

96%

0.98x

Average score across 3 eval scenarios

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/design/design-frontend/SKILL.md

SKILL.md

Review

Evals

Evaluation results

100%

Reusable Component Library for a SaaS Dashboard

Design tokens and cn() utility

Criteria

Without context

With context

No hex colors

100%

No RGB colors

100%

No raw palette utilities

100%

Semantic token for background

100%

Semantic token for text

100%

Semantic token for destructive variant

100%

cn() used in Button

100%

cn() used in Card

100%

cn() correct implementation

100%

cn() imported from @/lib/utils

100%

Button accepts className prop

100%

Card accepts className prop

100%

Without context: $0.1863 · 44s · 13 turns · 17 in / 2,365 out tokens

With context: $0.2773 · 51s · 18 turns · 416 in / 2,831 out tokens

90%

-2%

Mobile-Friendly Product Showcase Page

Mobile-first responsive design and touch targets

Criteria

Without context

With context

Grid starts single column

100%

Grid expands at breakpoints

100%

No desktop-first overrides

100%

Flex/layout base is mobile

90%

100%

Nav links have adequate padding

100%

Action button touch target

100%

Nav links spaced apart

30%

No desktop-first text sizing

100%

Icon buttons use sufficient size

100%

Without context: $0.3459 · 1m 19s · 18 turns · 23 in / 5,295 out tokens

With context: $0.5728 · 1m 46s · 33 turns · 455 in / 6,188 out tokens

100%

Blog Platform Article Page Layout

Content width constraints and spacing scale

Criteria

Without context

With context

Page container max-width

100%

Page container centered

100%

Article content max-width

100%

No unconstrained full-width text

100%

No arbitrary spacing values

100%

No inline style spacing

100%

Spacing uses scale values

100%

No !important in classes

100%

Consistent section spacing

100%

Without context: $0.3815 · 1m 29s · 20 turns · 26 in / 5,754 out tokens

With context: $0.6561 · 2m 4s · 33 turns · 3,452 in / 7,765 out tokens

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

Table of Contents

Reusable Component Library for a SaaS Dashboard Mobile-Friendly Product Showcase Page Blog Platform Article Page Layout

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.