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 excels in trigger term coverage and completeness, with explicit 'Use quando' and 'Trigger em' clauses. Its main weakness is that the capability descriptions are somewhat categorical rather than listing truly specific concrete actions, and some trigger terms are broad enough to potentially conflict with other frontend-related skills. The description is written in third person which is appropriate.
Suggestions
Add more specific concrete actions beyond generic categories, e.g., 'Cria componentes com Skeleton loading, configura stores Zustand, implementa queries com React Query/TanStack Query, configura rotas Next.js App Router'
Consider narrowing some of the broader trigger terms or adding qualifiers to reduce potential overlap with other frontend skills, e.g., specifying 'React/Next.js frontend' rather than just 'frontend'
| 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 concrete, specific actions like 'create pivot tables, generate charts'. | 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 ('skeleton', 'loading', 'hook', 'frontend', 'responsivo', 'Tailwind', '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 doesn't fully eliminate conflict risk. | 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 hundreds of lines of code that it explicitly says should be consulted in separate files. The document is far too verbose for a SKILL.md overview, treating it as a complete reference guide rather than a concise routing document.
Suggestions
Move the full code implementations (API client, skeleton components, providers, hooks) to 'docs/skill-guides/frontend-integration.md' as already referenced, and keep only a brief pattern summary with 5-10 line snippets in SKILL.md.
Add an explicit step-by-step workflow for implementing a new page/feature (e.g., '1. Create route → 2. Define query keys → 3. Implement hook → 4. Build skeleton → 5. Run tsc --noEmit → 6. Verify all states') with validation checkpoints.
Remove redundant sections—the 'Para exemplos completos, consultar frontend-integration.md' note appears twice while the examples are inlined anyway. Choose one approach: inline or reference.
Trim the error states section to a checklist rather than listing 7 states with a retry config snippet—Claude knows how to implement retry logic given the pattern names.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~400+ lines, with massive inline code blocks that should be in referenced files. It includes full implementations of API clients, interceptors, skeleton components, providers, and complete page examples—all of which are boilerplate patterns Claude already knows. The content contradicts its own reference to 'docs/skill-guides/frontend-integration.md' for 'exemplos completos' by inlining them anyway. | 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 concrete, complete implementation. | 3 / 3 |
Workflow Clarity | The skill lists responsibilities and expected inputs/outputs, and the complete example shows loading/error/empty states clearly. However, there's no explicit step-by-step workflow for implementing a new feature or page, no validation checkpoints (e.g., 'run type-check before handoff'), and the handoff section lacks verification steps before delivery. | 2 / 3 |
Progressive Disclosure | The skill references 'docs/skill-guides/frontend-integration.md' for complete examples but then inlines those very examples (full API client, stores, skeleton components, complete page). It also references multiple governance files (GLOBAL.md, policies/*) without clear signaling of what each contains. The content that should be in referenced files is dumped inline, creating a monolithic document. | 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
e9f6648
- 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.