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-3

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The content is highly actionable with complete, executable code, but it is verbose: it inlines extensive production code that the guidelines say belongs in a separate referenced file, and those referenced files are not present in the bundle. Workflow sequencing also lacks explicit validation checkpoints.

Suggestions

Move the large inline code blocks (useApi, api-client, Skeleton, providers, page) into the referenced docs/skill-guides/frontend-integration.md and keep SKILL.md a concise overview with a small representative snippet.

Provide an explicit implementation workflow with validation checkpoints (e.g. typecheck/lint/visual-check before marking a screen done) rather than only a responsibilities list and a conclusion checklist.

Add the referenced files (frontend-integration.md, ui-component-mcps.md, GLOBAL.md, policies/*.md) to the bundle so the one-level-deep references resolve.

Dimension	Reasoning	Score
Conciseness	The body embeds ~300 lines of complete production TypeScript (useApi.ts, api-client.ts, Skeleton.tsx, providers.tsx, users/page.tsx) plus a duplicate retry snippet, much of which could be tightened or moved to a referenced file; it is mostly efficient but could be trimmed.	2 / 3
Actionability	Provides fully executable, copy-paste-ready TypeScript for query keys, hooks, skeleton components, the Axios interceptor client, providers, and a full users page example.	3 / 3
Workflow Clarity	Responsibilities and handoff steps are listed and there is a 'Evidencia de Conclusao' checklist, but there is no sequenced implement→validate→fix→retry workflow with explicit validation checkpoints, leaving checkpoints implicit.	2 / 3
Progressive Disclosure	It repeatedly references docs/skill-guides/frontend-integration.md and policies files (one level deep, clearly signaled), but those referenced files are absent from the bundle and large code that should be split out is inlined in SKILL.md.	2 / 3
	Total	9 / 12 Passed

Description

92%Weight 40%Scale 1-3

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 concrete capabilities, provides an explicit 'Use quando' clause plus a natural trigger-term list, and answers both what and when. Its main weakness is a handful of generic triggers that could collide with other frontend-adjacent skills.

Suggestions

Narrow the generic trigger terms (e.g. 'loading', 'hook', 'componente') by pairing them with the React/Next.js context to reduce overlap with other web/UI skills.

Lead the description with the distinct niche (React/Next.js + server-state + skeleton loading) before listing triggers so the skill's identity is immediately clear.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete actions: 'implementar componentes, páginas, integração com API, gerenciamento de estado' plus skeleton loading, matching the anchor for multiple specific concrete actions.	3 / 3
Completeness	Clearly answers both what ('implementação com React/Next.js, Zustand, React Query, e Skeleton loading') and when (explicit 'Use quando precisar implementar...' plus a 'Trigger em:' trigger list).	3 / 3
Trigger Term Quality	Good coverage of natural terms users would say ('React', 'Next.js', 'componente', 'página', 'Zustand', 'React Query', 'skeleton', 'hook', 'frontend', 'Tailwind', 'formulário', 'roteamento'), with explicit 'Trigger em:' listing common variations.	3 / 3
Distinctiveness Conflict Risk	The React/Next.js/Zustand framing defines a niche, but several trigger terms ('loading', 'hook', 'componente', 'página', 'formulário') are generic and could overlap with adjacent web/UI skills, so it stays at 'somewhat specific but could still overlap'.	2 / 3
	Total	11 / 12 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 (551 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: 030ef22

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