CtrlK
BlogDocsLog inGet started
Tessl Logo

react-ui

Opinionated constraints for building better interfaces with agents.

Install with Tessl CLI

npx tessl i github:Dicklesworthstone/pi_agent_rust --skill react-ui
What are skills?

60

Does it follow best practices?

Validation for skill structure

SKILL.md
Review
Evals

Evaluation results

100%

58%

Analytics Dashboard Component

Data display and loading states

Criteria
Without context
With context

Skeleton loading

100%

100%

Empty state action

0%

100%

Tabular nums for data

0%

100%

text-balance headings

0%

100%

text-pretty body

0%

100%

cn utility for classes

0%

100%

Tailwind defaults first

100%

100%

size-x for square elements

0%

100%

No useEffect for render logic

100%

100%

Tailwind color tokens

100%

100%

Without context: $0.3118 · 1m 30s · 15 turns · 20 in / 5,812 out tokens

With context: $0.4723 · 2m 4s · 21 turns · 26 in / 7,379 out tokens

100%

8%

Account Settings Page

Accessible forms, destructive actions, layout

Criteria
Without context
With context

AlertDialog for delete

100%

100%

Inline errors

100%

100%

h-dvh not h-screen

100%

100%

safe-area-inset

100%

100%

Accessible form primitives

100%

100%

No manual focus/keyboard

100%

100%

aria-label on icon buttons

100%

100%

No paste prevention

100%

100%

cn utility

0%

100%

No gradients

100%

100%

Without context: $0.3613 · 1m 43s · 18 turns · 24 in / 6,479 out tokens

With context: $0.4189 · 1m 52s · 20 turns · 275 in / 6,637 out tokens

98%

22%

Notification Toast System

Animation constraints and performance

Criteria
Without context
With context

motion/react library

0%

100%

Compositor props only

100%

100%

No layout prop animation

100%

100%

prefers-reduced-motion

100%

100%

Entrance easing

100%

100%

No custom easing curves

100%

100%

Interaction feedback duration

0%

100%

No unsolicited animation

100%

75%

No backdrop-filter animation

100%

100%

No will-change misuse

100%

100%

Without context: $0.2636 · 1m 31s · 12 turns · 16 in / 6,000 out tokens

With context: $0.4500 · 1m 47s · 23 turns · 27 in / 6,533 out tokens

Evaluated
Agent
Claude Code

Table of Contents

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.