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", "responsivo", "Tailwind", "formulário", "roteamento".
69
62%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/04-frontend-integration/SKILL.mdQuality
Discovery
82%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a solid skill description that clearly communicates its purpose and provides extensive trigger terms. Its main strengths are the explicit 'Use quando' and 'Trigger em' clauses with comprehensive keyword coverage. Its weaknesses are that the capability descriptions are somewhat categorical rather than listing specific concrete actions, and the broad scope ('qualquer código frontend') could create overlap with other frontend-related skills.
Suggestions
Replace generic action phrases like 'qualquer código frontend' with more specific concrete actions such as 'criar tabelas de dados, implementar paginação, configurar rotas dinâmicas, criar custom hooks'
Add distinguishing boundaries to reduce conflict risk, e.g., 'Não usar para: backend, mobile nativo, ou CSS puro sem React'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (frontend development) and several technologies (React/Next.js, Zustand, React Query, Skeleton loading), and mentions some actions like 'implementar componentes, páginas, integração com API, gerenciamento de estado', but these are somewhat generic categories rather than multiple specific concrete actions like 'create forms, build data tables, implement pagination'. | 2 / 3 |
Completeness | Clearly answers both 'what' (frontend implementation with React/Next.js, Zustand, React Query, Skeleton loading for components, pages, API integration, state management) and 'when' with an explicit 'Use quando' clause and a detailed 'Trigger em' list specifying exact keywords. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms users would say, including framework names ('React', 'Next.js', 'Zustand', 'React Query', 'TanStack Query'), component types ('componente', 'página', 'formulário'), and related concepts ('hook', 'frontend', 'responsivo', 'Tailwind', 'skeleton', 'loading', 'roteamento'). These are terms users would naturally use when requesting frontend work. | 3 / 3 |
Distinctiveness Conflict Risk | While the specific tech stack (React/Next.js, Zustand, React Query) provides some distinctiveness, terms like 'frontend', 'componente', 'integração', and 'formulário' are broad enough to potentially overlap with other frontend or general web development skills. The combination of technologies helps but 'qualquer código frontend' is very broad. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
42%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill provides highly actionable, production-quality code examples for a React/Next.js frontend stack, which is its main strength. However, it severely undermines its own progressive disclosure strategy by inlining ~300 lines of code that it explicitly says should be consulted in a separate guide file. The result is a bloated SKILL.md that wastes token budget on patterns Claude already knows (Axios interceptors, React Query hooks, skeleton components) rather than focusing on project-specific conventions and decision rules.
Suggestions
Move the complete code implementations (API client, useApi hooks, Skeleton component, Providers setup, full page example) to 'docs/skill-guides/frontend-integration.md' as already referenced, and keep only brief pattern summaries or key conventions in SKILL.md.
Add an explicit step-by-step workflow for implementing a new feature/page, with validation checkpoints (e.g., 'verify types match API contract → confirm skeleton renders → test all 5 error states → run lint/typecheck').
Remove explanations of concepts Claude already knows (e.g., what Zustand does, what React Query does, how Axios interceptors work) and focus on project-specific rules and constraints.
Consolidate the governance/policy references into a single line or small section rather than listing 8+ policy files upfront, which adds noise before the actionable content.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose with ~400 lines of inline code that should be in referenced files. It includes complete implementations of API clients, interceptors, skeleton components, providers, and full page examples — all of which are boilerplate patterns Claude already knows. The content contradicts its own reference to 'docs/skill-guides/frontend-integration.md' by duplicating extensive code inline. | 1 / 3 |
Actionability | The code examples are fully executable, copy-paste ready TypeScript with proper imports, types, and real-world patterns like token refresh queues, optimistic updates, and skeleton HOCs. Every major pattern has a complete, runnable implementation. | 3 / 3 |
Workflow Clarity | The skill lists responsibilities, entry/exit criteria, and handoff steps, but lacks explicit validation checkpoints in the development workflow. There's no step-by-step sequence for implementing a feature (e.g., 'create types → implement hook → build skeleton → wire up page → validate states'). The error states checklist is good but presented as a flat list rather than a validated workflow. | 2 / 3 |
Progressive Disclosure | Despite referencing 'docs/skill-guides/frontend-integration.md' for 'extensive snippets and complete examples,' the skill then proceeds to include all those extensive snippets inline anyway. The massive code blocks (API client, hooks, skeleton, providers, full page example) should be in the referenced guide file, with only concise patterns or summaries in the SKILL.md. References to GLOBAL.md and multiple policy files are mentioned but the content organization is a monolithic wall. | 1 / 3 |
Total | 7 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (538 lines); consider splitting into references/ and linking | Warning |
Total | 10 / 11 Passed | |
- Repository
- felvieira/claude-skills-fv
- Commit
d87ad31
- 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.