CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-dev-guidelines

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

68

Quality

82%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

65%

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

Highly actionable with solid executable code and a well-signaled reference structure, but undermined by heavy cross-section redundancy and by references to a resources/ directory that does not exist. Workflows lack validation checkpoints.

Suggestions

Create the missing resources/*.md files (component-patterns, data-fetching, file-organization, styling-guide, routing-guide, loading-and-error-states, performance, typescript-standards, common-patterns, complete-examples) or remove the dead links and the "modular structure with progressive loading" claim.

Dedupe the repeated guidance: collapse the Core Principles and Topic Guide summary bullets that restate the Quick Start checklists (lazy-load, SuspenseLoader, no-early-returns) into a single source of truth.

Add validation checkpoints to the component/feature checklists (e.g. "run tsc --noEmit", "verify the route loads without a Suspense waterfall") so the workflows include a verify-and-proceed feedback loop.

DimensionReasoningScore

Conciseness

Mostly project-specific convention reference (valuable, not concepts Claude already knows), but the same guidance is repeated across Quick Start checklists, Topic Guide summaries, Core Principles, and the Navigation Guide — e.g. "lazy load heavy", "SuspenseLoader", "no early returns" each appear 3-4 times — so it could be tightened considerably.

2 / 3

Actionability

Provides fully executable, copy-paste-ready material — the Modern Component Template, the createFileRoute routing example, MUI v7 Grid syntax, and the import cheatsheet are concrete and complete rather than pseudocode.

3 / 3

Workflow Clarity

The New Component and New Feature checklists list steps in sequence, but they are flat checkboxes with no validation checkpoints or error-recovery feedback loops (e.g. no "verify type-check passes before exporting" step).

2 / 3

Progressive Disclosure

References are well-signaled and one-level-deep with a Navigation Guide table, but every referenced resources/*.md file (10 of them) and the ../../vite.config.ts link point to paths that do not exist — the promised detail files are absent, so the disclosure is broken despite good organization.

2 / 3

Total

9

/

12

Passed

Description

100%

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

A strong description: third-person, concrete, with an explicit "Use when..." trigger clause covering natural task terms and a distinct modern-React niche. No fluff or over-claims.

DimensionReasoningScore

Specificity

Lists multiple concrete capabilities — "Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices" — naming a specific stack rather than vague abstractions.

3 / 3

Completeness

Explicitly answers both what ("Frontend development guidelines for React/TypeScript applications. Modern patterns including...") and when ("Use when creating components, pages, features, fetching data, styling, routing...") with an explicit trigger clause.

3 / 3

Trigger Term Quality

"Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code" provides natural terms a user would actually say, with good coverage of common task variations.

3 / 3

Distinctiveness Conflict Risk

The specific stack (React/TS, MUI v7, TanStack Router/Query, Suspense) carves a clear frontend niche unlikely to conflict with the related backend-dev-guidelines skill.

3 / 3

Total

12

/

12

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 21 missing, 1 suspicious

Warning

Total

15

/

16

Passed

Repository
mrgoonie/claudekit-skills
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.