contributing_skill

Overview

This skill is a concise contributor guide for Nuxt UI that helps maintain consistent component design, theming, testing, and documentation. It bundles the recommended project structure, CLI scaffolding, component creation checklist, PR review criteria, and common commands. Use it to onboard contributors and speed up safe, standards-compliant contributions. It focuses on Vue components, Tailwind Variants theming, Vitest conventions, and MDC-style docs.

How this skill works

The guide inspects your task and points you to the single most relevant reference (component structure, theme structure, testing, or documentation) instead of loading everything at once. It provides a step-by-step component creation workflow and a PR review checklist to validate patterns, tests, semantic theming, and docs. It also lists code conventions and useful npm/pnpm commands to run locally before opening a PR.

When to use it

• When creating a new Vue component or scaffolding with the provided CLI.
• When modifying an existing component or updating its theme file.
• When writing or reviewing Vitest unit and snapshot tests for components.
• When drafting or reviewing component documentation using MDC guidelines.
• When performing a PR review to ensure code, theme, tests, and docs comply.

Best practices

• Scaffold components with the CLI (nuxt-ui make component) and follow the provided checklist from implementation through docs and tests.
• Keep theme files in src/theme as kebab-case and use semantic color tokens (text-default, bg-elevated) not raw Tailwind palette classes.
• Write reactive theming with computed(() => tv(...)) and merge UI context via useComponentUI(name, props).
• Follow testing patterns in references/testing.md: cover props, slots, accessibility, and include snapshots where useful.

Example use cases

• Scaffold a new button component, implement it in src/runtime/components, add a theme in src/theme, export types, write tests, and add docs and playground.
• Review a component PR to verify semantic theming, test coverage for accessibility, and proper documentation sections (Usage, Examples, API).
• Update a component theme to add a new variant using Tailwind Variants compoundVariants and ensure computed tv usage.
• Write Vitest tests for a form component that uses useFormField and ensure forwarded props and emits behave correctly.
• Create a documentation page using MDC syntax with clear examples and API reference.