CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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'.

75

Quality

94%

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

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

SKILL.md
Quality
Evals
Security

Quality

Content

88%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 operational SOP: the workflow is explicit with validation gates and feedback loops, commands are copy-paste ready, and details are properly pushed to real bundle files. The only deductions are minor duplication between the two reference sections, an uninformative inline migration date, and link paths that do not exactly match the bundle layout.

Suggestions

Merge 'Referencias' and 'Project invariants' into a single reference section so each file (notably runtime-quality-checklist.md) is mandated in exactly one place, removing the duplicated OBLIGATORIO mentions.

Drop the migration date in the E2E section ('SSoT migrada 2026-05-04') and state the playwright-expert deferral once; it adds tokens without changing behavior.

Fix link paths to match the bundle layout (e.g. 'references/component-rules.md' instead of 'frontend-expert/references/component-rules.md') so links resolve directly from the skill directory.

DimensionReasoningScore

Conciseness

The body is dense and operational — no sections explain concepts Claude already knows, and the troubleshooting table and constraints are pure signal. It falls short of the lean anchor-5 because runtime-quality-checklist is mandated twice (step 7 and 'Project invariants'), the playwright-expert deferral is stated twice in the E2E section with an inline migration date ('SSoT migrada 2026-05-04') that earns nothing, which is the anchor-4 pattern of minor instances that could be trimmed.

4 / 5

Actionability

Fully executable guidance throughout: a copy-paste scaffold command ('python .claude/skills/frontend-expert/scripts/scaffold_feature.py <nombre-en-kebab-case> --layer features --path frontend/src'), concrete test/run commands ('cd frontend && npm run test:e2e:smoke', 'docker compose up -d'), explicit import alias rules ('./ui/MiComponente' vs '@/features/other'), and worked placement examples ('features/sales/components/lead-profile.tsx'). Matches the anchor-5 'copy-paste ready commands; specific examples cover the common cases'.

5 / 5

Workflow Clarity

The 8-step SOP is clearly sequenced with explicit validation checkpoints and feedback loops: TDD RED gate ('El test debe fallar (RED)'), a stop-and-confirm human checkpoint ('Detente si el módulo no existe en INDEX — propón nombre y propósito, espera confirmación'), a mandatory pre-commit quality checklist, and a live-verification gate before marking a PR shipped, plus a troubleshooting table for error recovery. This is the anchor-5 pattern of 'explicit validation steps; feedback loops; checklists'.

5 / 5

Progressive Disclosure

All links are one level deep, every referenced file exists in the bundle (references/, scripts/scaffold_feature.py, assets/templates/component.tsx), and reference sections state when to read each file ('lee solo cuando necesites'). It stays at anchor 4 rather than 5 because the references are split across two sections ('Referencias' and 'Project invariants') with overlapping entries (runtime-quality-checklist appears in both), and link paths carry a 'frontend-expert/' prefix that does not match the bundle's actual layout — minor organization gaps per the anchor-4 wording.

4 / 5

Total

18

/

20

Passed

Description

100%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 dense, specific, and complete: it names the exact stack and architecture, enumerates concrete capabilities, and provides explicit 'Use when' triggers plus natural user-phrase triggers in Spanish, matching the top anchors on all four dimensions. Third-person voice is used throughout and there is no padded fluff.

DimensionReasoningScore

Specificity

Names the exact stack ("Next.js 16 App Router + React 19 + Tailwind + Shadcn UI") and lists multiple concrete actions — "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" — covering the frontend workflow comprehensively. Anchor 4 ('several specific actions; minor gaps') is exceeded because no significant capability area of the stated scope is missing.

5 / 5

Completeness

Explicitly answers both 'what' ("Frontend specialist for Next.js 16 App Router + React 19 + Tailwind + Shadcn UI using Feature-Sliced Design Lite") and 'when' with a literal "Use when:" clause listing concrete scenarios plus a separate Triggers list. This mirrors the anchor-5 example structure exactly; the missing-when caps (3) and weak-when (4) anchors are clearly inapplicable.

5 / 5

Trigger Term Quality

Comprehensive natural-language coverage with synonyms in both the capability list and explicit trigger phrases users would actually say: 'nueva funcionalidad', 'modifica el front', 'crea un componente', 'refactoriza la UI', 'implementa layout', 'configura rutas', 'integra con la API', 'arregla el estilo'. These match the anchor-5 pattern of full synonym coverage; anchor 4 ('a few natural terms missing') does not apply since common user phrasings for this bilingual workflow are represented.

5 / 5

Distinctiveness Conflict Risk

A clear niche is staked out (specific framework versions plus a stated architectural methodology, "domain-grouped features/, not traditional layers") with triggers distinct from adjacent skills like playwright-expert (E2E) or backend skills. Only trivial overlap risk with a hypothetical generic React skill; matches the 'clear niche with distinct triggers' anchor rather than the 4 anchor's 'minor overlap risk with closely related skills'.

5 / 5

Total

20

/

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

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

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.