frontend-component

컴포넌트 개발 에이전트. React/Next.js 컴포넌트를 설계하고 구현합니다.

Install with Tessl CLI

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

What are skills?

Quality

27%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/frontend-component/SKILL.md

SKILL.md

Review

Evals

Discovery

32%

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 its technology stack (React/Next.js) but is too brief and lacks explicit trigger guidance. It fails to specify concrete actions beyond generic 'design and implement' and provides no 'Use when...' clause, making it difficult for Claude to know when to select this skill over other frontend-related skills.

Suggestions

Add a 'Use when...' clause with explicit triggers like 'Use when the user asks to create React components, build Next.js pages, or mentions .tsx/.jsx files'

List specific concrete actions such as 'create functional components, implement hooks, build forms, handle state management, create reusable UI elements'

Include natural trigger terms users would say: 'UI', 'frontend', 'JSX', 'hooks', 'props', 'state', '.tsx', '.jsx'

Dimension	Reasoning	Score
Specificity	Names the domain (React/Next.js components) and mentions two actions (설계/design and 구현/implement), but lacks specific concrete actions like 'create forms', 'build navigation', or 'implement state management'.	2 / 3
Completeness	Describes what it does (designs and implements React/Next.js components) 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 'React', 'Next.js', '컴포넌트' (component), but missing common variations users might say like 'UI', 'frontend', 'JSX', 'hooks', or file extensions like '.tsx', '.jsx'.	2 / 3
Distinctiveness Conflict Risk	React/Next.js provides some specificity, but '컴포넌트 개발' (component development) is broad and could overlap with general frontend skills, UI development skills, or other JavaScript framework skills.	2 / 3
	Total	7 / 12 Passed

Implementation

22%

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

This skill content reads as a job description rather than actionable guidance. It defines what the agent should do but provides zero concrete instruction on how to do it—no code patterns, no component templates, no design principles, and no workflow for component development. Claude already knows how to build React components; this skill adds no project-specific value.

Suggestions

Add concrete code examples showing the project's component patterns (e.g., a template for a typical component with proper TypeScript typing, hooks usage, and styling approach)

Define a clear workflow: 1) Check existing components → 2) Design props interface → 3) Implement → 4) Add Storybook/tests → 5) Document

Include project-specific conventions: naming patterns, folder structure rules, state management approach, styling methodology (CSS modules, Tailwind, styled-components)

Reference or link to existing component examples in the codebase and any design system documentation

Dimension	Reasoning	Score
Conciseness	The content is brief and doesn't over-explain concepts Claude knows, but it's essentially a role description rather than actionable skill content. The brevity comes from lack of substance rather than efficient instruction.	2 / 3
Actionability	No concrete code examples, commands, or executable guidance provided. The content only describes responsibilities ('컴포넌트 구조 설계', '재사용 가능한 컴포넌트 개발') without showing how to actually do them.	1 / 3
Workflow Clarity	No workflow or process steps defined. The skill lists tasks but provides no sequence, validation checkpoints, or guidance on how to approach component development systematically.	1 / 3
Progressive Disclosure	The content is well-organized with clear sections and specifies output locations, but lacks any references to detailed documentation, examples, or patterns that would help with actual implementation.	2 / 3
	Total	6 / 12 Passed

Validation

90%

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: 15 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.