ReddRadar
Agent skill
nuxt-layers
Working with Nuxt layers (base, nuxt-ui, x-ui) that provide shared functionality. Use when understanding layer architecture, importing from layers, extending layer functionality, or creating new layers.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/nuxt-layers
SKILL.md
Nuxt Layers
Shared foundation layers providing composables, models, repositories, and UI components across applications.
Layer Stack
layers.md - Complete layer architecture, what each provides, how to extend
Three-Layer Architecture
x-ui → Extended UI components (XTable, XForm, XSlideover)
↓
nuxt-ui → UI primitives (modals, toasts, tabs, overlays)
↓
base → Core infrastructure (Model, Repository, composables, utils)
Extending Layers
// nuxt.config.ts
export default defineNuxtConfig({
extends: [
'../../../nuxt-layers/base',
'../../../nuxt-layers/nuxt-ui',
'../../../nuxt-layers/x-ui',
],
})
Importing from Layers
// Base layer imports
import Model from '#layers/base/app/models/Model'
import type { Castable, DataResponse } from '#layers/base/app/types'
import { BaseRepository } from '#layers/base/app/repositories/base-repository'
import { ModelHydrator } from '#layers/base/app/repositories/hydrators/model-hydrator'
// Composables auto-imported
const leadApi = useRepository('leads')
const { start, stop } = useWait()
const { can } = usePermissions()
Base Layer Provides
| Category | Items |
|---|---|
| Composables | useRepository, useQuery, useFilterQuery, useWait, usePermissions, useFlash, useForm, useReactiveFilters, useRealtime, useShadowCache |
| Classes | Model, BaseRepository, ApiClient, ModelHydrator |
| Errors | ValidationError, ConflictError, TooManyRequestsError |
| Utils | 49 utility functions (array, string, object, date, async) |
Nuxt-UI Layer Provides
| Category | Items |
|---|---|
| Composables | useModal, useSlideover, useConfirmationToast, useTabs, useDropdown, useAppHeader, useBreadcrumbs |
| Components | Copyable, SearchInput, SearchSelect, Rating, LoadingLine |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?