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

scaffold-frontend-page

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building consistent, convention-compliant Nuxt 3 list pages for new web app resources requires hours of repetitive boilerplate coding for page structure, card components, data fetching composables, and translation keys, slowing down frontend development workflows.

Core Features & Use Cases

  • Generates full list pages with StructuralScreen/Column layout, card grid, create modal, and nested NuxtPage detail route outlet
  • Auto-creates matching resource card components and Pinia-Colada data fetching/mutation composables
  • Adds all required i18n translation keys across 4 supported locales (de, en, fr, it)
  • Use Case: For a Swiss AI-Hub web app team adding a new "pipeline" resource, this skill generates the complete list page, card component, composables, and translations in one go, strictly following existing project patterns like agents.vue and roles.vue.

Quick Start

Use the scaffold-frontend-page skill to generate a complete list page, card component, composables, and i18n keys for the "pipeline" resource.

Frequently Asked Questions about scaffold-frontend-page

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

FAQPage Schema
How do I generate Nuxt 3 list pages without writing repetitive boilerplate code?▼

To generate Nuxt 3 list pages without boilerplate, this skill automates the creation of page structures, card grids, create modals, and nested detail routing for new web application resources. It instantly produces convention-compliant code matching existing frontend patterns.

How do I scaffold a Vue resource page with Pinia-Colada and PrimeVue components?▼

Scaffolding a Vue resource page with Pinia-Colada and PrimeVue is handled automatically by this skill, which generates matching card components alongside data fetching and mutation composables. It ensures strict adherence to standardized UI structures and project-specific component conventions.

Can I automatically add multi-locale i18n translation keys when creating new frontend pages?▼

You can automatically add multi-locale i18n translation keys when creating new frontend pages. The skill instantly generates and inserts all required translation entries across four supported locales: de, en, fr, and it, ensuring immediate multi-language support.

Does this scaffolding tool support Nuxt 3 nested routing for detail views?▼

This scaffolding tool fully supports Nuxt 3 nested routing for detail views by automatically including a NuxtPage detail route outlet within the generated layout. This enables seamless navigation between the resource card grid and individual item details.

What is the best way to maintain consistent frontend patterns when adding new resources to a web app?▼

The best way to maintain consistent frontend patterns when adding new resources is using this scaffolding skill, which strictly follows existing project conventions like agents.vue and roles.vue. It eliminates manual coding errors by standardizing the StructuralScreen layout and component architecture.

Related Skills

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

scaffold-composable

Generate Pinia-Colada query and mutation composables for Nuxt backend API resources.

Official
Intermediate
besidkabesidka
26

nuxt

Implement Nuxt 4+ patterns for server routes, routing, and middleware.

Official
Intermediate
a35506322a35506322

primevue

Standardize PrimeVue component implementation and form validation for Vue 3 projects.

Community
Basic
ChenyCHENYUChenyCHENYU
1.0k

page-codegen

Generate Vue 3 page components from JSON or natural language descriptions.

Community
Advanced