CtrlK
BlogDocsLog inGet started
Tessl Logo

react-ui

Opinionated constraints for building better interfaces with agents.

71

1.41x
Quality

55%

Does it follow best practices?

Impact

99%

1.41x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./tests/ext_conformance/artifacts/agents-mikeastock/skills/react-ui/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

86%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is an exemplary lean rulebook: highly specific, correctly assumes Claude's knowledge of Tailwind and React, and organized into scannable sections with concrete class names, library choices, and thresholds. Its only gaps are the absence of usage examples and any compliance-check/priority guidance for resolving rule conflicts.

DimensionReasoningScore

Conciseness

Every line is a terse, enforceable rule ('NEVER use `h-screen`, use `h-dvh`', 'MUST animate only compositor props') with zero padding and no explanation of concepts Claude already knows. This matches the 'lean and efficient; every token earns its place' anchor.

5 / 5

Actionability

The guidance is concrete throughout — specific classes (`text-balance`, `tabular-nums`, `size-x`), named libraries (`motion/react`, `cn` via clsx + tailwind-merge), a copy-paste CLI command (`npx shadcn@latest add <component>`), and numeric limits (`200ms`). It falls short of anchor 5 only because there are no worked usage examples covering common cases.

4 / 5

Workflow Clarity

No multi-step sequence is needed for this constraint-catalog skill, and the rules are unambiguously grouped (Stack, Components, Interaction, Animation, etc.), so it sits above anchor 3. It does not reach 5 because there is no guidance on rule priority or how to verify compliance, e.g. checking reduced-motion or keyboard behavior before finishing.

4 / 5

Progressive Disclosure

The body is a short, well-sectioned overview with no bulk that belongs in separate files and no nested or buried references (no bundle files exist to dereference; the only link, shadcn/ui, is a one-level external pointer). This matches the simple-skill pattern of well-organized sections scoring 5.

5 / 5

Total

18

/

20

Passed

Description

25%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is concise but far too vague: it names the UI domain without stating any concrete capability and gives no trigger guidance for when the skill should activate. It would routinely lose to more specific UI/frontend skills at selection time and fail to fire when users describe interface work in natural terms.

Suggestions

State concrete capabilities explicitly, e.g. 'Enforces Tailwind CSS defaults, shadcn/ui component usage, animation performance limits (transform/opacity only, <200ms), and accessibility constraints for React interfaces.'

Add a 'Use when...' clause naming natural trigger terms, e.g. 'Use when building or styling React UI, writing Tailwind classes, adding shadcn/ui components, or implementing animations and interactive components.'

Include distinguishing keywords (React, Tailwind, shadcn/ui, Radix, motion) so the skill is separable from generic design or dataviz skills.

DimensionReasoningScore

Specificity

The phrase 'building better interfaces' names the domain but offers only a minimal, generic action; no concrete capabilities (Tailwind, React, component constraints) are explicitly stated. It is above anchor 1 because a domain is clearly identified, but far below anchor 3, which requires 1-2 concrete actions.

2 / 5

Completeness

The description provides a vague 'what' ('opinionated constraints') and entirely omits any 'when' or 'Use when...' trigger guidance, which matches anchor 2 exactly. A 3 would require a clear 'what', but 'opinionated constraints for building better interfaces' is too abstract to count as clear.

2 / 5

Trigger Term Quality

Only the generic keywords 'interfaces' and 'agents' appear; the natural terms a user would actually say ('React', 'UI', 'Tailwind', 'component', 'frontend') are all missing. It has one or two generic keywords, matching anchor 2, and no technical-jargon-only problem that would justify a 1.

2 / 5

Distinctiveness Conflict Risk

'Building better interfaces with agents' is very broad and would overlap with virtually any UI, design, or frontend skill, matching anchor 2's high overlap risk. It is not a 1 only because it is anchored to interface-building rather than being fully generic.

2 / 5

Total

8

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
Dicklesworthstone/pi_agent_rust
Reviewed

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.