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

scaffold-frontend-component

Generate convention-compliant Vue 3 components with PrimeVue, Tailwind CSS, and i18n.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the risk of inconsistent Vue 3 component implementation that leads to UI bugs, design system drift, and technical debt when developers manually create components without adhering to project-specific conventions for PrimeVue, Tailwind CSS, i18n, and typed SDK integration.

Core Features & Use Cases

  • Multi-pattern component scaffolding: Supports card, modal/dialog, list/DataTable, form, empty card, and display component patterns out of the box, with pre-built templates for each.
  • Built-in convention enforcement: Automatically applies project rules including Composition API with TypeScript, typed props/emits using SDK types from @core/sdk/client, PrimeVue-only UI elements, Tailwind CSS with mandatory dark mode variants, and i18n for all user-facing text.
  • Use Case: Imagine your team needs to add a new "Pipeline" card component to the resource grid. Use this Skill to generate a fully compliant component in seconds, with correct domain-based file placement, active state synced to route params, and proper event handling, no manual boilerplate work required.

Quick Start

Use the scaffold-frontend-component skill to generate a new Pipeline Card component following the project's standard card pattern conventions.

Frequently Asked Questions about scaffold-frontend-component

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

FAQPage Schema
How do I scaffold Vue 3 components with PrimeVue and Tailwind CSS conventions?▼

To scaffold Vue 3 components with PrimeVue and Tailwind CSS conventions, use an automation skill that applies project-specific rules. This enforces typed props using SDK types, Composition API, dark mode variants, and i18n integration, ensuring consistent, convention-compliant frontend components without manual boilerplate work.

What is the best way to generate Nuxt components that follow strict TypeScript and i18n standards?▼

The best way to generate Nuxt components with TypeScript and i18n standards is using a dedicated scaffolding skill. It automatically injects typed props and emits from SDK types and configures internationalization for all user-facing text, eliminating manual configuration errors and ensuring design system consistency.

Does component scaffolding support different UI patterns like modals and DataTables?▼

Yes, component scaffolding supports multiple UI patterns including modals, DataTables, cards, forms, and empty state cards. It applies pre-built templates for each pattern, automatically configuring PrimeVue UI elements, Tailwind CSS dark mode variants, and correct domain-based file placement in your directory structure.

Can I use this scaffolding tool to enforce typed props from my existing SDK client?▼

Yes, you can use this scaffolding skill to enforce typed props from your existing SDK client. It automatically maps typed props and emits using SDK types from @core/sdk/client, ensuring your Vue 3 components maintain strict TypeScript integration and align with your backend data models.

Why does manual Vue 3 component creation lead to UI inconsistency and design system drift?▼

Manual Vue 3 component creation leads to UI inconsistency and design system drift because developers often skip project-specific conventions for PrimeVue, Tailwind CSS, and i18n. Automating component scaffolding eliminates this risk by enforcing typed SDK integration, dark mode support, and standardized file placement.

Related Skills

Explore More Software Engineering Skills→
dnsnamdangdnsnamdang

elearning-base-convention

Define coding and configuration standards for Vue 3 and Laravel 8 elearning projects.

Community
Advanced
Simon-He95Simon-He95
2.9k

markstream-vue

Render Markdown with streaming support in Vue 3 applications.

Community
Intermediate
jacexhjacexh

vue-typescript

Build Vue 3 components with TypeScript and the Composition API.

Community
Intermediate
ProjAnvilProjAnvil
3

frontend-vue

Automate Vue.js development workflows and scaffold Nuxt 3 projects with Tailwind CSS and Pinia.

Official
Intermediate