CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

react-feature-sliced-design

Enforces Feature-Sliced Design (FSD) architecture in React/TypeScript projects by scaffolding compliant folder structures, validating layer boundaries and import directions, detecting and fixing layer violations, and teaching FSD conventions during code generation and review. Use when asked to 'create a page', 'add an entity', 'build a widget', 'scaffold FSD structure', 'refactor to FSD', 'where should I put this code', 'what layer does X go in', 'organize my React code', 'fix layer violation', or 'review my FSD structure'. Triggers on any React/TypeScript task involving FSD layers, slices, segments, cross-layer imports, or public API boundaries. Covers code structure and layer boundaries only — for rendering performance use react-best-practices, for language and typing questions use typescript-development.

79

Quality

99%

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

SKILL.md
Quality
Evals
Security

Quality

Content

100%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 tight, highly actionable overview: concrete tables and a complete inline example, a validated workflow with an explicit verify checklist, and clean one-level-deep progressive disclosure into real reference files. The only nitpick (an elided ui/ segment in the inline example) does not rise above a minor gap.

DimensionReasoningScore

Conciseness

The body is lean: dependency rules, layer decisions, and naming norms are expressed as compact tables and directory trees, and nothing explains general React/TypeScript concepts Claude already knows. Every section is FSD-specific or project-normative, matching the "every token earns its place" anchor.

5 / 5

Actionability

Guidance is concrete and executable throughout: the src/ tree, layer import matrix, decision-guide table, a complete inline TypeScript entity slice with public API, a violation→fix quick-reference, and numbered generation rules. These cover the common cases (decide a layer, scaffold a slice, fix a violation); the one elided ui/ segment in the inline example is consistent with "all segments optional" and fully specified in references/slice-examples.md.

5 / 5

Workflow Clarity

"Workflow: Adding a New Slice" is a clearly sequenced 6-step process with validation at step 4 ("Validate imports — verify all imports flow downward only") and an explicit final checklist at step 6 ("(a) no upward imports, (b) external code only imports from index.ts, (c) no export *"), while the Common Violations Quick-Reference table supplies the error-recovery fixes. Explicit validation steps plus a checklist match the 5 anchor; scaffolding is not destructive or batch, so no cap applies.

5 / 5

Progressive Disclosure

The body is a well-organized overview with a "Deep Dives" table mapping each need to one of four reference files, all of which exist and are one level deep (verified: layers.md, segments.md, claude-md-template.md, slice-examples.md). The body's inline example is a concrete orientation slice while the reference holds the generic template — an appropriate split, not duplication — and fetching the large official spec is explicitly gated against reflexive context waste.

5 / 5

Total

20

/

20

Passed

Description

100%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 dense, third-person description that states comprehensive concrete capabilities, provides an extensive set of natural trigger phrases (including question forms), and explicitly disambiguates against related skills. It matches the top anchor on every dimension with no padding despite its length.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — "scaffolding compliant folder structures, validating layer boundaries and import directions, detecting and fixing layer violations, and teaching FSD conventions" — covering the full capability set (enforce, scaffold, validate, detect, fix, teach). It matches the 5 anchor's comprehensive coverage; it is not a 4 because no capability area is left with gaps.

5 / 5

Completeness

It explicitly answers both questions: the first sentence states what the skill does, and "Use when asked to..." / "Triggers on any React/TypeScript task involving..." gives explicit when-guidance with concrete trigger phrases. This matches the 5 anchor's structure exactly, and the 'Use when' clause is present so the completeness cap does not apply.

5 / 5

Trigger Term Quality

Natural phrases a user would actually say are comprehensively covered: "'create a page', 'add an entity', 'build a widget', 'scaffold FSD structure', 'refactor to FSD', 'where should I put this code', 'what layer does X go in', 'organize my React code', 'fix layer violation', 'review my FSD structure'" — including question-form variants — alongside the technical vocabulary (layers, slices, segments, cross-layer imports, public API). File extensions are inapplicable in this folder-architecture domain, so nothing natural is missing.

5 / 5

Distinctiveness Conflict Risk

The description carves out a clear niche and explicitly de-scopes sibling skills: "Covers code structure and layer boundaries only — for rendering performance use react-best-practices, for language and typing questions use typescript-development." Trigger phrases are all FSD-specific, so conflict risk is minimal.

5 / 5

Total

20

/

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.

Validation — 15 / 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

provectus/awos-recruitment

Path

registry/skills/react-feature-sliced-design/SKILL.md

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.