CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-mobile-development-component-scaffold

You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s

45

Quality

48%

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 ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/frontend-mobile-development-component-scaffold/SKILL.md

The canonical home for this skill is frontend-mobile-development-component-scaffold in rmyndharis/antigravity-skills

SKILL.md
Quality
Evals
Security

Quality

Content

42%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 a long, section-organized set of TypeScript generator templates that give a clear six-step sequence but are not executable as written (many helper methods are undefined) and lack any validation checkpoint. With no bundle files, all detail is inlined in a single monolithic SKILL.md rather than progressively disclosed.

Suggestions

Replace the undefined-helper generator classes with lean, copy-paste-ready component/test/style templates (or fully implement the helpers) so the guidance is executable rather than pseudocode.

Add an explicit validation checkpoint to the workflow (e.g., 'Run `tsc --noEmit` and `npm test` after generation; fix type and a11y violations before finishing').

Move the Storybook, styles, and test-generation reference material into separate files under references/ and link to them one level deep to trim the SKILL.md body and improve progressive disclosure.

DimensionReasoningScore

Conciseness

The ~400-line body is noticeably verbose: it wraps guidance in large OOP generator classes (ComponentAnalyzer, ReactComponentGenerator, etc.) with redundant boilerplate, a repeated persona statement, and TODO placeholders, where leaner inline examples would convey the same guidance in far fewer tokens.

2 / 5

Actionability

It provides concrete template structure but the classes are pseudocode rather than executable — key helpers (inferType, extractProps, capitalize, inferAriaRole, detectStylingApproach, getMockValue, inferControl) are referenced but never defined, and component output is shown as generated strings with TODO holes.

3 / 5

Workflow Clarity

Steps are clearly sequenced (Analyze → React → Native → Tests → Styles → Stories), but the file-generation workflow has no validation/verification checkpoint (e.g., compile, typecheck, run tests), so it is capped at 3 per the batch-operation validation rule.

3 / 5

Progressive Disclosure

Content is organized into six labeled sections, but no references/, scripts/, or assets/ bundle exists, so everything is inlined in one ~400-line file; the per-generator detail that could live in separate reference files is kept inline, leaving structure present but not progressively disclosed.

3 / 5

Total

11

/

20

Passed

Description

53%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 states concrete capabilities around React/React Native component scaffolding but is truncated, uses second-person voice, and omits any 'Use when' trigger guidance. It is moderately specific and reasonably distinctive but incomplete as a trigger description.

Suggestions

Finish the truncated description and add an explicit 'Use when...' clause with concrete trigger phrases (e.g., 'Use when scaffolding a new React or React Native component, generating component boilerplate, or needing TypeScript component templates with tests and styles').

Rewrite in third person ('Scaffolds production-ready React/React Native components...') to avoid the second-person specificity penalty.

Add natural trigger synonyms and file-type cues users would say ('create a component', 'build a component', 'scaffold', '.tsx').

DimensionReasoningScore

Specificity

The description names the React component domain and several concrete actions ('scaffolding production-ready, accessible, and performant components', 'Generate complete component implementations with TypeScript, tests, [styles]'), but the second-person voice ('You are a React component architecture expert') triggers the -1 specificity penalty and the text is truncated mid-action, leaving coverage incomplete.

3 / 5

Completeness

It gives a clear 'what' (scaffold production-ready components with TypeScript, tests, styles) but has no 'Use when...' trigger clause and the text is cut off, so the 'when' is entirely missing — capping completeness at 3 per the missing-trigger-guidance rule.

3 / 5

Trigger Term Quality

It surfaces relevant keywords ('React', 'TypeScript', 'components', 'scaffolding') but misses natural variations and synonyms a user would actually say ('create a React component', 'build a component', 'scaffold', file-type cues), so it sits at 'some relevant keywords, missing common variations'.

3 / 5

Distinctiveness Conflict Risk

'React component architecture expert specializing in scaffolding' carves a fairly distinct niche with low conflict risk against unrelated skills, with only minor overlap risk against general React/web development skills.

4 / 5

Total

13

/

20

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

frontmatter_unknown_keys

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

Warning

Total

15

/

16

Passed

Repository
administrakt0r/AI-Agents-Safe-Coding-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.