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

Ready to run

npx skills add https://github.com/iptodays/skills --skill frontend-standards-iptodays

💬 Prompt for ChatGPT / Claude Chat▼

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.