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

—

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

89%

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 skill description that clearly identifies a specific technology stack (Rails/Slim/Stimulus/Optics CSS) and provides explicit trigger guidance. The main weakness is that the capabilities could be more concrete—listing specific actions like 'create Stimulus controllers' or 'write Slim template partials' rather than general phrases like 'building views' and 'adding interactivity'.

Suggestions

Replace general action phrases like 'building views, adding interactivity, styling components' with more concrete actions such as 'create Slim template partials, build Stimulus controllers, apply Optics utility classes, wire up JavaScript behaviors'.

Dimension	Reasoning	Score
Specificity	Names the domain (frontend patterns for Rails) and mentions some actions ('building views, adding interactivity, styling components'), but doesn't list multiple concrete specific actions like 'create Stimulus controllers, write Slim partials, apply Optics utility classes'.	2 / 3
Completeness	Clearly answers both 'what' (frontend patterns for Rails using Slim, Stimulus, CSS with Optics) and 'when' (explicit 'Use when...' clause listing trigger scenarios like building views, adding interactivity, styling, and specific technology mentions).	3 / 3
Trigger Term Quality	Includes good coverage of natural terms users would say: 'Slim', 'Stimulus', 'JavaScript', 'CSS', 'frontend development', 'views', 'interactivity', 'styling', and 'Optics utilities'. These are terms a user working in this stack would naturally mention.	3 / 3
Distinctiveness Conflict Risk	The combination of Rails + Slim + Stimulus + Optics is a very specific technology stack that creates a clear niche. While 'JavaScript' and 'CSS' are generic, the other terms like 'Slim', 'Stimulus', and 'Optics' are distinctive enough to avoid conflicts with general frontend skills.	3 / 3
	Total	11 / 12 Passed

Implementation

64%

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—nearly every concept is backed by executable Slim, JavaScript, or CSS code examples. The main weaknesses are moderate verbosity in some sections (input options lists, helpers vs partials explanation) and a lack of workflow sequencing for how these patterns fit together in practice. The progressive disclosure structure is reasonable with references to EXAMPLES.md, though the inline content is heavy enough that some could be offloaded.

Suggestions

Consider moving the detailed Simple Form input types table and input/form options lists to references/EXAMPLES.md or a dedicated references/SIMPLE_FORM.md to reduce the main file's token footprint.

Add a brief workflow or decision tree at the top (e.g., 'Building a new view? 1. Create Slim template → 2. Add form with Simple Form → 3. Wire interactivity with Stimulus → 4. Style with BEM') to improve workflow clarity.

Dimension	Reasoning	Score
Conciseness	Generally efficient with good use of tables and code examples, but some sections are slightly verbose—e.g., the Input Options bullet list and the Helpers vs Partials section explain things Claude would likely already know. The content could be tightened in places but isn't egregiously padded.	2 / 3
Actionability	Excellent actionability throughout—nearly every section includes executable Slim or JavaScript code examples that are copy-paste ready. The Simple Form section is particularly strong with concrete patterns for model forms, non-model forms, bulk actions, and modal forms.	3 / 3
Workflow Clarity	The skill is primarily a reference/pattern guide rather than a multi-step workflow, so explicit sequencing is less critical. However, there's no guidance on the order of building frontend features (e.g., create controller → wire up HTML → add CSS) and no validation checkpoints for ensuring correctness of Stimulus wiring or form submissions.	2 / 3
Progressive Disclosure	References to references/EXAMPLES.md are well-placed and clearly signaled, but since no bundle files were provided, we can't verify the reference exists or is well-structured. The SKILL.md itself is fairly long (~200 lines) and some content like the full input options list and form options could potentially be offloaded to a reference file for better progressive disclosure.	2 / 3
	Total	9 / 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: 4d83977

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