CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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

64

Quality

81%

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

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

The content is highly actionable with executable code, concrete commands, and one exemplary validation feedback loop, but it is noticeably verbose: extensive standard-library implementations are inlined in SKILL.md despite the skill's own instruction to keep them in docs/skill-guides/frontend-integration.md, and no bundle files exist to verify the referenced paths. Aligning the body with its own progressive-disclosure guidance would fix both the conciseness and structure weaknesses at once.

Suggestions

Move the full implementations (query-keys.ts, useApi.ts, api-client.ts interceptors, Skeleton components, Providers, and the users page example) into docs/skill-guides/frontend-integration.md and keep only the project-specific conventions and one short representative snippet in SKILL.md.

Deduplicate the repeated pointer to docs/skill-guides/frontend-integration.md (it appears three times: Governança Global, Stack e Estrutura, and MCP de Browser) into a single clearly-labeled reference section.

For progressive disclosure, either ship the referenced files (docs/skill-guides/*, policies/*) in the bundle so the paths are verifiable, or remove references to files that do not exist alongside the skill.

DimensionReasoningScore

Conciseness

The body inlines ~300 lines of complete, standard implementations Claude already knows (query-key factory, generic useQuery/useMutation wrappers, the full axios 401-refresh interceptor queue, a whole Skeleton component library, a Providers setup, and a full page example), while its own governance section states "Para snippets extensos e exemplos completos, consultar `docs/skill-guides/frontend-integration.md` apenas quando a tarefa exigir" — a direct self-contradiction, matching the anchor of noticeably verbose with several padded sections. It is above anchor 1 because the prose itself is terse and no elementary concepts are explained, but several sections of inlined boilerplate should be trimmed or moved out.

2 / 5

Actionability

Guidance is fully executable and copy-paste ready: complete TypeScript for hooks, interceptors, and skeletons; a concrete install command ("npx shadcn@latest add @extend/pdf-viewer"); a brownies usage example with the exact non-obvious API (getter/setter direto, subscribe/unsubscribe); and a filled-in dispatch template for skill 17. The rollback checkpoint ("forçar o backend a retornar erro... e confirmar que a UI reverte") even specifies the failure diagnosis, matching the anchor for fully executable coverage of common cases.

5 / 5

Workflow Clarity

There is a clear progression (Quando Usar → Responsabilidades → Padrões → Evidência de Conclusão → Handoff para QA) and an explicit validation feedback loop for optimistic mutations that includes error-forcing, expected behavior, diagnosis of the wrong-query-key failure mode, and re-test instructions. It falls short of anchor 5 because most sections are parallel pattern catalogs rather than a sequenced process, so checkpoints exist only for the optimistic-update case and the handoff, leaving minor validation gaps elsewhere.

4 / 5

Progressive Disclosure

Section headers are clear and external references are explicitly signaled ("consultar `docs/skill-guides/frontend-integration.md` apenas quando a tarefa exigir", referenced three times), but the bundle contains no references/, scripts/, or assets/ directories, so none of the referenced paths (docs/skill-guides/*, policies/*, GLOBAL.md) can be verified, and large implementations that the skill itself says belong in the guide file are inlined instead. This matches the anchor of some structure with content that should be separate left inline; it is above anchor 2 because navigation and signaling are genuinely good, and below anchor 4 because the split between SKILL.md and the guide is not actually practiced.

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 description that explicitly states capabilities, stack, and use conditions with a comprehensive natural-language trigger list including synonyms. The only weaknesses are the breadth claim "qualquer código frontend" and a few generic trigger terms that slightly raise conflict risk with adjacent skills.

DimensionReasoningScore

Specificity

The description lists several concrete actions ("implementar componentes, páginas, integração com API, gerenciamento de estado") tied to a named stack ("React/Next.js, Zustand, React Query, e Skeleton loading"), but the catch-all "qualquer código frontend" leaves minor gaps in coverage, matching anchor 4 rather than the comprehensive anchor 5. It is not anchor 3 because more than 1-2 concrete actions are explicitly stated, and it uses third-person/neutral voice so no person penalty applies.

4 / 5

Completeness

It explicitly answers both what ("Skill do Frontend Developer para implementação com React/Next.js, Zustand, React Query, e Skeleton loading") and when ("Use quando precisar implementar componentes, páginas, integração com API...") with concrete trigger phrases. This mirrors the anchor-5 example structure exactly; the explicit 'Use quando...' clause rules out the anchor-4 reading where 'when' could be more specific.

5 / 5

Trigger Term Quality

The trigger list ("React", "Next.js", "componente", "página", "Zustand", "React Query", "TanStack Query", "skeleton", "loading", "hook", "frontend", "integração", "mobile responsive", "Tailwind", "formulário", "roteamento") covers natural user vocabulary comprehensively, including the synonym pair React Query/TanStack Query. This matches the anchor-5 example's coverage of natural terms and synonyms; nothing common is missing.

5 / 5

Distinctiveness Conflict Risk

The named stack (React/Next.js + Zustand + React Query) carves a clear niche, but broad triggers like "frontend", "loading", "hook", and "qualquer código frontend" create minor overlap risk with adjacent skills (e.g., general UI/design or Tailwind-focused skills), matching anchor 4. It is above anchor 3 because the core triggers are strongly skill-specific, and below anchor 5 because the broad catch-all phrase invites conflicts.

4 / 5

Total

18

/

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

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

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.