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".
81
Quality
77%
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 with excellent trigger term coverage and complete 'what/when' guidance. The main weakness is that the capability descriptions are somewhat generic ('implementar componentes, páginas') rather than listing specific concrete actions. The description could also be more distinctive by emphasizing what makes this React/Next.js skill unique compared to other frontend frameworks.
Suggestions
Add more specific concrete actions like 'build server components, implement client-side routing, create custom hooks, configure API routes' to improve specificity
Consider narrowing generic terms like 'frontend' and 'integração' or adding qualifiers to reduce potential conflicts with other frontend framework skills
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Frontend Developer) and lists technologies (React/Next.js, Zustand, React Query, Skeleton loading), but actions are somewhat generic ('implementar componentes, páginas, integração com API') rather than listing multiple specific concrete actions like 'create forms, build navigation, implement data fetching patterns'. | 2 / 3 |
Completeness | Clearly answers both what (frontend implementation with specific tech stack) and when (explicit 'Use quando' clause listing scenarios plus 'Trigger em:' section with specific keywords). The explicit trigger guidance is comprehensive. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say including framework names ('React', 'Next.js'), common concepts ('componente', 'página', 'hook', 'formulário'), state management tools ('Zustand', 'React Query', 'TanStack Query'), and styling ('Tailwind', 'responsivo'). These are terms developers naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | While it specifies React/Next.js ecosystem clearly, terms like 'frontend', 'componente', 'integração' are broad and could overlap with other frontend skills (Vue, Angular, vanilla JS). The specific tech stack helps but generic frontend terms create some conflict risk. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
72%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a solid frontend skill with excellent actionable code examples covering React Query, Zustand, skeleton loading, and API integration patterns. The main weaknesses are moderate verbosity in governance/context sections and lack of explicit step-by-step implementation workflows with validation checkpoints. The progressive disclosure is well-handled with appropriate references to external documentation.
Suggestions
Add a clear numbered workflow for implementing a new feature (e.g., '1. Create types → 2. Add query keys → 3. Implement hook → 4. Build component → 5. Validate with Playwright') with explicit validation steps
Trim the governance section - a single line referencing GLOBAL.md is sufficient; Claude doesn't need the full list of policy files
Remove or condense the 'Quando Usar/Quando Nao Usar' sections - these are largely obvious from context and add token overhead
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill contains substantial code examples that are valuable, but includes some unnecessary explanations (e.g., 'O Frontend transforma design em codigo') and redundant sections. The governance references and MCP explanations add bulk that could be trimmed. | 2 / 3 |
Actionability | Excellent executable code examples throughout - query keys, hooks, skeleton components, API client with interceptors, and complete page implementation. All code is copy-paste ready with TypeScript types and real-world patterns. | 3 / 3 |
Workflow Clarity | The skill lists responsibilities and expected inputs/outputs, but lacks explicit step-by-step workflows with validation checkpoints. The 'Evidencia de Conclusao' section is vague, and there's no clear sequence for implementing a feature from start to finish with verification steps. | 2 / 3 |
Progressive Disclosure | Good structure with clear references to external docs (frontend-integration.md, ui-component-mcps.md) for extended content. The main file provides working examples while pointing to detailed guides for complete implementations. Navigation is clear and one-level deep. | 3 / 3 |
Total | 10 / 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
524725e
- 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.