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.

Quality

77%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

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

Quality

Discovery

82%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

This is a solid description that clearly communicates both what the skill does and when to use it, with good trigger term coverage. Its main weaknesses are the somewhat generic capability descriptions (could list more specific actions) and potential overlap with other frontend skills due to broad trigger terms like 'JavaScript' and 'CSS'.

Suggestions

Add more specific concrete actions like 'create Slim partials, write Stimulus controllers, apply Optics utility classes' to improve specificity.

Consider narrowing broad trigger terms by qualifying them, e.g., 'Stimulus controllers/actions' instead of just 'JavaScript', to reduce conflict risk with other frontend skills.

Dimension	Reasoning	Score
Specificity	Names the domain (frontend Rails) and some technologies (Slim templates, Stimulus, CSS with Optics), but doesn't list specific concrete actions like 'create controllers', 'build partials', or 'write Stimulus actions'. The actions mentioned ('building views, adding interactivity, styling components') are somewhat generic.	2 / 3
Completeness	Clearly answers both 'what' (frontend patterns for Rails using Slim, Stimulus, CSS/Optics) and 'when' with an explicit 'Use when...' clause listing specific trigger scenarios like building views, adding interactivity, styling, and mentioning specific technologies.	3 / 3
Trigger Term Quality	Good coverage of natural terms users would say: 'Slim', 'Stimulus', 'JavaScript', 'CSS', 'frontend development', 'views', 'interactivity', 'styling', 'components'. These are terms a developer would naturally use when requesting help with Rails frontend work.	3 / 3
Distinctiveness Conflict Risk	While the combination of Slim + Stimulus + Optics is fairly distinctive, broad terms like 'JavaScript', 'CSS', and 'frontend development' could easily overlap with other frontend-related skills. The mention of 'Rails' helps narrow it but generic frontend triggers remain a conflict risk.	2 / 3
	Total	10 / 12 Passed

Implementation

72%

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

This is a solid frontend patterns reference skill with strong actionability through executable code examples and good progressive disclosure via references to EXAMPLES.md. The main weaknesses are minor verbosity in some sections that explain concepts Claude already knows, and the lack of any workflow sequencing or validation guidance for building frontend features end-to-end.

Suggestions

Trim explanatory text Claude already knows, such as 'JavaScript interactions using Stimulus framework' and the comment '// Initialization when controller connects to DOM'—these waste tokens.

Consider adding a brief workflow sequence for building a complete feature (e.g., 'Template → Form → Stimulus → CSS') with a validation step like checking the page renders correctly.

Dimension	Reasoning	Score
Conciseness	Generally efficient but has some unnecessary padding—the input options list and some explanatory text (e.g., 'JavaScript interactions using Stimulus framework') explain things Claude already knows. The helpers vs partials section is useful but slightly verbose. Overall mostly tight but could be trimmed.	2 / 3
Actionability	Provides fully executable Slim templates, Simple Form examples, Stimulus controller structure, and CSS patterns that are copy-paste ready. The table of input types, form patterns (bulk action, modal), and quick reference section are all concrete and immediately usable.	3 / 3
Workflow Clarity	This is primarily a reference/patterns skill rather than a multi-step workflow, so explicit sequencing is less critical. However, the content lacks any guidance on the order of building frontend features (e.g., start with template, add form, wire up Stimulus, style with CSS) and has no validation checkpoints for ensuring correctness of templates or controllers.	2 / 3
Progressive Disclosure	Well-structured with clear sections for each technology (Slim, Simple Form, Stimulus, CSS), a quick reference section, and multiple well-signaled references to 'references/EXAMPLES.md' for detailed code examples. Content is appropriately split between overview and detailed reference.	3 / 3
	Total	10 / 12 Passed

Validation

100%

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 — 11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository: RoleModel/rolemodel-skills
Commit: 097ad6b

Reviewed: 12 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.