design-system-starter

Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.

Install with Tessl CLI

npx tessl i github:softaworks/agent-toolkit --skill design-system-starter

What are skills?

1.07x

Review — 38%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Evaluation — 100%

↑ 1.07x

Agent success when using this skill

Validation — 9 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

Evaluation results

100%

Design Token System for FinFlow

Design token architecture

Criteria

Without context

With context

W3C token format

100%

Primitive/semantic split

100%

Semantic color groups

100%

Gray primitive scale

100%

Inter sans font

100%

Fira Code mono font

100%

Spacing scale values

100%

Border radius scale

100%

Shadow scale

100%

Typography scale breadth

100%

Font weight tokens

100%

Architecture README

100%

Without context: $0.2934 · 1m 26s · 9 turns · 10 in / 5,738 out tokens

With context: $0.7507 · 2m 57s · 15 turns · 14 in / 12,206 out tokens

100%

11%

Core Component Library for Nimbus Dashboard

React component API design

Criteria

Without context

With context

Button variant prop

75%

100%

Button size prop

100%

Button loading state

75%

100%

Button icon prop

100%

Polymorphic as prop

100%

Sensible prop defaults

100%

Card compound pattern

30%

100%

cn() utility used

100%

React.forwardRef used

100%

Input variant prop

100%

Consistent naming pattern

100%

TypeScript interfaces

100%

Without context: $0.4455 · 2m 8s · 15 turns · 15 in / 8,492 out tokens

With context: $0.7609 · 2m 31s · 20 turns · 319 in / 9,780 out tokens

100%

Accessible Dark Mode for Prism UI

Accessibility and dark mode

Criteria

Without context

With context

Nav uses <nav> element

100%

Mobile menu aria-expanded

100%

Mobile menu uses <button>

100%

Skip link component

100%

Modal uses role=dialog

100%

Modal has aria-labelledby

100%

Modal ESC key handler

100%

Modal focus management

100%

Modal close button uses <button>

100%

CSS variables for theming

100%

System preference detection

100%

Theme persisted in localStorage

100%

data-theme on documentElement

100%

a11y report documents ARIA

100%

Without context: $0.6681 · 2m 12s · 19 turns · 68 in / 8,945 out tokens

With context: $0.9939 · 3m 36s · 21 turns · 21 in / 14,538 out tokens

Evaluated: 5 days ago
Agent: Claude Code
Model: Unknown

Table of Contents

Design Token System for FinFlow Core Component Library for Nimbus Dashboard Accessible Dark Mode for Prism UI

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.