skills.rest
fawzymohamed
fawzymohamedCOMMUNITY
Explore all skills by this author →
GitHub

nuxt-ui

Design and implement Nuxt UI v4 components for dashboards.

1|Updated Dec 30, 2025
Search Tags:#frontend#vue#patterns#responsive#nuxt#ui-components#nuxt-ui
One-click install
npx skills add https://github.com/fawzymohamed/devops --skill nuxt-ui-fawzymohamed
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt-ui
Source: https://github.com/fawzymohamed/devops/tree/main/.claude/skills/nuxt-ui
Command: npx skills add https://github.com/fawzymohamed/devops --skill nuxt-ui-fawzymohamed

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlined guidance for using Nuxt UI v4 to build consistent, accessible, and responsive interfaces across Vue/Nuxt applications, reducing design drift and development time.

Core Features & Use Cases

  • Component patterns: Buttons, cards, modals, forms, and navigation implemented with Nuxt UI for cohesive visuals.
  • Theming and accessibility: Theme tokens and ARIA-friendly patterns to ensure accessible UI across breakpoints.
  • Use Case: A team delivering an admin dashboard can reuse standardized Nuxt UI components to accelerate delivery while maintaining a uniform look and behavior.

Quick Start

Create a responsive Nuxt UI button group and a sample card using v4 components for a dashboard page.

Frequently Asked Questions about nuxt-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build consistent Vue dashboard components with Nuxt UI v4?▼

Build consistent Vue dashboard components by applying Nuxt UI v4 patterns for buttons, cards, and modals, using a central theme configuration for color tokens to ensure uniform visuals across your Nuxt 3 or 4 application.

What is the best way to style responsive forms and navigation in Nuxt 3?▼

Style responsive forms and navigation in Nuxt 3 by leveraging Nuxt UI v4 components integrated with Heroicons, ensuring accessible ARIA-friendly behavior across different breakpoints.

Does Nuxt UI v4 require a central theme configuration for color tokens?▼

Yes, implementing Nuxt UI v4 requires a central theme configuration for color tokens to maintain visual consistency and prevent design drift across your Vue and Nuxt applications.

Can I use Nuxt UI patterns to prevent design drift in admin dashboards?▼

Yes, you can use Nuxt UI patterns to prevent design drift in admin dashboards by standardizing common elements like cards and modals, accelerating delivery while maintaining a uniform look.

How do I ensure accessibility when creating Nuxt UI components?▼

Ensure accessibility when creating Nuxt UI components by following ARIA-friendly patterns and utilizing the framework's theme tokens to support accessible interfaces across all responsive breakpoints.

Related Skills

Explore More Software Engineering Skills→
deomiarndeomiarn

final-checklist

Automate pre-launch website verification across SEO, accessibility, and deployment workflows.

Community
Intermediate
GuibibiGuibibi

nuxt-ui

Build styled Nuxt 4 and Vue 3 interfaces with @nuxt/ui v4 components.

Community
Advanced
raugadhraugadh
63

tailwindcss-development

Style components with Tailwind CSS v4 utilities for responsive design and dark mode.

Community
Intermediate
amarnath3003amarnath3003
4

Dataset Lab UI Kit - Replication Skill

Recreate a neumorphic Control Console design system with Tailwind CSS and React components.

Community
Advanced