CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

migration-migrate-component

Use when a component needs migration to the target architecture or framework version.

Quality

67%

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

Fix and improve this skill with Tessl

tessl review fix ./packs/nextjs/skills/migration-migrate-component/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

86%Weight 40%Scale 1-5

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

The body is an exemplary lean instruction sheet: precise migration mappings, a well-sequenced 10-step workflow with executable validation commands, and a clearly signaled one-level reference to the architecture doc. The only meaningful improvement would be a brief before/after code example of a converted component and an explicit fix-and-re-run loop after validation. No bundle files (references/, scripts/, assets/) exist, and the inlined content is appropriately sized for SKILL.md.

DimensionReasoningScore

Conciseness

The body is lean and directive throughout — e.g. '`pages/xxx.tsx` -> `app/xxx/page.tsx`', '`getStaticPaths` -> `generateStaticParams()`', 'error.tsx -- error boundary (`use client` required)' — with zero padding and no explanation of concepts Claude already knows (no 'what is App Router' prose). It assumes Claude's competence and every token earns its place, matching the anchor 'Lean and efficient; assumes Claude's competence'.

5 / 5

Actionability

Concrete, executable guidance dominates: exact route/file mappings, import-level transformations ('`useRouter` from `next/router` -> `useRouter` + `usePathname` + `useSearchParams` from `next/navigation`'), and runnable validation commands (`npx tsc --noEmit`, `npx next build`, `npx vitest run --passWithNoTests`). This matches 'Mostly executable guidance; concrete code or commands with minor gaps' — the gap being no example of converted output (e.g. a before/after Server Component), with detail deferred to docs/ARCHITECTURE.md sections 5 and 6. Score 5 would require copy-paste-ready examples covering the common conversion cases inline.

4 / 5

Workflow Clarity

The 10 steps form a clear, logical sequence (analyze -> convert routing -> convert data fetching -> determine server/client -> convert imports -> create siblings -> type -> decompose -> validate) ending in an explicit validation step with three concrete commands, which satisfies the validation requirement for this file-rewriting workflow. It falls short of anchor 5 only because there is no feedback loop or error-recovery guidance (e.g. 'if the build fails, fix and re-run'), matching 'Clear sequence with most checkpoints present; minor validation gaps'.

4 / 5

Progressive Disclosure

This is a short, single-purpose skill with a well-organized '## Steps' section and no bundle files to split; per the simple-skill guideline, well-organized sections alone warrant a 5. Its single external pointer is clearly signaled and one level deep ('following `docs/ARCHITECTURE.md` sections 5 and 6', reiterated in step 1), with no nested reference chains.

5 / 5

Total

18

/

20

Passed

Description

36%Weight 40%Scale 1-5

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 is effectively only a trigger clause: it says when to use the skill but never says what the skill does. It omits the concrete, distinctive vocabulary (Next.js, Pages Router, App Router) that would both sharpen the 'what' and reduce conflict risk with other migration skills. Adding one sentence of concrete capabilities would move it firmly into the good-example range.

Suggestions

State what the skill does, not just when: e.g. 'Migrates Next.js Pages Router components/pages to App Router: converts routes, data fetching (getServerSideProps/getStaticProps), and navigation imports, and creates loading.tsx/error.tsx siblings.'

Include the natural trigger terms users would say — 'Next.js', 'Pages Router', 'App Router', 'upgrade' — instead of the abstract phrase 'target architecture or framework version'.

Mirror the good-example pattern: one sentence of concrete actions followed by 'Use when migrating a Next.js Pages Router component/page to the App Router...'.

DimensionReasoningScore

Specificity

The description names the domain ("a component needs migration to the target architecture or framework version") but states no concrete actions — it never says what the skill actually does (convert routing, convert data fetching, create loading/error siblings). This matches the anchor 'Names the domain but actions are minimal or generic'. A score of 3 would require 1-2 concrete actions to be listed, which are absent; a score of 1 would require pure abstraction with no domain, but 'component migration' is a recognizable domain.

2 / 5

Completeness

Only a 'when' clause is present ('Use when a component needs migration to the target architecture or framework version') with no statement of what the skill does — the migration source (Pages Router), target (App Router), and the operations involved are all omitted. This exactly matches anchor 2's 'only when is present without what' (example: 'Use when working with documents'). Score 3 requires a clear 'what', which is missing; score 1 requires both to be missing or extremely vague, but the 'when' is at least stated.

2 / 5

Trigger Term Quality

It includes some relevant natural keywords ('component', 'migration', 'framework version') that a user would plausibly say, but misses the common variations and synonyms users would actually use for this skill — 'Next.js', 'Pages Router', 'App Router', 'upgrade'. This matches 'Some relevant keywords but missing common variations or synonyms'. Score 4 would require good coverage with only a few natural terms missing, but the most distinctive trigger terms (the framework names) are all absent.

3 / 5

Distinctiveness Conflict Risk

'Component... migration... architecture or framework version' is somewhat specific to code migration, but the phrasing is generic enough to overlap with other migration skills (database migrations, other framework upgrades, refactoring skills). This matches 'Somewhat specific but could still overlap with similar skills'. Score 4 would require mostly distinct triggers, which naming Next.js/App Router would provide but is absent.

3 / 5

Total

10

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

allowed_tools_field

'allowed-tools' contains unusual tool name(s)

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

14

/

16

Passed

Repository

fernandezbaptiste/specialist-agent

Path

packs/nextjs/skills/migration-migrate-component/SKILL.md

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.