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.
62
73%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/frontend-patterns/SKILL.mdQuality
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 a good explicit 'Use when' clause. Its main weaknesses are somewhat generic action descriptions (could be more concrete about specific capabilities) and some overly broad trigger terms like 'JavaScript' and 'CSS' that could cause conflicts with other frontend skills.
Suggestions
Replace generic actions like 'building views' and 'adding interactivity' with more concrete capabilities such as 'create Slim template partials, build Stimulus controllers, apply Optics utility classes'.
Narrow broad trigger terms: instead of just 'JavaScript' or 'CSS', qualify them as 'Stimulus controllers', 'Optics CSS utilities', or 'Rails frontend' to reduce conflict risk with other frontend skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (frontend patterns for Rails) and mentions some actions ('building views, adding interactivity, styling components'), but these are fairly general rather than listing 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' with an explicit 'Use when...' clause listing specific trigger scenarios and terms. | 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 user working on Rails frontend would naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | The combination of Rails + Slim + Stimulus + Optics is fairly distinctive, but broad trigger terms like 'JavaScript', 'CSS', and 'frontend development' could easily overlap with other frontend-related skills that aren't Rails-specific. | 2 / 3 |
Total | 10 / 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 with strong actionability—concrete, executable Slim, Simple Form, Stimulus, and CSS examples that Claude can directly apply. The main weaknesses are moderate verbosity (some sections could be tightened or offloaded to reference files) and the absence of validation/verification guidance. The progressive disclosure structure is reasonable but would benefit from actually having the referenced EXAMPLES.md bundle file to support it.
Suggestions
Offload the detailed Simple Form input types table and input/form options lists to references/EXAMPLES.md or a dedicated references/SIMPLE_FORM.md to keep the main skill more concise.
Add brief validation guidance, such as checking rendered HTML output or verifying Stimulus controller connections via browser console, 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 | Provides fully executable Slim templates, JavaScript controller structures, and form patterns that are copy-paste ready. Concrete examples cover common use cases (bulk forms, modal forms, collections, conditional classes) with specific syntax. | 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 are no validation checkpoints or feedback loops—for instance, no guidance on verifying form correctness, testing Stimulus controllers, or checking that partials render correctly. The organization is clear but lacks any verification steps. | 2 / 3 |
Progressive Disclosure | References to references/EXAMPLES.md are well-signaled and appear at appropriate points, but no bundle files were provided to verify the reference exists. The SKILL.md itself is fairly long (~180 lines of content) and some sections like the full Simple Form input options table and form options list could potentially be offloaded to a reference file to keep the main skill leaner. | 2 / 3 |
Total | 9 / 12 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 — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- RoleModel/rolemodel-skills
- Commit
72e8136
- 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.