frontend-tdd

Frontend TDD Agent. React/Next.js 기반 TDD 테스트 작성 및 구현을 담당합니다. 테스트 먼저 작성 후 구현하는 Red-Green-Refactor 사이클을 따릅니다.

Install with Tessl CLI

npx tessl i github:shaul1991/shaul-agents-plugin --skill frontend-tdd

What are skills?

Overall
score

61%

Review — 49%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Validation — 10 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

Discovery

33%

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 identifies a clear domain (Frontend TDD with React/Next.js) and methodology (Red-Green-Refactor), but suffers from missing explicit trigger guidance and lacks specific concrete actions. The Korean language may limit discoverability for English-speaking users, and the absence of a 'Use when...' clause makes it difficult for Claude to know when to select this skill over others.

Suggestions

Add an explicit 'Use when...' clause with trigger terms like 'write tests', 'TDD', 'unit test', 'component test', 'test-driven', 'jest', 'testing library'

List specific concrete actions such as 'write unit tests for React components', 'create integration tests', 'mock API responses', 'test custom hooks'

Include common file extensions and tool names users might mention: '.test.tsx', '.spec.ts', 'Jest', 'React Testing Library', 'Vitest'

Dimension	Reasoning	Score
Specificity	Names the domain (React/Next.js TDD) and mentions the Red-Green-Refactor cycle methodology, but lacks specific concrete actions like 'write unit tests', 'create component tests', or 'mock API calls'.	2 / 3
Completeness	Describes what it does (TDD test writing and implementation for React/Next.js) but completely lacks a 'Use when...' clause or any explicit trigger guidance for when Claude should select this skill.	1 / 3
Trigger Term Quality	Includes relevant keywords like 'TDD', 'React', 'Next.js', 'Red-Green-Refactor', but missing common user variations like 'unit test', 'testing', 'jest', 'test coverage', or 'frontend testing'.	2 / 3
Distinctiveness Conflict Risk	The React/Next.js TDD focus provides some distinction, but could overlap with general frontend skills, testing skills, or React development skills without clearer boundaries.	2 / 3
	Total	7 / 12 Passed

Implementation

65%

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

This skill provides solid, actionable code examples for frontend TDD with React Testing Library and MSW. The main weaknesses are verbosity in explaining concepts Claude already knows (TDD cycle diagram, test stack listing) and lack of explicit validation steps in the workflow. The content would benefit from trimming explanatory content and adding clearer feedback loops.

Suggestions

Remove or significantly condense the TDD cycle ASCII diagram and test stack listing - Claude already understands these concepts

Add explicit validation commands in the workflow, e.g., 'Run `npm test -- ComponentName` and verify the test fails with expected error message'

Split detailed code examples into separate reference files (e.g., COMPONENT_TESTS.md, HOOK_TESTS.md, MSW_EXAMPLES.md) and keep SKILL.md as a concise overview

Add troubleshooting guidance for common test failures with specific fix-and-retry patterns

Dimension	Reasoning	Score
Conciseness	The content includes some unnecessary elements like the ASCII diagram for TDD cycle (Claude knows TDD) and verbose test stack listing. However, the code examples are reasonably efficient and the overall structure is not excessively padded.	2 / 3
Actionability	Provides fully executable, copy-paste ready code examples for component tests, hook tests, and MSW integration tests. Commands are specific and complete with clear patterns (AAA, Given-When-Then).	3 / 3
Workflow Clarity	The TDD cycle is described but lacks explicit validation checkpoints. The checklists are helpful but don't include feedback loops for when tests fail unexpectedly or how to debug failing tests. Missing explicit 'run test and verify failure' commands in the workflow.	2 / 3
Progressive Disclosure	Content is reasonably organized with clear sections, but it's somewhat monolithic. The extensive code examples could be split into separate reference files. No external file references for advanced topics like E2E testing details or MSW configuration.	2 / 3
	Total	9 / 12 Passed

Validation

91%

Warnings & errors only

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

Validation — 10 / 11 Passed

Validation for skill structure

Criteria	Description	Result
allowed_tools_field	'allowed-tools' contains unusual tool name(s)	Warning

	Total	10 / 11 Passed

Reviewed: 8 days ago

Table of Contents

Discovery Implementation Validation

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.