skills.rest
donPuerto
donPuertoCOMMUNITY
Explore all skills by this author →
Website𝕏@donpuerto_GitHub

nuxt-ui-patterns

Guide Nuxt.js UI development using local wrappers and Tailwind conventions.

Updated Aug 27, 2026
Search Tags:#UI development#shadcn/ui#Tailwind CSS#component reuse#Nuxt.js
One-click install
npx skills add https://github.com/donPuerto/nuxt-ai-automation-portfolio --skill nuxt-ui-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt-ui-patterns
Source: https://github.com/donPuerto/nuxt-ai-automation-portfolio/tree/main/.codex/skills/nuxt-ui-patterns
Command: npx skills add https://github.com/donPuerto/nuxt-ai-automation-portfolio --skill nuxt-ui-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of efficiently building and refactoring UI components in a Nuxt.js project, providing a standardized approach to UI development by leveraging existing local wrappers.

Core Features & Use Cases

  • UI Component Reuse: Encourages reuse of local UI wrappers for consistency across the application.
  • Pattern Matching: Helps developers quickly find and apply existing UI patterns from app/components/ui and app/components/global.
  • Tailwind and Theme Tokens: Ensures styling adheres to the project's Tailwind CSS conventions and theme tokens.

Quick Start

Use the nuxt-ui-patterns skill to implement a new button component in the 'app/components/ui' directory following the established patterns.

Frequently Asked Questions about nuxt-ui-patterns

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

FAQPage Schema
How do I ensure UI component consistency in a Nuxt.js project using Tailwind CSS?▼

To ensure UI component consistency in a Nuxt.js project, this framework guides the use of existing local UI wrappers. It enforces adherence to established styling conventions and Tailwind CSS theme tokens across your application.

What is the best way to reuse shadcn/ui components in Nuxt.js?▼

The best way to reuse shadcn/ui components in Nuxt.js is by applying existing UI patterns from local wrapper directories. This approach standardizes UI development and maintains styling consistency across modern Vue.js applications.

Can I use this to find existing UI patterns in my app/components directory?▼

Yes, you can use this to find and apply existing UI patterns from the app/components/ui and app/components/global directories. It helps developers quickly match and reuse local UI wrappers during refactoring.

Does this framework require manual configuration of Tailwind CSS theme tokens?▼

No manual configuration of theme tokens is required. The framework automatically ensures that your UI component styling adheres to the project's established Tailwind CSS conventions and existing theme tokens.

How to implement a new button component in Nuxt.js following established patterns?▼

To implement a new button component following established patterns, use this framework to guide the creation process in the app/components/ui directory. It leverages local UI wrappers to maintain application-wide consistency.

Related Skills

Explore More Software Engineering Skills→
daveiodaveio

tailwind-theme-builder

Configure Tailwind v4 and shadcn/ui theming with CSS variables and dark mode.

Community
Advanced
zinohomezinohome
1

page-layout-builder

Generate page layouts and shells for common web application patterns.

Community
Intermediate
ngocp-0847ngocp-0847
1

ui-styling

Compose React UIs using shadcn/ui components with Tailwind CSS styling.

Community
Advanced
hschnehschne
1

tailwind

Style Rails ERB views and Svelte components with Tailwind CSS and DaisyUI utilities.

Community
Intermediate