skills.rest
symbiosika
symbiosikaOFFICIAL
Explore all skills by this author →
GitHub

frontend-app

Scaffold and edit Vue 3 components and views with Vite and Tailwind CSS v4.

2|Updated Oct 18, 2025
Search Tags:#frontend#components#vue#i18n#tailwind#vue3#pinia
One-click install
npx skills add https://github.com/symbiosika/symbiosika-framework --skill frontend-app
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-app
Source: https://github.com/symbiosika/symbiosika-framework/tree/main/docs/skills/frontend-app
Command: npx skills add https://github.com/symbiosika/symbiosika-framework --skill frontend-app

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Editing and creating frontend files can be error-prone and time-consuming when building modern Vue 3 applications. This Skill helps you quickly navigate and scaffold tasks in frontend/src/, configure components, styling, and internationalization without leaving your workflow.

Core Features & Use Cases

  • Create Vue components, views, and pages in frontend/src/ using Vue 3 Composition API.
  • Style with Tailwind CSS v4 and PrimeVue/Volt components, with i18n setup via Vue I18n.
  • Use the Fetcher helper and Pinia stores for state management and data fetching.
  • Support for auto-imports and a streamlined development workflow for common frontend tasks.

Quick Start

Begin by opening a Vue component you want to edit in frontend/src/ and implement the requested UI changes.

Frequently Asked Questions about frontend-app

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

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

To scaffold Vue 3 components with Tailwind CSS and PrimeVue, open a target file in frontend/src/ and the Skill guides you through creating Composition API components, applying Tailwind v4 styling, and integrating PrimeVue/Volt elements for your UI views.

What is the best way to set up i18n in a Vue 3 Vite project?▼

The best way to set up i18n in a Vue 3 Vite project is using Vue I18n within the frontend/src/ directory, where this Skill guides you to configure translations and integrate internationalization directly into your components and views.

Can I use Pinia for state management when creating Vue 3 views?▼

Yes, you can use Pinia for state management when creating Vue 3 views, as this Skill supports integrating Pinia stores and using a Fetcher helper utility to handle data fetching within your TypeScript-based Composition API stack.

Do I need auto-imports configured to build Vue 3 frontend pages?▼

Yes, you need auto-imports configured to build Vue 3 frontend pages efficiently, as this Skill requires a valid frontend/src structure that supports auto-imports to streamline the development workflow for common component and view tasks.

Why does my Vue 3 component editing workflow fail without a valid frontend/src structure?▼

Your Vue 3 component editing workflow fails without a valid frontend/src structure because this Skill explicitly requires that directory architecture to properly scaffold files, configure TypeScript stacks, and apply Tailwind CSS v4 styling.

Does the frontend-app Skill work with Vue 2 projects?▼

No, the frontend-app Skill does not work with Vue 2 projects because it is specifically designed for Vue 3 projects using Vite, the Composition API, Pinia, Tailwind CSS v4, and PrimeVue/Volt components.

Related Skills

Explore More Software Engineering Skills→
QING-YU123QING-YU123

frontend-generator

Scaffold Vue 3 pages and components with Naive UI and Tailwind CSS.

Community
Advanced
cslsoftwarescslsoftwares

developer-vuejs-routing-state

Configure Vue Router and Pinia with guards and lazy loading.

Community
Intermediate
sbsbhongsbsbhong

gluestack-ui-v4:variants

Automate custom UI variant creation for Gluestack v4 components.

Community
Intermediate
mtsatryanmtsatryan
1

vue-specialist

Guide Vue 3 Composition API practices with TypeScript, Pinia, and Vitest.

Community
Advanced