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

81%

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

71%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 body with complete, executable code and a strong validation checkpoint for optimistic mutations. Weaker on conciseness and progressive disclosure: full implementations are inlined in SKILL.md while the same content is also pointed to in an external guide, creating redundancy and a heavy token load.

Suggestions

Move the full implementations (query-keys, useApi, Skeleton, api-client, providers, users page) into reference files under references/ and keep only a compact quick-start snippet plus pointers in SKILL.md, eliminating the duplicated 'consultar docs/skill-guides/frontend-integration.md' lines.

Convert the topical sections into a short ordered implementation workflow (scaffold providers → query-keys → hooks → component with states → checkpoint) so the sequence and its validation checkpoint are explicit rather than implied.

Verify the referenced paths (docs/skill-guides/frontend-integration.md, ui-component-mcps.md, GLOBAL.md, policies/*.md) exist relative to the skill bundle, or relocate them under references/ so progressive disclosure is one level deep and navigable.

Dimension	Reasoning	Score
Conciseness	The ~590-line body inlines seven large full implementations (query-keys, useApi, Skeleton, UserListSkeleton, api-client, providers, users page) while also repeating 'Para exemplos completos... consultar docs/skill-guides/frontend-integration.md' multiple times — actionable but voluminous and partly redundant with the referenced external guide.	3 / 5
Actionability	Provides fully executable, copy-paste-ready TypeScript/React covering the common cases — query-key factories, usePaginatedQuery/useDetailQuery/useApiMutation with optimistic updates, Skeleton variants, Axios interceptors with refresh queue, Providers config, and a complete users listing page.	5 / 5
Workflow Clarity	Includes an explicit validation feedback loop ('Checkpoint antes de considerar a integração pronta:... forçar o backend a retornar erro... e confirmar que a UI reverte') plus 'Evidencia de Conclusao' and 'Handoff para QA' checklists, but the body is organized by topic rather than as a single linear sequence with checkpoints at each step.	4 / 5
Progressive Disclosure	Has clear section headers and signaled references ('consultar docs/skill-guides/frontend-integration.md'), but those paths point outside the bundle (references/scripts/assets are empty and unverifiable) and large full implementations that belong in reference files are inlined in SKILL.md.	3 / 5
	Total	15 / 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 description: clear niche, comprehensive trigger terms including synonyms, and explicit what/when guidance. The only weakness is that the action verbs are repetitive ('implementar') rather than sharply distinct.

Dimension	Reasoning	Score
Specificity	Quotes 'implementação com React/Next.js, Zustand, React Query, e Skeleton loading' and 'implementar componentes, páginas, integração com API, gerenciamento de estado' — several concrete actions named, but the repeated verb 'implementar' is generic and coverage of the stack's actions is not maximally distinct.	4 / 5
Completeness	Explicitly answers 'what' ('Skill do Frontend Developer para implementação com...') and 'when' ('Use quando precisar implementar...' plus a concrete 'Trigger em:' phrase list), matching the anchor for clearly answering both with concrete trigger phrases.	5 / 5
Trigger Term Quality	The 'Trigger em:' list covers 'React', 'Next.js', 'Zustand', 'React Query', 'TanStack Query', 'skeleton', 'loading', 'hook', 'frontend', 'Tailwind', 'formulário', 'roteamento' — comprehensive natural terms including synonyms (React Query / TanStack Query).	5 / 5
Distinctiveness Conflict Risk	Stack-specific terms (Zustand, React Query, TanStack Query, Tailwind) give a clear niche, but broad triggers like 'loading', 'hook', 'componente', 'frontend' risk overlap with sibling UI/UX or web skills — mostly distinct with minor overlap risk.	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 (598 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: 74aa7c1

Reviewed: 3 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.