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

62%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Fix and improve this skill with Tessl

tessl review fix ./skills/04-frontend-integration/SKILL.md

Quality

Content

42%

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

The skill excels at actionability with high-quality, production-ready TypeScript code examples covering the full React/Next.js stack. However, it severely violates conciseness by inlining ~300+ lines of code that should live in referenced files, making it a token-heavy monolith. The workflow for implementing features is implicit rather than explicitly sequenced, and the progressive disclosure structure is inverted—the bulk content is inline while references point to files that should contain it.

Suggestions

Move the large code blocks (API client, skeleton components, hooks, providers) into `docs/skill-guides/frontend-integration.md` and keep only a brief pattern summary with 5-10 line snippets in SKILL.md, referencing the guide for full implementations.

Add an explicit step-by-step workflow for implementing a new feature/page (e.g., 1. Define query keys → 2. Create hook → 3. Build skeleton → 4. Implement page → 5. Verify all states → 6. Test responsiveness) with validation checkpoints.

Remove obvious guidance Claude already knows (e.g., 'Código limpo' section, explaining what DRY means, listing that error states should have error messages) to reduce token usage by ~30%.

Consolidate the governance/policy references into a single line or remove them, as listing 7+ policy files at the top consumes tokens without adding actionable guidance.

Dimension	Reasoning	Score
Conciseness	The skill is extremely verbose at ~400+ lines. It includes massive inline code blocks (full API client with refresh token logic, full skeleton component, full providers setup, full page example) that should be in referenced files. It also explains concepts Claude already knows (e.g., what error states are, what DRY means) and includes redundant sections like 'Código Limpo' with obvious advice.	1 / 3
Actionability	The skill provides fully executable, copy-paste ready TypeScript code for every major pattern: query keys, custom hooks, skeleton components, API client with interceptors, providers setup, and a complete page example. Code is typed, uses real imports, and is production-ready.	3 / 3
Workflow Clarity	The skill lists responsibilities and expected inputs/outputs, and the complete page example demonstrates the loading/error/empty state pattern well. However, there's no clear step-by-step workflow for implementing a new feature (e.g., 'first create the hook, then the skeleton, then the page'), no validation checkpoints, and no feedback loops for catching errors during development.	2 / 3
Progressive Disclosure	The skill references external files like `docs/skill-guides/frontend-integration.md` and `docs/skill-guides/ui-component-mcps.md` but no bundle files are provided to verify they exist. More critically, the SKILL.md itself is a monolithic wall containing hundreds of lines of inline code that should be in those referenced guide files instead. The references to global policies (6+ files) at the top add noise without clear navigation.	1 / 3
	Total	7 / 12 Passed

Description

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 explicit trigger guidance. Its main strengths are the comprehensive trigger term list and the clear 'Use quando' clause. The description could improve by listing more specific concrete actions beyond general categories and by tightening some overly broad trigger terms to reduce potential conflicts with other skills.

Suggestions

Add more specific concrete actions such as 'criar stores Zustand', 'configurar queries com React Query', 'implementar skeleton loading states', 'criar layouts responsivos com Tailwind' to increase specificity.

Consider narrowing broad triggers like 'integração' and 'formulário' by qualifying them (e.g., 'integração frontend com API', 'formulário React') to reduce conflict risk with backend or general-purpose skills.

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 routing, implement state stores'.	2 / 3
Completeness	Clearly answers both 'what' (implementing components, pages, API integration, state management, frontend code with specific tech stack) and 'when' (explicit 'Use quando' clause and a detailed 'Trigger em' list specifying exact keywords that should activate this skill).	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 concepts ('skeleton', 'loading', 'hook', 'frontend', 'mobile responsive', '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, broad triggers like 'frontend', 'hook', 'integração', and 'formulário' could overlap with other frontend or general web development skills. The combination of technologies helps narrow it, but individual trigger terms are fairly generic.	2 / 3
	Total	10 / 12 Passed

Validation

90%

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 — 10 / 11 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	10 / 11 Passed

Repository: felvieira/claude-skills-fv
Commit: 9e5d744

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