CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

Quality

71%

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/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

63%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.

A well-organized, highly actionable pattern collection with executable code, useful CORRECT/WRONG contrasts, decision trees, and a verification checklist. The main defects are wholesale duplication in the Anti-Patterns and button sections plus a filler 'When to Use' sentence, and the lack of any progressive-disclosure structure in a ~290-line single file.

Suggestions

Delete the 'Anti-Patterns' section — it repeats the Loading/Error/Button wrong-right pairs already shown in their respective sections — and drop one of the two near-identical button examples to save roughly 60 tokens' worth of duplicated lines.

Remove or rewrite the filler 'When to Use' line ('This skill is applicable to execute the workflow or actions described in the overview.'), which adds no information beyond the frontmatter description.

Introduce one level of progressive disclosure: keep SKILL.md as an overview with the decision tree and checklist, and move the extended pattern catalogs (form submission, contextual empty states) into a references/ file clearly linked as 'See references/patterns.md'.

DimensionReasoningScore

Conciseness

The core guidance is lean and code-first with no explanations of concepts Claude already knows, but there is real padding: the ~40-line 'Anti-Patterns' section repeats the earlier Loading/Error/Button sections almost verbatim, 'Button Loading State' and 'Disable During Operations' show near-identical code, and 'When to Use' ('This skill is applicable to execute the workflow or actions described in the overview.') is a contentless filler sentence. Falls between anchor 2 (several padded sections) and anchor 3 (mostly efficient with some tightening possible); the padding is duplication of useful patterns rather than over-explanation, so 3.

3 / 5

Actionability

Concrete, mostly copy-paste-ready TSX with CORRECT/WRONG pairs, a fully typed ErrorState component, a decision tree, a skeleton-vs-spinner table, and a checklist. Not anchor 5 because of minor gaps: EmptyState, the toast utility, and the RTK-Query-style hooks (useGetItemsQuery, useCreateItemMutation) and formik helpers (values, errors, touched, handleChange) are referenced without definition, so examples are not fully self-contained.

4 / 5

Workflow Clarity

This is a patterns skill rather than a linear workflow, and its decision processes are clear: the loading-state decision tree sequences checks explicitly, the error-handling hierarchy is ordered by severity, and the 'Before completing any UI component' checklist acts as a verification checkpoint. No destructive/batch operations exist, so the validation cap does not apply; it matches anchor 4 (clear sequence with most checkpoints present) rather than anchor 5's explicit feedback-loop workflow.

4 / 5

Progressive Disclosure

A single ~290-line monolithic file with no bundle files and no reference pointers at all; the 'under 50 lines' exception for scoring 5 does not apply. The section structure is good, but content that belongs in reference files (e.g. the full pattern catalog, form submission example) is entirely inline with no navigation to external materials, matching anchor 3 ('content that should be separate is inline') more than anchor 4, which requires references to be mostly clear — none exist here.

3 / 5

Total

14

/

20

Passed

Description

66%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.

A solid description with both 'what' and an explicit 'Use when...' trigger, written in third person without fluff. Its weaknesses are verb-less capability phrasing (topic areas instead of concrete actions) and a broad 'when' clause that risks firing on any UI component work.

Suggestions

Replace topic-area phrasing with concrete verb-led actions, e.g. 'Implements loading, error, empty, and button states for React components with correct/incorrect code patterns' instead of 'Modern React UI patterns for loading states, error handling, and data fetching'.

Narrow the 'Use when' triggers to reduce conflict with general UI skills and add natural synonyms users say, e.g. 'Use when building React components that fetch data, show loading spinners/skeletons, handle empty states, or submit forms'.

Anchor distinctiveness by leading with the React/async-data niche rather than the generic 'building UI components' phrase that any frontend skill would also match.

DimensionReasoningScore

Specificity

Names the domain ('Modern React UI patterns') plus three specific sub-areas ('loading states, error handling, and data fetching'), but uses no concrete verb-led actions like 'extract text' or 'fill forms'. It sits between anchor 2 (domain named, generic actions) and anchor 3 (1-2 concrete actions); the three named pattern areas lift it to 3, but it is not the multi-action list of anchor 4.

3 / 5

Completeness

Both parts are present: a clear 'what' ('React UI patterns for loading states, error handling, and data fetching') and an explicit 'Use when...' clause ('building UI components, handling async data, or managing UI states'). Not anchor 5 because the 'when' triggers are broad and 'managing UI states' is near-circular rather than a concrete trigger phrase like 'mentions PDFs, forms, or document extraction'.

4 / 5

Trigger Term Quality

'building UI components', 'handling async data', 'loading states', 'error handling', 'data fetching' are phrases users would naturally say when they need this skill. Not anchor 5 because natural synonyms users actually say — 'spinner', 'skeleton', 'empty state', 'toast', 'form submission' — are missing.

4 / 5

Distinctiveness Conflict Risk

React scoping helps, but 'Use when building UI components' would fire on nearly any component-build task, overlapping general frontend/UI/form skills (the body itself lists formik-patterns and graphql-schema as related skills). Matches anchor 3 ('somewhat specific but could still overlap with similar skills') more than anchor 4, which requires only minor overlap risk with closely related skills.

3 / 5

Total

14

/

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.

Validation — 15 / 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

Path

plugins/AI-Agents-Safe-Coding-Skills/skills/react-ui-patterns/SKILL.md

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.