CtrlK
BlogDocsLog inGet started
Tessl Logo

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

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-engineered instruction body: an ordered SOP with real validation gates and stop conditions, executable commands and paths throughout, worked placement examples, a troubleshooting table, and detail correctly pushed into a real one-level-deep reference bundle. The only weaknesses are duplicated references across the SOP, Referencias, and Project invariants sections, which slightly inflate length and split navigation.

Suggestions

Consolidate the runtime-quality-checklist and playwright-expert mentions: keep the gate directive in the SOP step and reduce the Project invariants entry to a bare pointer, removing the duplicated detail lists (useEffect deps, stale closures, Clerk auth, etc.).

Merge the '## Referencias (lee solo cuando necesites)' and '## Project invariants (read on demand)' sections into a single annotated reference list so each file appears exactly once and navigation has one obvious entry point.

Consider trimming the long inline scaffold command path (e.g., 'run scripts/scaffold_feature.py from this skill's directory') and the parenthetical history notes (e.g., 'SSoT migrada 2026-05-04', 'origen S4 PI-1') that add tokens without guiding the current task.

DimensionReasoningScore

Conciseness

The body is dense, imperative, and strictly project-specific — it never explains concepts Claude already knows — but it duplicates content: the runtime-quality-checklist is detailed in both SOP step 7 ("Cubre: useEffect deps, stale closures, routing tenantId, mock anti-patterns, live verification gate") and the Project invariants section, and the playwright-expert pointer appears twice with overlapping parentheticals. This is minor trimmable duplication (anchor 4), not the unnecessary explanation or padding of anchor 3.

4 / 5

Actionability

Guidance is fully executable: exact scaffold command ("python .claude/skills/frontend-expert/scripts/scaffold_feature.py <nombre-en-kebab-case> --layer features --path frontend/src"), run commands ("npm run test:e2e:smoke", "docker compose up -d"), real file paths for every reference, a component template, and two worked examples that map a natural-language request to concrete file locations. Copy-paste ready and covering the common cases.

5 / 5

Workflow Clarity

The 8-step SOP is clearly sequenced with explicit validation checkpoints: TDD red gate ("El test debe fallar (RED)"), a stop-and-confirm scaffold gate ("Detente si el módulo no existe en INDEX — propón nombre y propósito, espera confirmación"), a mandatory pre-commit/pre-audit checklist, a live-verification gate before shipping, and an escalation fallback ("Si dev-app no disponible → escalate Chris staging gate manual"). This matches the anchor-5 feedback-loop pattern.

5 / 5

Progressive Disclosure

All referenced bundle files exist (14 reference docs, scaffold script, component template), references are one level deep and clearly signaled, and the body stays at overview altitude. However, navigation is split across three places — inline step links, the "## Referencias (lee solo cuando necesites)" section, and "## Project invariants (read on demand)" — with overlapping entries (e.g., runtime-quality-checklist, frontend-quality), which is the minor organization gap of anchor 4 rather than the easy single-entry navigation of anchor 5.

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.

An exemplary description: it names a specific stack and methodology, enumerates concrete capabilities, and provides both formal 'Use when' conditions and quoted colloquial trigger phrases in the user's language. Third-person voice and dense, informative phrasing mean every clause earns its place.

DimensionReasoningScore

Specificity

The description lists eight 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") with comprehensive coverage of the skill's scope, matching the top anchor. It is not a 4 because there are no noticeable coverage gaps in the action list.

5 / 5

Completeness

It explicitly answers 'what' ("Frontend specialist for Next.js 16 App Router + React 19 + Tailwind + Shadcn UI using Feature-Sliced Design Lite") and 'when' ("Use when: ..." plus "Triggers: ...") with concrete trigger phrases, matching the anchor-5 example verbatim in structure. Voice is third person, so no penalty applies.

5 / 5

Trigger Term Quality

Beyond the formal 'Use when' list, it quotes eight natural 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'"). Both task-level and colloquial phrasings are covered, so it exceeds the 'a few natural terms missing' level of anchor 4.

5 / 5

Distinctiveness Conflict Risk

The description pins a specific niche (Next.js 16 App Router, React 19, Tailwind, Shadcn UI, FSD-Lite) with distinct Spanish-language triggers, making it clearly distinguishable from adjacent frontend or styling skills. Conflict risk is minimal.

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/luana-method
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.