design-system

Produce production-grade UI designs using clear design tokens, layout rules, motion guidance, and accessibility checks for consistent, scalable frontend development.

1.31x

Quality

48%

Does it follow best practices?

Impact

92%

1.31x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

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

Evaluation results

100%

30%

Bootstrap Design Token System for a SaaS Component Library

Design token definition

Criteria

Without context

With context

Sans font family

100%

Mono font family

100%

Primary blue 500

100%

Error color

66%

100%

Text primary color

100%

Spacing base unit

100%

Spacing scale values

100%

Border radius full

100%

Shadow definitions

100%

Breakpoint sm

100%

Breakpoint lg

100%

Font size base

100%

Font weight semibold

100%

Line height normal

100%

Named token export

100%

No ad-hoc spacing

100%

76%

26%

Design Spec for a Project Management Tool Marketing Site

Page layout hierarchy and motion spec

Criteria

Without context

With context

Hero first

100%

Features second

Social proof third

100%

CTA fourth

Mobile-first flag

100%

Stack behavior

100%

Duration fast variable

100%

Duration normal variable

100%

Ease-in-out variable

100%

Ease-out variable

100%

Button hover lift

28%

100%

Button hover shadow

50%

100%

Page enter opacity

100%

Page enter translate

28%

100%

10%

Accessibility Review and Developer Handoff for a Healthcare Data Portal

Accessibility validation and design handoff

Criteria

Without context

With context

Normal text contrast ratio

100%

Large text contrast ratio

100%

UI component contrast ratio

100%

Focus indicator requirement

100%

Skip links requirement

100%

Semantic HTML requirement

100%

Alt text requirement

100%

Form labels requirement

100%

Min body text size

100%

Min line height

100%

Paragraph width limit

100%

Component breakdown table

100%

Spacing base unit documented

100%

Breakpoints documented

50%

100%

Design System Report format

100%

Repository: supercent-io/skills-template
Commit: c033769

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

Table of Contents

Bootstrap Design Token System for a SaaS Component Library Design Spec for a Project Management Tool Marketing Site Accessibility Review and Developer Handoff for a Healthcare Data Portal

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.