frontend-patterns

Patrones de desarrollo frontend para React, Next.js, gestión de estado, optimización de rendimiento y buenas prácticas de UI.

Quality

60%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./docs/es/skills/frontend-patterns/SKILL.md

Quality

Content

61%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 skill body is a well-structured, actionable catalog of concrete React/Next.js patterns with copy-paste-ready code across many topics. Its main weaknesses are conciseness (length and redundant usage examples) and the absence of any sequenced workflow or validation checkpoints, which fits a reference catalog more than a process skill.

Suggestions

Trim redundant 'Uso' example blocks and obvious inline comments (e.g. 'BIEN', 'Altura estimada de fila') that restate concepts Claude already knows.

Add a brief 'Cuándo Activar' decision flow or recommended sequence for applying the patterns, so the body reads as guidance rather than only a catalog.

For patterns with risky operations (e.g. forms submitting data, state mutations), include a small validation/verify checkpoint note.

Dimension	Reasoning	Score
Conciseness	The body is mostly code examples with little prose padding, but it is lengthy (~640 lines), repeats 'Uso' examples for every pattern, and includes inline comments explaining basics Claude already knows (e.g. 'BIEN', 'Altura estimada de fila').	3 / 5
Actionability	It provides numerous complete, copy-paste-ready TypeScript/React examples covering composition, hooks, state, memoization, lazy loading, virtualization, forms, error boundaries, animation, and accessibility, with only minor gaps (e.g. omitted imports/context in some snippets).	4 / 5
Workflow Clarity	The content is organized as a catalog of patterns rather than a sequenced multi-step workflow, and there are no validation or verification checkpoints; since none of the patterns involve destructive/batch operations the destructive cap does not apply, but the lack of sequencing keeps it at the midpoint.	3 / 5
Progressive Disclosure	The body is well-organized into clearly headed sections by category, is self-contained with no bundle files to reference, and keeps content inline appropriately; it could be slightly tighter but the structure navigates easily.	4 / 5
	Total	14 / 20 Passed

Description

58%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 covers a clear domain with several concrete capability areas, but it omits any explicit 'Use when...' trigger guidance and is entirely in Spanish, which limits natural trigger-term quality. It is mostly distinct but would benefit from an explicit when-to-activate clause and broader keyword coverage.

Suggestions

Add an explicit 'Use when...' clause naming concrete trigger situations (e.g. building React components, managing state, optimizing render performance).

Include more natural user-facing trigger terms and synonyms (component, hook, render, props, performance) so the description matches phrasing a user would actually say.

Consider an English gloss or bilingual phrasing to widen the natural trigger-term surface for activation.

Dimension	Reasoning	Score
Specificity	Lists several concrete domains and actions (React, Next.js, state management, performance optimization, UI best practices), but the actions are category-level rather than a granular enumeration of specific tasks, leaving minor coverage gaps.	4 / 5
Completeness	It clearly states 'what' the skill does, but there is no explicit 'Use when...' or 'when should Claude use it' clause; the trigger guidance is absent, which per the rubric caps completeness at 3.	3 / 5
Trigger Term Quality	Relevant keywords like React, Next.js, useState, Zustand are present but it lacks common natural user phrases (e.g. 'component', 'hook', 'render') and is entirely in Spanish, limiting the natural trigger terms a user might actually say.	3 / 5
Distinctiveness Conflict Risk	The frontend/React/Next.js niche is fairly specific and distinguishable from most other skills, with only minor overlap risk against a general web-development or CSS-focused skill.	4 / 5
	Total	14 / 20 Passed

Validation

87%

Warnings & errors only

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

Validation — 14 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (643 lines); consider splitting into references/ and linking	Warning
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	14 / 16 Passed

Repository: affaan-m/ECC
Path: docs/es/skills/frontend-patterns/SKILL.md
Commit: c70874f

Reviewed: 1 day ago

Table of Contents

Discovery Implementation Validation

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.