CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

frontend-mobile-development-component-scaffold

Scaffold React and React Native components with TypeScript, accessibility, styles, and tests. Use when building reusable UI components or establishing component structure.

55

Quality

69%

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 ./skills/frontend-mobile-development-component-scaffold/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

38%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 presents a reasonable step sequence but delivers it as a long, monolithic wall of non-executable generator pseudocode with undefined helper methods and TODO placeholders, no validation steps, and zero progressive disclosure into reference files. It teaches Claude things it already knows at a high token cost.

Suggestions

Split the test, styles, and Storybook generators into separate reference files (e.g., references/tests.md, references/styles.md) and keep SKILL.md as a concise overview with one worked example, adding a small component checklist instead of generator classes.

Replace the pseudocode generator classes with one or two complete, copy-paste-ready example components (one web, one native) showing the exact file layout, props interface, and test file to emit.

Add a validation checkpoint to the workflow (e.g., 'run tsc --noEmit and the generated tests; fix and re-run before delivering') so the batch file-creation process has a feedback loop.

DimensionReasoningScore

Conciseness

The ~350-line body inlines generator-class implementations of patterns Claude already knows (useState, StyleSheet.create, styled-components, Storybook meta), which is noticeably verbose with several padded sections. It is not 1 because it never explains background concepts in prose, but it is well below the efficient midpoint.

2 / 5

Actionability

The code is pseudocode rather than executable: template-literal code generators that call undefined methods (this.extractName, this.inferAriaRole, this.camelCase, this.getMockValue in some classes) and leave literal 'TODO: Add component content' placeholders. Concrete structural guidance exists, but the missing key details place it at the 3 anchor, not 4.

3 / 5

Workflow Clarity

A sequence is present (Analyze → Generate component → Generate tests/styles/stories → Output format), but there are no validation checkpoints for this batch file-creation workflow (no 'run the tests' or 'typecheck/verify the scaffold' step), matching 'steps listed but validation gaps'. It is not 4 because the checkpoint absence is wholesale rather than minor.

3 / 5

Progressive Disclosure

This is a monolithic SKILL.md with no bundle files and no references at all; ~350 lines of test/style/storybook generator material that clearly belongs in separate reference files are inlined, matching the 2 anchor. It is not 3 because there are no references or navigation to offset the inline bulk — section headers alone do not provide progressive disclosure.

2 / 5

Total

10

/

20

Passed

Description

83%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.

A strong description with a concrete what, an explicit 'Use when' trigger clause, and good natural keywords. The only weakness is that 'scaffold' compresses several actions into one umbrella verb and a few natural trigger variations are absent.

DimensionReasoningScore

Specificity

The description lists several concrete deliverables — 'Scaffold React and React Native components with TypeScript, accessibility, styles, and tests' — naming the domain plus specific outputs. It falls short of the 5 anchor because 'scaffold' is a single umbrella action rather than multiple distinct concrete actions like 'fill forms, merge documents'.

4 / 5

Completeness

It explicitly answers both questions: what ('Scaffold React and React Native components with TypeScript, accessibility, styles, and tests') and when ('Use when building reusable UI components or establishing component structure'), with concrete trigger phrases matching the 5 anchor. It is not the 4 anchor because the 'when' clause is explicit and trigger-phrased, not merely present or weakly specific.

5 / 5

Trigger Term Quality

Strong natural keywords: 'React', 'React Native', 'TypeScript', 'reusable UI components', 'component structure'. A few natural variations users might say are missing (e.g., 'create component', 'component library'), matching the 4 anchor 'good keyword coverage; a few natural terms missing' rather than the comprehensive 5 anchor.

4 / 5

Distinctiveness Conflict Risk

The React/React Native component-scaffolding niche is clear and unlikely to trigger for unrelated skills, matching 'mostly distinct; minor overlap risk'. It is not 5 because 'building reusable UI components' could mildly overlap with general React development, testing, or design-system skills.

4 / 5

Total

17

/

20

Passed

Validation

100%

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

rmyndharis/antigravity-skills

Path

skills/frontend-mobile-development-component-scaffold/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.