frontend-conventions

Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types.

Quality

72%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/frontend-conventions/SKILL.md

Quality

Content

87%

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

The body is a tight, highly actionable conventions reference with concrete commands and file paths and clean organization. Its only gap is workflow clarity around the API-generation flow, where the verification step is named but not presented as an explicit validation gate with a retry loop.

Suggestions

Frame the OpenAPI generation check as an explicit gate: 'Run `./scripts/check-openapi-generated.sh`; if it reports staleness, re-run `make generate-api` and re-check before committing.'

Add a one-line note that generated `schema.d.ts` must pass `make typecheck-web` before a PR is opened, giving the workflow a clear validation checkpoint.

Consider trimming the dependency/version list to the few entries that drive a decision, since build-tool versions date quickly and add tokens without much actionable value.

Dimension	Reasoning	Score
Conciseness	The body is dense and lean — terse rule bullets ("Never use `useEffect` for data fetching", "Never use `any` types") with no concept explanation or filler prose, respecting Claude's competence and earning every token.	3 / 3
Actionability	Provides copy-paste-ready commands (`make generate-api`, `make typecheck-web`, `make lint-web`) and concrete file paths (`web/src/api/generated/schema.d.ts`, `web/src/shared/lib/utils.ts`), giving fully executable guidance.	3 / 3
Workflow Clarity	The API type-generation flow is sequenced and even names a verification command (`./scripts/check-openapi-generated.sh`), but the check is not framed as an explicit gate with an error-recovery feedback loop, leaving validation implicit rather than a checkpoint.	2 / 3
Progressive Disclosure	No bundle files exist and the skill is self-contained and under the simple-skill threshold, with well-organized sections (Feature-Sliced Design, Data Fetching, State Management, etc.) and no nested references, so the structure earns the top anchor.	3 / 3
	Total	11 / 12 Passed

Description

57%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description clearly conveys what the skill governs and is well-scoped to the SkillHub frontend, but it omits explicit 'when to use' trigger guidance and relies on category-level rather than concrete-action phrasing. Adding a 'Use when...' clause with natural user terms would lift completeness and trigger quality.

Suggestions

Add an explicit trigger clause, e.g. 'Use when adding or modifying React/TypeScript frontend code, creating new pages/features/components, or changing API client calls.'

Replace category-level wording with concrete actions (e.g. 'Structure code into FSD layers, generate OpenAPI types, run typecheck/lint/tests') to raise specificity.

Include natural user-facing terms like 'frontend', 'React', 'TypeScript', 'API types', and 'SkillHub' so trigger matching aligns with what users actually say.

Dimension	Reasoning	Score
Specificity	Names the domain and several concrete areas ("architecture patterns", "testing rules", "Feature-Sliced Design", "OpenAPI types") but lists categories rather than multiple specific concrete actions like 'extract', 'fill', 'merge', so it falls short of the top anchor.	2 / 3
Completeness	The 'what' is clearly stated (conventions, architecture, testing rules, FSD, generated types) but there is no 'when' / 'Use when...' trigger guidance, so per the judging guideline completeness is capped at 2.	2 / 3
Trigger Term Quality	Contains relevant technical keywords ("React frontend", "Feature-Sliced Design", "OpenAPI types") but lacks the natural phrasings a user would say and offers no common variations, matching the 'some relevant keywords but missing common variations' anchor.	2 / 3
Distinctiveness Conflict Risk	Project-specific scope ("SkillHub React frontend") combined with distinctive tech (Feature-Sliced Design, generated OpenAPI types) gives it a clear niche unlikely to trigger for the wrong skill.	3 / 3
	Total	9 / 12 Passed

Validation

100%

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: iflytek/skillhub
Path: .agents/skills/frontend-conventions/SKILL.md
Commit: ac46ad5

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