skills.rest
iptodays
iptodaysCOMMUNITY
Explore all skills by this author →
𝕏@iptodaysGitHub

frontend-standards

Standardize Vue 3 frontend code quality and project structure.

Updated Apr 11, 2026
Search Tags:#typescript#frontend#i18n#vite#dark mode#vue3#pinia
One-click install
npx skills add https://github.com/iptodays/skills --skill frontend-standards-iptodays
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-standards
Source: https://github.com/iptodays/skills/tree/main/frontend-standards
Command: npx skills add https://github.com/iptodays/skills --skill frontend-standards-iptodays

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps frontend teams keep Vue 3 projects consistent, maintainable, and easy to extend by applying one shared set of coding standards across components, styling, localization, state, and cleanup rules.

Core Features & Use Cases

  • Reuse-first component design to reduce duplication and keep UI logic maintainable.
  • Styling guidance that respects the existing stack, including Tailwind or project-specific CSS approaches and dark mode handling.
  • Internationalization, Pinia state management, lifecycle cleanup, icon usage, and Vue single-file component structure rules that fit real-world admin systems, websites, and web apps.

Quick Start

Ask the skill to review your Vue 3 frontend and rewrite the affected code so it follows these standards.

Frequently Asked Questions about frontend-standards

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

FAQPage Schema
How do I standardize Vue 3 component structure and project architecture?▼

Standardize Vue 3 components by enforcing reuse-first design and consistent single-file component patterns. This enforces maintainable UI logic, reduces code duplication, and ensures project-wide architectural consistency across admin systems and web applications.

What's the best way to manage Pinia stores and lifecycle cleanup in Vue 3?▼

The best way to manage Pinia stores and lifecycle cleanup is by isolating state logic and enforcing strict cleanup rules. This maintains state predictability, prevents memory leaks, and keeps your Vue 3 application maintainable during complex component interactions.

How do I handle dark mode CSS conventions and internationalization in a Vite project?▼

Handle dark mode and internationalization by applying framework-aware CSS conventions and vue-i18n coverage. This ensures consistent theme switching and complete localization across your Vue 3 and Vite application components.

Does this frontend standardization approach work with TypeScript and Tailwind CSS?▼

Yes, this standardization approach works with TypeScript and Tailwind CSS. It enforces Vue 3 plus TypeScript component design while providing styling guidance that respects existing project CSS approaches, ensuring type safety and consistent UI styling.

Can I use these Vue 3 coding standards for corporate websites and admin systems?▼

Yes, you can use these Vue 3 coding standards for corporate websites and admin systems. The rules target real-world web applications, ensuring centralized icon usage, isolated Pinia stores, and maintainable component architecture across diverse project scales.

Related Skills

Explore More Software Engineering Skills→
symbiosikasymbiosika

frontend-app

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

Official
Advanced
inbharataiinbharatai
22

vue-component

Generate Vue 3 components with Composition API, Pinia, TypeScript, and unit tests.

Community
Intermediate
TijmenWierengaTijmenWierenga

tailwindcss-development

Apply Tailwind CSS v4 utilities to HTML, JSX, and Vue templates.

Community
Intermediate
HsnSaboorHsnSaboor

frontend-development

Provide frontend development guidelines for React, Vue 3, Svelte 5, and Angular.

Community
Advanced