CtrlK
BlogDocsLog inGet started
Tessl Logo

vue-component-generator

Vue Component Generator - Auto-activating skill for Frontend Development. Triggers on: vue component generator, vue component generator Part of the Frontend Development skill category.

35

1.00x

Quality

3%

Does it follow best practices?

Impact

95%

1.00x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./planned-skills/generated/05-frontend-dev/vue-component-generator/SKILL.md
SKILL.md
Quality
Evals
Security

Evaluation results

96%

-1%

Product Filter Dropdown Component

Accessibility-first component generation

Criteria
Without context
With context

ARIA role on trigger

100%

100%

aria-expanded state

100%

100%

Keyboard navigation

100%

100%

Focus management

100%

100%

Semantic list structure

100%

100%

Prop definition with validation

100%

90%

Emits declaration

100%

100%

Scoped styles

100%

100%

CSS custom properties or modern CSS

70%

70%

USAGE.md documents keyboard behaviour

100%

100%

Without context: $0.3556 · 1m 30s · 16 turns · 17 in / 5,974 out tokens

With context: $0.4447 · 1m 46s · 23 turns · 22 in / 6,462 out tokens

100%

Activity Feed Dashboard Component

Performance-optimized list rendering

Criteria
Without context
With context

Performance technique applied

100%

100%

v-memo or keyed optimisation

100%

100%

Prop type declaration

100%

100%

IMPLEMENTATION_NOTES explains tradeoffs

100%

100%

Step-by-step structure in notes

100%

100%

Scoped styles

100%

100%

Modern CSS usage

100%

100%

Emits or no unnecessary emits

100%

100%

Type-based item filtering

100%

100%

No full-DOM render of all items

100%

100%

Without context: $0.3065 · 1m 32s · 18 turns · 83 in / 4,945 out tokens

With context: $0.4444 · 1m 56s · 24 turns · 24 in / 6,202 out tokens

90%

1%

User Onboarding Multi-Step Form

Production-ready component configuration

Criteria
Without context
With context

Typed props

100%

100%

defineEmits declaration

100%

100%

Completion and cancel events emitted

100%

100%

Named slots exposed

0%

0%

Inline validation errors

100%

100%

Required field validation

100%

100%

Email format validation

100%

100%

Semantic HTML form

100%

100%

Scoped styles

100%

100%

COMPONENT_API.md completeness

88%

100%

Step state management

100%

100%

Without context: $0.4575 · 2m 1s · 19 turns · 19 in / 8,280 out tokens

With context: $0.6508 · 2m 43s · 27 turns · 29 in / 11,478 out tokens

Repository
jeremylongshore/claude-code-plugins-plus-skills
Evaluated
Agent
Claude Code
Model
Claude Sonnet 4.6

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.