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.

1.16x

Quality

92%

Does it follow best practices?

Impact

100%

1.16x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

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%

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%

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%

Repository: onmax/nuxt-skills
Commit: 00fb59d

Evaluated: about 1 month ago
Agent: Claude Code
Model: Claude Sonnet 4.6

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.