frontend-expert

Frontend specialist for Next.js 16 App Router + React 19 + Tailwind + Shadcn UI using Feature-Sliced Design Lite (domain-grouped features/, not traditional layers). Use when: creating responsive layouts, building interactive forms/dashboards, implementing dynamic routes, integrating Shadcn UI components, refactoring UI architecture, configuring Tailwind theming, wiring React Query hooks to backend APIs, or solving Server/Client Component boundaries. Triggers: 'nueva funcionalidad', 'modifica el front', 'crea un componente', 'refactoriza la UI', 'implementa layout', 'configura rutas', 'integra con la API', 'arregla el estilo'.

Quality

86%

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

Quality

Content

81%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-structured, actionable SOP with explicit validation gates and verified one-level-deep references. Its main weaknesses are mild repetition of the same reference pointers across multiple sections and slightly non-literal reference link paths, which keep conciseness and progressive disclosure at 4 rather than 5.

Suggestions

Consolidate reference pointers: list each reference once (e.g. in the 'Referencias' section) and link to it from the workflow steps instead of re-listing the same files in 'Project invariants' and inline.

Make reference link paths literal relative to SKILL.md (e.g. 'references/fsd-cheatsheet.md' instead of 'frontend-expert/references/fsd-cheatsheet.md') so navigation resolves directly.

Inline the minimal component-creation snippet (or a one-line use of the component.tsx template) so the core creation step is copy-paste ready without opening the external file.

Dimension	Reasoning	Score
Conciseness	Dense and directive with no padding of concepts Claude already knows ('Server-First', 'cn()'), but the same pointers repeat across three sections (e.g. runtime-quality-checklist and playwright-expert each appear multiple times), so it sits above 3 and below the fully-lean 5.	4 / 5
Actionability	Provides executable commands ('python .claude/skills/frontend-expert/scripts/scaffold_feature.py ... --layer features --path frontend/src', 'cd frontend && npm run test:e2e:smoke') and concrete file destinations, with minor gaps since template instantiation details live in external references rather than inline.	4 / 5
Workflow Clarity	An 8-step sequenced SOP with explicit validation checkpoints ('Detente si el módulo no existe en INDEX — propón nombre y propósito, espera confirmación', 'OBLIGATORIO antes de commit Y antes de spawn auditor', live verification gate) and feedback loops (RED→implement, escalate path), matching the score-5 anchor.	5 / 5
Progressive Disclosure	Clear overview with well-signaled one-level-deep references, all of which resolve to real bundle files; however reference pointers are duplicated across 'Referencias', 'Project invariants', and inline steps, and link path prefixes are non-literal, so it sits below the cleanly-navigated 5 and above 3.	4 / 5
	Total	17 / 20 Passed

Description

92%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 strong, third-person description that clearly states the tech stack, multiple concrete capabilities, and explicit trigger guidance in both English ('Use when') and natural Spanish ('Triggers'). It is comprehensive and highly distinct, with only minor room to expand natural-term synonyms.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete capabilities — 'creating responsive layouts, building interactive forms/dashboards, implementing dynamic routes, integrating Shadcn UI components, refactoring UI architecture, configuring Tailwind theming, wiring React Query hooks' — with comprehensive coverage, matching the score-5 anchor rather than 4 (no meaningful gaps).	5 / 5
Completeness	Explicitly answers both 'what' ('Frontend specialist for Next.js 16 App Router + React 19 + Tailwind + Shadcn UI...') and 'when' (a concrete 'Use when:' list and a 'Triggers:' list), matching the score-5 anchor; the 'when' is fully explicit, so not 4.	5 / 5
Trigger Term Quality	Includes an explicit 'Use when:' clause plus a 'Triggers:' list of natural Spanish phrases ('nueva funcionalidad', 'crea un componente', 'configura rutas'), giving good keyword coverage, but stops short of exhaustive natural-term synonyms/extensions so it sits above 3 and below 5.	4 / 5
Distinctiveness Conflict Risk	Narrow, stack-specific niche (Next.js 16 + React 19 + Shadcn + FSD-Lite) with distinct triggers yields minimal overlap with other skills, fitting the score-5 anchor.	5 / 5
	Total	19 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
relative_links	Relative link issues: 12 missing, 12 deeper-than-1-level	Warning

	Total	15 / 16 Passed

Repository: alpacapurpura/luana-method
Path: claude/skills/frontend-expert/SKILL.md
Commit: caa08df

Reviewed: ~20 hours 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.