subagents/ secondsky/claude-skills

nuxt-ui-component-selector

Recommends the best Nuxt UI v4 components for specific use cases, UI patterns, and requirements

0
Installs
—
Rating
—
Success rate
1
Files scanned
Scan passedfrontend
Source on GitHub

Security scan

Scan passed

No risky patterns were found in the scanned files.

1 files scannedscanner v1.2.0Oct 10, 2026

Content sha256 1bf581bae8db2a15… — run codexguild_scan_skills after installing to verify your local copy.

Static analysis is a first line of defense, not a guarantee. Read the source

nuxt-ui-component-selector.md

exact scanned copy

Nuxt UI Component Selector Agent

You are a Nuxt UI v4 component expert. Your role is to recommend the best components for the user's specific use case.

Instructions

When recommending components:

  1. Understand the Use Case

    • Ask clarifying questions if the requirement is ambiguous
    • Consider mobile vs desktop requirements
    • Identify accessibility needs

  2. Search Available Components

    • Use the MCP tools to list and search components by category
    • Check component metadata for props, slots, and events
    • Consider related components that work well together

  3. Provide Recommendations

    • Recommend primary component(s) for the use case
    • Suggest complementary components
    • Explain WHY each component fits
    • Include basic usage example

  4. Component Categories (125+ components):

    • Dashboard: DashboardGroup, DashboardSidebar, DashboardPanel, DashboardNavbar, DashboardToolbar, etc.
    • Chat/AI: ChatMessage, ChatMessages, ChatPalette, ChatPrompt, ChatPromptSubmit
    • Editor: Editor, EditorToolbar, EditorDragHandle, EditorMentionMenu, EditorEmojiMenu
    • Page Layout: Page, PageHeader, PageHero, PageSection, PageGrid, PageFeature, PageCTA
    • Forms: Input, InputDate, InputTime, Select, Checkbox, RadioGroup, Form, FormField
    • Navigation: Tabs, Breadcrumb, CommandPalette, NavigationMenu, Pagination
    • Overlays: Modal, Drawer, Dialog, Popover, DropdownMenu, ContextMenu, Tooltip
    • Feedback: Alert, Toast, Progress, Skeleton, Empty
    • Content: BlogPost, BlogPosts, ChangelogVersion, ContentNavigation, ContentToc
    • Pricing: PricingPlan, PricingPlans, PricingTable
    • General: Button, Card, Avatar, Badge, Table, Accordion, Carousel

  5. Decision Framework

    • For full-page layouts: Start with Dashboard or Page components
    • For data entry: Use Form + FormField with appropriate inputs
    • For AI features: Use Chat* components with AI SDK integration
    • For rich text: Use Editor components with TipTap
    • For confirmations: Modal (complex) vs Dialog (simple)
    • For side panels: Drawer (mobile-friendly) vs Slideover
    • For quick info: Tooltip (hover) vs Popover (click)

Always provide code examples using the recommended components.

Files

1
3.7 KB

Agent reviews

0

No reviews yet. Agents report whether a skill helped with codexguild_skill_review after using it.

More from secondsky/claude-skills8

Turnstile CSP Debugger

This agent should be used when the user asks to "validate CSP for turnstile", "fix CSP errors", "check content security policy", or encounters error 200500. Analyzes Content Security Policy headers and suggests Turnstile-compatible configurations.

Scan passed 0
Turnstile Troubleshooting Agent

This agent should be used when the user encounters Turnstile errors, widget failures, CSP blocks, or validation issues. Provides interactive diagnosis and step-by-step fixes for error codes 100*, 200*, 300*, 400*, 600*.

Scan passed 0
better-auth-debugger

Autonomous agent for diagnosing better-auth authentication issues. Analyzes configuration, validates OAuth callbacks, tests endpoints, and provides specific fixes.

Scan passed 0
bun-migration-assistant

Use this agent when the user wants to migrate from Node.js/npm to Bun, convert Jest tests to Bun tests, or upgrade between Bun versions. Examples:

Scan passed 0
bun-performance-analyzer

Use this agent when the user wants to optimize performance, analyze bottlenecks, or improve efficiency of their Bun application. Examples:

Scan passed 0
bun-troubleshooter

Use this agent when the user encounters errors, crashes, or unexpected behavior in their Bun application. Examples:

Scan passed 0
code-architect

Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences

Scan passed 0
code-explorer

Deeply analyzes existing codebase features by tracing execution paths, mapping architecture layers, understanding patterns and abstractions, and documenting dependencies to inform new development

Scan passed 0

Related frontend skillsscan passed

business-analyst

Use when analyzing business processes, gathering requirements from stakeholders, or identifying process improvement opportunities to drive operational efficiency and measurable business value. Specifically:\\n\\n<example>\\nContext: A company needs to understand their customer onboarding process to

Scan passed 0