Name: frontend-expert
Rating: 68 (1 reviews)
Author: alpacapurpura

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

83%

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

The canonical home for this skill is frontend-expert in alpacapurpura/luana-method

Quality

Content

77%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-sequenced, actionable SOP with strong validation checkpoints and concrete commands. Its main defect is navigation: most reference links carry a frontend-expert/ prefix that does not exist in the bundle, so progressive disclosure is undermined despite good structure.

Suggestions

Fix the broken reference paths: replace the frontend-expert/ prefix on all links (e.g. frontend-expert/references/component-rules.md -> references/component-rules.md, frontend-expert/assets/templates/component.tsx -> assets/templates/component.tsx) so links resolve in the bundle.

De-duplicate the runtime-quality-checklist and playwright-expert mentions (each appears 2-3 times with overlapping descriptions) into a single canonical pointer to tighten conciseness.

Verify the scaffold command path .claude/skills/frontend-expert/scripts/scaffold_feature.py matches the actual install location, or reference scripts/scaffold_feature.py relative to the bundle.

Dimension	Reasoning	Score
Conciseness	The body is dense and assumes Claude's competence (no basic-concept padding), but runtime-quality-checklist is referenced three times and playwright-expert is described twice with overlapping text, leaving minor trimmable redundancy at anchor 4 rather than the fully-lean anchor 5.	4 / 5
Actionability	Provides concrete executable commands (scaffold_feature.py with flags, npm run test:e2e:smoke) and specific paths/rules, but the component template link frontend-expert/assets/templates/component.tsx does not resolve in the bundle, a minor gap keeping it at anchor 4.	4 / 5
Workflow Clarity	The numbered SOP 1-8 has explicit validation checkpoints (RED test, stop-and-confirm on unknown module, OBLIGATORIO runtime checklist before commit, live verification gate) and a RED->implement feedback loop, matching the anchor-5 example of clear sequence with validation steps and checklists.	5 / 5
Progressive Disclosure	Structure and one-level-deep references are well-signaled in a dedicated Referencias section, but most links use a frontend-expert/ path prefix that does not resolve in the actual bundle (real paths are references/*.md and assets/templates/component.tsx), making the navigation as written unreliable and fitting anchor 3.	3 / 5
	Total	16 / 20 Passed

Description

88%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 states a concrete stack and lists comprehensive specific actions, with explicit 'what' and 'when' guidance and natural trigger phrases. The only weaknesses are minor missing trigger synonyms and slight overlap risk with adjacent web skills.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete actions (responsive layouts, dynamic routes, Shadcn integration, React Query wiring, Server/Client boundaries) with comprehensive coverage, matching the anchor-5 example rather than the minor-gaps anchor 4.	5 / 5
Completeness	Explicitly answers both 'what' (frontend specialist for a named stack using FSD-Lite) and 'when' (concrete 'Use when' clauses and quoted trigger phrases), matching anchor 5.	5 / 5
Trigger Term Quality	Includes a dedicated 'Triggers' list of natural Spanish phrases users would say plus English 'Use when' clauses; good coverage but a few natural synonyms (e.g. bug reports, rendering failures) are missing, placing it at anchor 4 rather than comprehensive anchor 5.	4 / 5
Distinctiveness Conflict Risk	A pinned stack (Next.js 16 + React 19 + Tailwind + Shadcn + FSD-Lite) with distinct Spanish triggers gives a mostly-distinct niche, but 'frontend specialist' still has minor overlap risk with a generic web/styling skill, fitting anchor 4 rather than the minimal-conflict anchor 5.	4 / 5
	Total	18 / 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/ap_sales_agent
Path: .claude/skills/frontend-expert/SKILL.md
Commit: d31f7bc

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