skills.rest
jd-solanki
jd-solankiCOMMUNITY
Explore all skills by this author →
Website𝕏@me_jd_solankiGitHub

ui-guidelines

Guide Nuxt UI component implementation with token-based theming and ARIA practices.

Updated Feb 7, 2026
Search Tags:#accessibility#design-system#tailwindcss#responsive-design#nuxt-ui#ui-guidelines#token-based-theming
One-click install
npx skills add https://github.com/jd-solanki/lekhan-internal-sync --skill ui-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-guidelines
Source: https://github.com/jd-solanki/lekhan-internal-sync/tree/main/.agents/skills/ui-guidelines
Command: npx skills add https://github.com/jd-solanki/lekhan-internal-sync --skill ui-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams apply a unified Nuxt UI design system across projects, reducing inconsistencies and manual styling work.

Core Features & Use Cases

  • Guidance on using Nuxt UI MCP for component documentation.
  • Enforcement of semantic color tokens and Tailwind utilities for responsive, accessible UI.
  • Real-world use: build a dashboard that aligns typography, spacing, and color across pages with minimal custom CSS.

Quick Start

Review the Nuxt UI design system tokens and component usage, then implement tokens like text-muted, bg-default, and spacing utilities in your pages and components.

Frequently Asked Questions about ui-guidelines

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

FAQPage Schema
How do I implement consistent design tokens in Nuxt UI components?▼

To implement consistent design tokens in Nuxt UI components, apply semantic color tokens like text-muted and bg-default alongside Tailwind utility classes. This ensures unified styling across pages and dashboards without manual custom CSS.

What is token-based theming for Nuxt UI and when do I need it?▼

Token-based theming for Nuxt UI is a design system approach using semantic color tokens and Tailwind utilities to maintain visual consistency. You need it when building Nuxt projects requiring responsive layouts and accessible components across multiple pages.

How to build accessible dashboards with Nuxt UI and Tailwind CSS?▼

Build accessible dashboards with Nuxt UI by enforcing semantic color tokens, Tailwind utilities, and ARIA practices. Align typography, spacing, and color across pages using design system guidelines to ensure responsive and accessible components.

Does this design system approach work with existing Tailwind utility classes?▼

Yes, this design system approach works with existing Tailwind utility classes by enforcing semantic color tokens and spacing utilities. It requires adhering to Tailwind utilities and ARIA practices per the Nuxt UI design system guidelines.

What's the best way to standardize typography and spacing across Nuxt pages?▼

The best way to standardize typography and spacing across Nuxt pages is using the Nuxt UI design system tokens. Implementing tokens like text-muted and spacing utilities ensures alignment across pages with minimal custom CSS.

Why does my Nuxt UI component styling break across different pages?▼

Nuxt UI component styling breaks across pages when developers deviate from the unified design system. Reduce inconsistencies and manual styling work by adhering to semantic color tokens, Tailwind utilities, and ARIA practices per the design system guidelines.

Related Skills

Explore More Design & Creative Skills→
djankiesdjankies

using-theme-variables

Define and apply Tailwind v4 design tokens using the @theme directive.

Community
Advanced
effiemincereffiemincer

frontend-design

Create frontend interfaces with token-based typography, color, spacing, and responsive layouts.

Community
Advanced
HarshodaiHarshodai

ui-styling

Integrate shadcn/ui components with Tailwind CSS for accessible, responsive interfaces.

Community
Advanced
leonardoteodorooleonardoteodoroo

tailwind-design-system

Create Tailwind v4 design systems with semantic tokens and CVA components.

Community
Advanced