nuxt-ui

Use when building styled UI with @nuxt/ui v4 components - create forms with validation, implement data tables with sorting, build modal dialogs and overlays, configure Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.

Install with Tessl CLI

npx tessl i github:popey/nuxt-skills --skill nuxt-ui

What are skills?

100

1.16x

Review — 100%

Does it follow best practices?

Evaluation — 100%

↑ 1.16x

Agent success when using this skill

Validation — 11 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

Evaluation results

100%

Support Portal: Contact Form Component

Form validation with Standard Schema

Criteria

Without context

With context

UForm component used

100%

UFormField wrapper used

100%

Standard Schema library

100%

Field name matches state key

100%

Schema passed to UForm

100%

State passed to UForm

100%

v-model on inputs

100%

Semantic error color

70%

100%

No custom validation

100%

Submit triggers validation

100%

Without context: $0.1512 · 33s · 8 turns · 9 in / 1,812 out tokens

With context: $0.3014 · 47s · 14 turns · 15 in / 2,405 out tokens

100%

12%

Internal Dashboard: Add Nuxt UI to Existing Nuxt 4 Project

Nuxt UI project setup and configuration

Criteria

Without context

With context

UApp wrapper present

100%

CSS import: tailwindcss

100%

CSS import: nuxt/ui

100%

CSS linked in nuxt.config

100%

pnpm hoisting config

100%

Component detection enabled

100%

@nuxt/ui in modules

100%

No UApp omission documented

100%

pnpm gotcha documented

100%

No hardcoded colors

100%

Without context: $0.3256 · 1m 36s · 18 turns · 17 in / 3,173 out tokens

With context: $0.4125 · 1m 8s · 23 turns · 121 in / 3,120 out tokens

100%

27%

Fintech App: Brand Theme Configuration

Theme customization and component overrides

Criteria

Without context

With context

Primary color as semantic name

100%

All 11 cobalt shades defined

100%

cobalt registered in nuxt.config

100%

Button uses slots structure

100%

Container uses flat structure

100%

Button pill shape override

100%

Container width override

100%

CSS imports correct

100%

theme-notes distinguishes patterns

50%

100%

No wrong pattern mixing

100%

Without context: $0.2444 · 1m 4s · 11 turns · 12 in / 3,503 out tokens

With context: $0.3866 · 1m 4s · 19 turns · 17 in / 3,157 out tokens

Evaluated: 4 days ago
Agent: Claude Code
Model: Unknown

Table of Contents

Support Portal: Contact Form Component Internal Dashboard: Add Nuxt UI to Existing Nuxt 4 Project Fintech App: Brand Theme Configuration

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.