ui-design-system

UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.

1.12x

Quality

77%

Does it follow best practices?

Impact

98%

1.12x

Average score across 6 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./product-team/ui-design-system/SKILL.md

Evaluation results

100%

Design Token Generation for KidSpark Learning Platform

Design token generation via script with correct style preset and export formats

Criteria

Without context

With context

Script invocation documented

100%

Playful style selected

100%

Correct brand color passed

100%

JSON output generated

100%

CSS output generated

100%

Semantic color contrast keys

100%

Poppins font family present

100%

16px default border radius

100%

8pt spacing grid values

100%

All token categories present

100%

97%

17%

Button Component Documentation for Vanta Design System

Component documentation: atomic hierarchy, BEM naming, token-only styling, props interface, button size/variant specs

Criteria

Without context

With context

Atomic design levels named

100%

Button sm height=32px

100%

Button md height=40px

100%

Button lg height=48px

100%

Button paddingX values

100%

Primary variant tokens

50%

100%

Secondary variant tokens

100%

Ghost variant tokens

100%

BEM CSS class names

50%

70%

TypeScript props interface

83%

100%

No hardcoded color values

100%

45%

Responsive CSS for Horizon Marketing Landing Page

Responsive CSS: breakpoint values, fluid typography with clamp, mobile-first, responsive spacing

Criteria

Without context

With context

Mobile-first media queries

100%

480px breakpoint present

100%

768px breakpoint present

100%

1024px breakpoint present

100%

Fluid h1 clamp value

100%

Fluid h2 clamp value

100%

Fluid body clamp value

100%

Section spacing scale

33%

100%

CSS custom properties used

100%

Design Token Integration for a New SaaS Dashboard

Framework integration: Tailwind config and styled-components setup from generated tokens

Criteria

Without context

With context

Script invocation in generate.sh

100%

Classic style selected

100%

Correct brand color passed

100%

JSON output generated

100%

CSS output generated

100%

SCSS output generated

100%

Tailwind colors wired from tokens

100%

Tailwind fontFamily from tokens

100%

Tailwind borderRadius from tokens

100%

Tailwind boxShadow from tokens

100%

Styled theme colors path

100%

Styled theme spacing path

100%

ThemeProvider usage shown

100%

Helvetica font in classic output

100%

92%

Document the Input Component for a Design System

Component documentation template, file structure, and naming conventions

Criteria

Without context

With context

Correct file structure

100%

PascalCase component name

100%

README Usage section

100%

README Props table

100%

README Variants section

100%

README Accessibility section

100%

README Design Tokens Used section

100%

No hardcoded color values in styles

100%

Token naming convention

100%

TypeScript props interface

100%

BEM class naming

Barrel export in index.ts

100%

Color Accessibility Audit for a Healthcare App

WCAG accessibility audit: contrast ratios, semantic color contrast keys, touch targets

Criteria

Without context

With context

AA normal text ratio

100%

AA large text ratio

100%

AAA normal text ratio

100%

AAA large text ratio

100%

Large text definition

100%

Luminance formula present

100%

Contrast ratio formula present

100%

Semantic color contrast key rationale

100%

Touch target minimum size

100%

color-combinations.json present

100%

Contrast ratio numeric values

100%

Repository: alirezarezvani/claude-skills
Commit: 967fe01

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

Table of Contents

Design Token Generation for KidSpark Learning Platform Button Component Documentation for Vanta Design System Responsive CSS for Horizon Marketing Landing Page Design Token Integration for a New SaaS Dashboard Document the Input Component for a Design System Color Accessibility Audit for a Healthcare App

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.