frontend-integration

Skill do Frontend Developer para implementação com React/Next.js, Zustand, React Query, e Skeleton loading. Use quando precisar implementar componentes, páginas, integração com API, gerenciamento de estado, ou qualquer código frontend. Trigger em: "React", "Next.js", "componente", "página", "Zustand", "React Query", "TanStack Query", "skeleton", "loading", "hook", "frontend", "integração", "mobile responsive", "Tailwind", "formulário", "roteamento".

Quality

78%

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 ./skills/04-frontend-integration/SKILL.md

Quality

Content

65%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.

Highly actionable with excellent copy-paste-ready code, but the body is long and inlines complete reference material that it simultaneously points to an external guide for, weakening both conciseness and progressive disclosure. Workflow guidance lacks explicit validation checkpoints.

Suggestions

Move the full api-client interceptor, useApi, and page examples into docs/skill-guides/frontend-integration.md and keep only a compact quick-start snippet plus the link in SKILL.md to resolve the inline/defer contradiction.

Tighten the 'Fontes' section to a one-line provenance note per library; drop star counts and gap-measurement prose that do not aid execution.

Add an explicit implementation checklist with a validation checkpoint (e.g. confirm skeleton/error/empty states render before marking a screen done) to lift workflow clarity.

Dimension	Reasoning	Score
Conciseness	Mostly efficient with concrete code, but the body inlines large complete code blocks and a verbose 'Fontes' section with star counts and gap-measurement rationale that competes with the context budget.	3 / 5
Actionability	Fully executable, copy-paste-ready TypeScript/React covering query keys, useApi hooks with optimistic updates, Skeleton component, Axios interceptor refresh logic, providers setup, and a complete page example.	5 / 5
Workflow Clarity	Responsibilities (1-6) and Quando Usar/Não Usar give a loose sequence, but there are no explicit validation checkpoints or feedback loops for the implementation process beyond the api-client's own retry logic.	3 / 5
Progressive Disclosure	References to docs/skill-guides/frontend-integration.md are one-level-deep and signaled, yet the very complete examples the guide is meant to hold (full api-client, useApi, page) are inlined here, contradicting the offload intent.	3 / 5
	Total	14 / 20 Passed

Description

91%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, trigger-rich description that clearly states capabilities and when to invoke the skill, with comprehensive natural-language keywords including synonyms. The only weakness is the broad 'qualquer código frontend' phrasing that slightly blurs distinctiveness.

Dimension	Reasoning	Score
Specificity	Names the domain (React/Next.js frontend) and several concrete actions — 'implementar componentes, páginas, integração com API, gerenciamento de estado' and 'Skeleton loading' — but the catch-all 'qualquer código frontend' leaves minor coverage gaps.	4 / 5
Completeness	Explicitly answers both 'what' (implementar componentes, páginas, integração com API, estado, skeleton) and 'when' ('Use quando precisar implementar...') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Comprehensive trigger list includes natural terms users say (React, Next.js, componente, página, hook, formulário) plus synonyms and library names (React Query/TanStack Query, Zustand, Tailwind).	5 / 5
Distinctiveness Conflict Risk	Clear frontend niche anchored by specific tech (Zustand, React Query/TanStack, Tailwind), but 'qualquer código frontend' and generic terms like 'componente' create minor overlap with adjacent skills.	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
skill_md_line_count	SKILL.md is long (600 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

Repository: felvieira/claude-skills-fv
Path: skills/04-frontend-integration/SKILL.md
Commit: f3492ef

Reviewed: 5 days 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.