CtrlK
BlogDocsLog inGet started
Tessl Logo

how-to-write-component

Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data flow, effects, or interaction ownership. Do not use for review-only requests, test-only work, copy-only edits, or styling-only changes.

72

Quality

89%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

The risk profile of this skill

SKILL.md
Quality
Evals
Security

Quality

Content

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

A well-structured routing skill that efficiently points to one-level-deep references with concrete verification doc pointers and project-specific Tailwind canonicals. Workflow would benefit from an explicit validate-and-retry loop.

Suggestions

Add an explicit feedback loop in 'Scope And Verification' (e.g., if a check fails, fix and re-run until passing before proceeding) to strengthen workflow_clarity.

Consider noting what a passing verification looks like or linking the specific check command, so the verify step is executable without opening the referenced docs.

Clarify the relationship of the Tailwind CSS section to the routing theme, or move it into a reference, to keep the overview purely about topic routing.

DimensionReasoningScore

Conciseness

Lean ~28-line body with no padding and no explanation of concepts Claude already knows; project-specific Tailwind canonicals are the only concrete specifics, and every token earns its place.

5 / 5

Actionability

Instruction-only routing skill with concrete pointers (specific reference files, web/docs/test.md, web/docs/lint.md, packages/dify-ui/docs/testing.md) and concrete Tailwind class mappings, but the actual mechanics live in the referenced docs leaving minor gaps.

4 / 5

Workflow Clarity

Clear sequence of route → identify owner/state/contract → keep within slice → verify with named check docs, but no explicit validate→fix→retry feedback loop; this is not a destructive/batch operation so the cap-at-3 rule does not apply.

4 / 5

Progressive Disclosure

Clean overview routing to five real one-level-deep reference files with bottom-defined link refs and content appropriately split; the single second hop to an external package overlay doc is clearly signaled rather than a nested skill reference.

5 / 5

Total

18

/

20

Passed

Description

92%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, well-scoped description that clearly states when to use the skill and when not to, with concrete architectural decision categories. Slightly technical in its trigger phrasing but highly distinctive.

DimensionReasoningScore

Specificity

Names the domain (React/TypeScript components) and lists multiple concrete decision areas — 'component ownership, feature boundaries, state, data flow, effects, or interaction ownership' — giving comprehensive coverage of the architectural decision space.

5 / 5

Completeness

Explicitly answers 'when' with a 'Use when...' clause and concrete trigger conditions, plus negative guidance ('Do not use for review-only requests, test-only work, copy-only edits, or styling-only changes'), covering both what and when.

5 / 5

Trigger Term Quality

Includes natural developer phrases ('implementing or refactoring React/TypeScript components', 'state', 'data flow', 'effects') but leans technical and misses some casual synonyms a user might say.

4 / 5

Distinctiveness Conflict Risk

Scoped tightly to React/TypeScript component architecture decisions with explicit exclusions, giving a clear niche with distinct triggers and minimal overlap with other skills.

5 / 5

Total

19

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
langgenius/dify
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.