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

33

Quality

29%

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

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

SKILL.md
Quality
Evals
Security

Quality

Content

17%Scale 1-5

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

This skill is a verbose, non-executable pseudo-architecture document that describes what a component generator would look like rather than providing actionable instructions for Claude to scaffold components. It over-explains patterns Claude already knows (React component structure, TypeScript interfaces, testing patterns) while failing to provide concrete, copy-paste-ready templates or clear decision-making workflows. The class-based abstraction layer adds complexity without value — Claude would be better served by simple template examples with clear conditional guidance.

Suggestions

Replace the class-based pseudocode with actual component templates that Claude can directly adapt — e.g., a concrete Button component example showing the expected output format for each file type.

Add a decision tree or clear conditional logic for when to use web vs native vs universal patterns, and which styling approach to select based on project context.

Add validation steps: after generating files, verify TypeScript compilation, check that tests pass, and confirm accessibility attributes are present.

Split the content: keep SKILL.md as a concise overview with the workflow and decision points, and move the template examples for tests, styles, and stories into separate referenced files.

DimensionReasoningScore

Conciseness

Extremely verbose with ~300+ lines of class-based pseudocode that Claude already knows how to produce. The entire skill is essentially scaffolding code for a scaffolding task — meta-abstraction that doesn't add actionable value. Concepts like generating imports, mapping types, and creating test files are well within Claude's existing knowledge.

1 / 5

Actionability

Despite containing extensive TypeScript code, none of it is executable — it's all class definitions with methods like `this.extractName(input)` and `this.inferType(input)` that have no implementations. The code is architectural pseudocode dressed up as real code. Claude cannot copy-paste and run any of this; it's a description of what a generator would look like, not actual generation instructions.

2 / 5

Workflow Clarity

The numbered sections (1-6) provide a rough sequence but there are no validation checkpoints, no error handling guidance, no feedback loops, and no clear decision points. The steps are 'analyze, generate component, generate native component, generate tests, generate styles, generate stories' but there's no guidance on when to use which path or how to verify outputs.

2 / 5

Progressive Disclosure

All content is inlined in a single monolithic file with no references to external files. The 300+ lines of class definitions for styles, tests, stories, and storybook generation should clearly be split into separate reference files. No bundle files are provided despite the content clearly warranting them.

2 / 5

Total

7

/

20

Passed

Description

41%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 truncated mid-sentence, which severely undermines its effectiveness. While it identifies the domain (React component architecture) and hints at specific capabilities (TypeScript, tests), it lacks a 'Use when...' clause and uses first/second person framing ('You are') which is inappropriate for a skill description. The buzzwords 'production-ready, accessible, and performant' add little discriminative value.

Suggestions

Fix the truncation to include the complete description, and add an explicit 'Use when...' clause with trigger phrases like 'create a React component', 'scaffold component', 'new .tsx file', 'component boilerplate'.

Rewrite in third person voice (e.g., 'Generates production-ready React components with TypeScript...') instead of the current 'You are...' framing.

Replace vague buzzwords like 'production-ready, accessible, and performant' with specific actions such as 'generates ARIA-compliant markup, adds unit tests with React Testing Library, implements memoization for performance'.

DimensionReasoningScore

Specificity

The description names the domain (React component architecture) and mentions a few concrete actions like 'scaffolding', 'generate complete component implementations', and mentions TypeScript and tests, but the description is truncated and uses some vague/buzzword language like 'production-ready, accessible, and performant'.

3 / 5

Completeness

The description provides a partial 'what' (generate component implementations with TypeScript and tests) but has no 'when' clause at all. Additionally, the description is truncated mid-sentence, making it incomplete. The missing 'Use when...' clause caps this at 3, and the truncation pushes it lower.

2 / 5

Trigger Term Quality

Includes some relevant keywords like 'React', 'component', 'TypeScript', 'tests', but is missing many natural user phrases like 'create a component', 'new component', 'React component', '.tsx', 'unit test', 'accessibility', 'a11y'. The truncation also limits keyword coverage.

3 / 5

Distinctiveness Conflict Risk

The focus on React component scaffolding provides some distinctiveness, but the broad terms like 'production-ready' and 'performant' could overlap with general React development skills or frontend coding skills. The truncation prevents full assessment of boundary clarity.

3 / 5

Total

11

/

20

Passed

Validation

90%

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

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

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

Warning

Total

10

/

11

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.