CtrlK
BlogDocsLog inGet started
Tessl Logo

react-ui-patterns

Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.

61

Quality

72%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/react-ui-patterns/SKILL.md

The canonical home for this skill is react-ui-patterns in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

75%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 content is highly actionable with comprehensive, executable code examples and clear decision guidance, and it is well-structured for a single-file patterns reference. The main weakness is redundancy from the Anti-Patterns section repeating earlier examples.

Suggestions

Consolidate the 'Anti-Patterns' section into inline callouts on the existing examples to remove the repeated loading, error, and button WRONG/CORRECT blocks.

Replace the generic boilerplate 'When to Use' line with concrete triggers that mirror the description's 'Use when' guidance.

DimensionReasoningScore

Conciseness

The body assumes Claude's competence without explaining basic concepts, but the 'Anti-Patterns' section restates the same loading, error, and button WRONG/CORRECT code blocks already shown earlier, adding redundant padding.

3 / 5

Actionability

Multiple copy-paste-ready TypeScript/TSX examples cover the common React UI cases (loading, error, empty, mutation, form submission) alongside a decision tree, table, and checklist.

5 / 5

Workflow Clarity

The Loading State Decision Tree and end-of-skill Checklist give a clear sequenced flow with a verification checkpoint, but no explicit validate-fix-retry feedback loop exists (none is strictly required for this non-destructive UI patterns skill).

4 / 5

Progressive Disclosure

The single file is well-organized with clear section headers, tables, and a decision tree, but at ~290 lines with a redundant Anti-Patterns section it does not qualify for the simple-skill top band.

4 / 5

Total

16

/

20

Passed

Description

70%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 cleanly states what the skill covers and provides an explicit 'Use when' trigger clause with natural keywords. It is held back from the top band by category-level rather than action-level specificity and slightly generic trigger phrasing.

Suggestions

Lead with concrete action verbs (e.g., 'Render loading, error, and empty states; manage async data fetching') instead of naming only categories.

Add user-natural synonyms to the trigger clause such as 'loading spinners', 'error states', or 'fetching data' to improve keyword coverage.

Tighten the 'when' clause with specific trigger phrases that distinguish this skill from generic frontend skills.

DimensionReasoningScore

Specificity

Names the domain and three sub-areas ('loading states, error handling, and data fetching') but describes categories rather than concrete action verbs like 'extract' or 'fill', so it does not reach comprehensive concrete-action coverage.

3 / 5

Completeness

Both 'what' (React UI patterns for loading/error/fetching) and 'when' (Use when building UI components, handling async data, or managing UI states) are present, but the 'when' is somewhat generic rather than sharply concrete.

4 / 5

Trigger Term Quality

The 'Use when building UI components, handling async data, or managing UI states' clause offers good natural keyword coverage, though it omits common synonyms like 'loading spinners' or 'error states'.

4 / 5

Distinctiveness Conflict Risk

The React-specific framing carves a clear niche with minimal conflict risk, though broad phrasing like 'managing UI states' could overlap with related frontend skills.

4 / 5

Total

15

/

20

Passed

Validation

93%

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

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
administrakt0r/AI-Agents-Safe-Coding-Skills
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.