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.

1.07x

Quality

38%

Does it follow best practices?

Impact

100%

1.07x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./dist/plugins/design-system-starter/skills/design-system-starter/SKILL.md

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%

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%

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%

Repository: softaworks/agent-toolkit
Commit: 3027f20

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

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.