nextjs-frontend-skill

Build Next.js App Router pages, components with TypeScript and Tailwind

Install with Tessl CLI

npx tessl i github:WajahatAli3218664/Hackathon-02-mytodo --skill nextjs-frontend-skill

What are skills?

Overall
score

61%

Review — 49%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Validation — 10 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

Discovery

33%

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 identifies a clear technology stack (Next.js App Router, TypeScript, Tailwind) but is too terse to be effective for skill selection. It lacks explicit trigger guidance and doesn't enumerate specific capabilities beyond generic 'pages and components'. The absence of a 'Use when...' clause significantly limits Claude's ability to know when to select this skill.

Suggestions

Add a 'Use when...' clause with trigger terms like 'Next.js', 'App Router', 'React server components', 'frontend page', or 'web UI'

Expand specific capabilities to include actions like 'create layouts, implement server/client components, set up routing, style with Tailwind utilities'

Include natural user phrases and file extensions like '.tsx', 'React app', 'web application', 'frontend development'

Dimension	Reasoning	Score
Specificity	Names the domain (Next.js App Router) and some actions (build pages, components), but lacks comprehensive detail about specific capabilities like routing patterns, data fetching, or layout creation.	2 / 3
Completeness	Describes what it does (build pages/components) but completely lacks a 'Use when...' clause or any explicit trigger guidance for when Claude should select this skill.	1 / 3
Trigger Term Quality	Includes relevant keywords like 'Next.js', 'App Router', 'TypeScript', 'Tailwind', but missing common variations users might say like 'React', 'frontend', 'web app', 'UI components', or file extensions like '.tsx'.	2 / 3
Distinctiveness Conflict Risk	The combination of 'Next.js App Router' with TypeScript and Tailwind provides some specificity, but could overlap with general React skills or other frontend framework skills without clearer boundaries.	2 / 3
	Total	7 / 12 Passed

Implementation

65%

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

This skill provides solid, actionable code examples for Next.js development with good TypeScript typing and Tailwind patterns. However, it's somewhat verbose for a skill file, lacks validation/testing checkpoints in workflows, and could benefit from splitting detailed examples into referenced files while keeping the main skill leaner.

Suggestions

Add validation checkpoints to workflows, such as 'Run `npm run build` to verify no TypeScript errors' after creating components

Move detailed component examples (TaskList, TaskItem, etc.) to a separate EXAMPLES.md file and reference it from the main skill

Trim the project structure section - Claude can infer standard Next.js conventions; focus only on project-specific patterns

Add error recovery guidance for common issues like hydration mismatches or API connection failures

Dimension	Reasoning	Score
Conciseness	The skill is moderately efficient but includes some unnecessary verbosity like the extensive project structure tree and explanatory comments. Some sections could be tightened, though it avoids explaining basic concepts Claude already knows.	2 / 3
Actionability	Provides fully executable TypeScript/React code examples that are copy-paste ready. Includes complete component implementations, API client functions, and hooks with proper typing and error handling.	3 / 3
Workflow Clarity	Steps for creating pages and components are listed but lack explicit validation checkpoints. No guidance on testing, verifying builds, or handling common errors. The numbered steps for creating a page are clear but missing verification steps.	2 / 3
Progressive Disclosure	Content is reasonably structured with clear sections, but it's a monolithic document with no references to external files for advanced topics. The extensive examples could be split into separate reference files for better organization.	2 / 3
	Total	9 / 12 Passed

Validation

91%

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
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	10 / 11 Passed

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