skills.rest
bbvch-ai
bbvch-aiOFFICIAL
Explore all skills by this author →
GitHub

scaffold-frontend-subpage

Generate nested tabbed detail pages with routing, composables, and i18n keys for Nuxt frontends.

9|2|Updated Nov 29, 2024
Search Tags:#frontend#routing#vue#scaffold#nuxt#detail-page#tab-navigation
One-click install
npx skills add https://github.com/bbvch-ai/aihub-core --skill scaffold-frontend-subpage
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scaffold-frontend-subpage
Source: https://github.com/bbvch-ai/aihub-core/tree/main/.claude/skills/scaffold-frontend-subpage
Command: npx skills add https://github.com/bbvch-ai/aihub-core --skill scaffold-frontend-subpage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually building consistent nested tabbed detail pages in Nuxt frontends is time-consuming and prone to routing, navigation, and structural inconsistencies across different resources.

Core Features & Use Cases

  • Automated File Generation: Creates all required files for tabbed detail pages, including the detail wrapper, individual tab content pages, data fetching composables, and i18n keys.
  • Convention-Aligned Structure: Follows the project's established patterns for Nuxt nested routing, PrimeVue SelectButton tab navigation, StructuralColumn layout, and NavItem type definitions.
  • Flexible Route Support: Handles both simple dynamic route parameters (e.g., [pipeline_id]) and compound identifiers (e.g., [agent_class]-[agent_id]) for different resource types.
  • Use Case: For example, when adding a new detail page for connectors with overview, settings, and logs tabs, this skill automatically generates all required files following project conventions, eliminating manual boilerplate work.

Quick Start

Use the scaffold-frontend-subpage skill to create a tabbed detail page for the pipelines resource with overview and configuration tabs.

Frequently Asked Questions about scaffold-frontend-subpage

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

FAQPage Schema
How do I scaffold a tabbed detail page in a Nuxt frontend?▼

Scaffolding a tabbed detail page in a Nuxt frontend requires generating detail wrapper pages, tab content pages, data fetching composables, and i18n keys. This process follows established project conventions for nested routing and PrimeVue SelectButton tab navigation.

Does this Nuxt routing scaffold support compound dynamic route parameters?▼

Yes, this Nuxt routing scaffold supports both simple dynamic route parameters like [pipeline_id] and compound identifiers such as [agent_class]-[agent_id], allowing flexible route handling for different resource types.

What is the best way to eliminate boilerplate when adding nested detail views in Nuxt?▼

The best way to eliminate boilerplate for nested detail views in Nuxt is to use an automated scaffolding approach that generates all required files consistently, preventing routing and structural inconsistencies across different resources.

Can I use PrimeVue SelectButton for tab navigation in my generated Nuxt pages?▼

Yes, you can use PrimeVue SelectButton for tab navigation. The generated file structure specifically aligns with project conventions for Nuxt nested routing and PrimeVue SelectButton tab navigation components.

Why do manually created tabbed detail pages in Nuxt often have structural inconsistencies?▼

Manually created tabbed detail pages in Nuxt often have structural inconsistencies because building nested routing, navigation, and layout patterns by hand is time-consuming and prone to deviation across different resources.

Do I need to manually create i18n keys when adding a new resource detail view?▼

No, you do not need to manually create i18n keys. The automated file generation process includes creating the required i18n keys alongside the detail wrapper pages, tab content pages, and data fetching composables.

Related Skills

Explore More Software Engineering Skills→
bbvch-aibbvch-ai
9

scaffold-frontend-page

Generate Nuxt 3 list pages with card grids, modals, and i18n keys.

Official
Intermediate
lenneTechlenneTech

developing-lt-frontend

Develop lenne.tech Nuxt 4 frontends with TypeScript, Valibot forms, and generated API types.

Official
Advanced
fusenginefusengine
22

nextjs-i18n

Implement locale-based routing and type-safe messages in Next.js 16 applications.

Community
Intermediate
omakeiomakei
2

nuxt-pages

Standardize Nuxt 4 page routing and metadata with definePageMeta patterns.

Community
Advanced