Opinionated constraints for building better interfaces with agents.
Install with Tessl CLI
npx tessl i github:Dicklesworthstone/pi_agent_rust --skill react-ui60
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/skillValidation for skill structure
Data display and loading states
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
Accessible forms, destructive actions, layout
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
Animation constraints and performance
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
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.