CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend

React/Redux frontend development patterns for RedisInsight UI: component folder structure, styled-components, hooks, named exports, barrel files, layout components, and theme usage. Use when editing any file under redisinsight/ui/**, writing or modifying React components, Redux slices, styled-components, custom hooks, or when the user mentions UI, frontend, React, Redux, or styled-components.

63

Quality

74%

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 ./.ai/skills/frontend/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%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 a well-organized, actionable pattern catalog with strong good/bad code contrasts, but it is over-long for a SKILL.md due to repeated layout/styled-component examples and lacks external reference files or migration verification steps. Splitting bulk material into references and adding a verify step for migrations would raise both conciseness and workflow clarity.

Suggestions

Dedupe the layout-components guidance: merge 'Use Layout Components Instead of div' and 'Use Layout Components (Row/Col/FlexGroup) Instead of div' and keep a single FlexGroup example instead of three.

Move the detailed Redux Toolkit slice/thunk/selector patterns and the Elastic→Redis UI migration guidelines into reference files (e.g. references/redux.md, references/migration.md) and link to them one level deep.

Add a short verification checklist for styled-components and UI-library migrations (e.g. confirm no new EUI/@redis-ui direct imports, no SCSS modules added, types resolve) so batch migrations have an explicit checkpoint.

DimensionReasoningScore

Conciseness

Mostly efficient and example-driven, but it repeats the same layout/styled-components guidance across several near-duplicate sections ('Use Layout Components Instead of div' vs 'Use Layout Components (Row/Col/FlexGroup) Instead of div', and the FlexGroup example recurs three times), which is padding.

3 / 5

Actionability

Provides mostly executable, copy-paste-ready code examples with explicit good/bad contrasts for imports, layout props, theme spacing, and semantic colors, with only minor gaps such as a couple of pseudocode-style type-check comments.

4 / 5

Workflow Clarity

This is a patterns/reference skill rather than a multi-step process, so the simple-skill exception applies; however it involves batch-style changes (migrating SCSS/EUI to styled-components and Redis UI) with no validation or verification checkpoint for confirming a migration is complete, which caps clarity at 3.

3 / 5

Progressive Disclosure

No bundle files (references/, scripts/, assets/) exist, so all content lives inline in a single ~440-line file; section headers provide structure, but material that could be split out (e.g. full Redux Toolkit patterns, migration guidelines) is inlined rather than referenced one level deep.

3 / 5

Total

13

/

20

Passed

Description

91%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 strong: it explicitly states what the skill covers and gives concrete, natural trigger conditions anchored to a specific codebase path. It is concise, third-person, and uses real user-facing terms with minimal conflict risk.

DimensionReasoningScore

Specificity

Names the domain and lists several concrete capability areas ('component folder structure, styled-components, hooks, named exports, barrel files, layout components, and theme usage'), with only minor gaps in coverage.

4 / 5

Completeness

Explicitly answers both 'what' (the enumerated patterns) and 'when' with a concrete 'Use when editing any file under redisinsight/ui/**... or when the user mentions UI, frontend, React, Redux, or styled-components' clause.

5 / 5

Trigger Term Quality

Comprehensive natural keyword coverage including synonyms and concrete triggers ('UI, frontend, React, Redux, or styled-components') plus a glob path 'redisinsight/ui/**'.

5 / 5

Distinctiveness Conflict Risk

Tightly scoped to the RedisInsight UI codebase with a specific path and framework stack, leaving only minor overlap risk with a generic React/general-frontend skill.

4 / 5

Total

18

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
redis/RedisInsight
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.