CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-patterns

Frontend patterns for Rails applications using Slim templates, Stimulus JavaScript framework, CSS with Optics utilities. Use when building views, adding interactivity, styling components, or when the user mentions Slim, Stimulus, JavaScript, CSS, or frontend development.

63

Quality

79%

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 ./skills/frontend-patterns/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

82%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 strong, highly actionable reference: terse conventions, executable code for every common case, and a well-signaled one-level-deep reference file. The main improvements are removing the duplicated Quick Reference content, consolidating the repeated EXAMPLES.md links, and pushing more of the inline option tables into the reference file.

DimensionReasoningScore

Conciseness

The body is dense and pattern-driven with almost no explanation of concepts Claude already knows — terse rules, code blocks, and option tables. Minor trimming opportunities exist: the 'Quick Reference' section repeats patterns already shown verbatim (the form-actions snippet and authorization check duplicate earlier sections), and the empty Stimulus connect/disconnect scaffold adds padding. This fits 'Efficient; minor instances of over-explanation that could be trimmed' rather than the fully lean level 5.

4 / 5

Actionability

Nearly everything is copy-paste-ready executable code: complete Simple Form blocks, a Stimulus controller skeleton with the exact static API, Slim snippets for conditional classes, collection rendering, bulk-action forms with checkbox-to-form wiring, and a table of concrete input options. Common cases are covered directly, matching 'Fully executable; copy-paste ready code or commands; specific examples cover the common cases'.

5 / 5

Workflow Clarity

This is a patterns/reference skill with no multi-step process and no destructive or batch rebuild operations, so no validation checkpoints are required. Guidance within each section is unambiguous and consistently ordered (conventions, then patterns, then examples), but the document spans four separate domains rather than being a single simple task, and there is no stated order of attack (e.g. which reference to consult first for a given task). This sits between the simple-skill exception and clear sequencing, matching level 4 rather than 5.

4 / 5

Progressive Disclosure

Structure is good: core patterns live inline in SKILL.md and each major section ends with a clearly signaled one-level-deep link to references/EXAMPLES.md (verified to exist, with matching sections for Slim, Simple Form, Stimulus, and layouts). It falls short of level 5 because the body inlines a substantial mini-reference (full input-option table, form-options lists, and a redundant Quick Reference section) where a leaner overview deferring more to EXAMPLES.md would fit, and the same link is repeated three times rather than consolidated.

4 / 5

Total

17

/

20

Passed

Description

66%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 solid description with an explicit 'Use when...' trigger clause and natural tool keywords, but the capability statement leans on tool names ('frontend patterns using X, Y, Z') instead of concrete actions, and its triggers include broad terms (JavaScript, CSS, frontend development) that create overlap risk with general frontend skills.

Suggestions

Replace the vague capability opener 'Frontend patterns for Rails applications using...' with 2-3 concrete actions, e.g. 'Build Rails views with Slim templates, Simple Form forms, Stimulus controllers, and Optics CSS.'

Scope the trigger terms to the Rails context (e.g. 'Use when building Rails views or when the user mentions Slim, Stimulus, or Optics') and drop or qualify the generic 'JavaScript, CSS, or frontend development' triggers to reduce conflict with general frontend skills.

Add missing natural synonyms users would say, such as 'Rails views', 'templates', or file extensions like '.slim'.

DimensionReasoningScore

Specificity

The description names the domain and toolchain ("Frontend patterns for Rails applications using Slim templates, Stimulus JavaScript framework, CSS with Optics utilities") but the capability statement itself is a tool list rather than concrete actions; the few actions present ("building views, adding interactivity, styling components") appear only in the trigger clause. This matches the anchor 'Names domain and 1-2 concrete actions, but not comprehensive' and falls short of level 4, which expects several specific actions listed as capabilities.

3 / 5

Completeness

Both parts are present: the what ("Frontend patterns for Rails applications using Slim templates, Stimulus JavaScript framework, CSS with Optics utilities") and an explicit when ("Use when building views, adding interactivity, styling components, or when the user mentions Slim, Stimulus, JavaScript, CSS, or frontend development"). It is not level 5 because the 'what' is a vague tool enumeration ('patterns') rather than the concrete capability actions seen in the level-5 anchor.

4 / 5

Trigger Term Quality

Triggers include natural phrases users would say — "building views, adding interactivity, styling components" plus tool names "Slim, Stimulus, JavaScript, CSS, or frontend development". Good coverage, but common variations like "Rails views", "templates", "HTML", or file extensions (".slim") are missing, fitting 'Good keyword coverage; a few natural terms missing' rather than the comprehensive level 5.

4 / 5

Distinctiveness Conflict Risk

The Rails/Slim/Stimulus/Optics stack is a distinct niche, but the trigger list includes very generic terms ("JavaScript, CSS, or frontend development") without requiring Rails context, so any generic frontend/JS/CSS request could fire this skill. This matches 'Somewhat specific but could still overlap with similar skills' rather than level 4's 'minor overlap risk', since the broad triggers would also match general web-development skills.

3 / 5

Total

14

/

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
RoleModel/rolemodel-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.