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

44

Quality

45%

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/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 verbose, over-engineered code-generator-as-skill with concrete but non-executable scaffolding, a clear but validation-free step sequence, and everything inlined into a single file. It is usable as a pattern reference but well below the lean, executable, well-structured bar the rubric rewards.

Suggestions

Trim the generator classes to lean, copy-paste-ready templates (or move them to reference files) and remove re-explanation of basic React hooks/styling that Claude already knows.

Define or remove the undefined helper methods (inferAriaRole, extractProps, capitalize, camelCase, etc.) and replace TODO placeholders with real implementations so the examples are executable.

Add an explicit validation/checkpoint step (e.g. run typecheck and the generated test suite, verify axe passes) before declaring the scaffolded component complete, and split the per-platform templates into one-level-deep reference files.

DimensionReasoningScore

Conciseness

The ~400-line body is a bulky set of TypeScript generator classes that re-derive React patterns Claude already knows (useState/useEffect wiring, styled-components templates, Storybook boilerplate), and the template-string-generator design is noticeably padded rather than lean guidance.

2 / 5

Actionability

Concrete class scaffolding is provided, but it is not executable as written: many referenced helpers are undefined (inferAriaRole, inferType, extractProps, extractState, identifyHooks, capitalize, camelCase, getMockValue, inferControl, mapNativeType exists but inferAriaRole does not) and bodies contain TODO placeholders, so it falls to the "incomplete/pseudocode-like" anchor.

3 / 5

Workflow Clarity

A clear numbered sequence exists (analyze -> generate component -> native -> tests -> styles -> stories -> output), but there are no validation or verification checkpoints for a batch file-generation operation, so workflow clarity is capped at 3 per the rubric.

3 / 5

Progressive Disclosure

Section headers and a numbered structure exist, but no bundle files (references/, scripts/, assets/) are provided and all generator code is inlined in SKILL.md; content that clearly belongs in separate template files (web, native, tests, styles, stories) is not split out or referenced.

3 / 5

Total

11

/

20

Passed

Description

48%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 a clear domain and a couple of concrete actions but is truncated, written in penalized second-person voice, and lacks any explicit "Use when..." trigger guidance, capping completeness. It is distinguishable but below the bar set by the reference good examples.

Suggestions

Rewrite in third person and add an explicit "Use when ..." clause with concrete trigger phrases (e.g. "Use when scaffolding new React or React Native components, or when the user asks to generate a component with tests, styles, and Storybook stories").

Complete the truncated description and broaden natural trigger keywords to include synonyms users actually say ("React Native", "JSX", "component generator", "TypeScript component").

List several concrete actions explicitly (generate component, types, styles, tests, stories, barrel exports) rather than letting the enumeration cut off.

DimensionReasoningScore

Specificity

Names the React-scaffolding domain and one-to-two concrete actions ("scaffolding production-ready ... components", "Generate complete component implementations with TypeScript, tests, s"), but the second-person voice ("You are a React component architecture expert") triggers the mandated specificity penalty, dropping the base 3 to 2.

2 / 5

Completeness

There is a clear-ish "what" (generate component implementations with TypeScript, tests, styles) but no "Use when..." or equivalent explicit trigger guidance, so per the rubric completeness is capped at 3.

3 / 5

Trigger Term Quality

Relevant keywords ("React component", "scaffolding", "TypeScript", "tests") appear but common synonyms and variations a user would naturally say (e.g. "React Native", "JSX", "component generator") are missing, and the description is truncated mid-word so coverage is incomplete.

3 / 5

Distinctiveness Conflict Risk

"React component architecture expert ... scaffolding production-ready, accessible, and performant components" carves a fairly distinct niche with only minor overlap risk against generic React development skills.

4 / 5

Total

12

/

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.