What problem does it solve?
This Skill solves the problem of inconsistent implementation of OrangeHRM's standard Vue frontend cross-cutting features by providing a single authoritative reference for the pre-wired core utilities and their established usage conventions, eliminating guesswork and reducing bugs from non-standard implementation when building or modifying application pages.
Core Features & Use Cases
- Authoritative reference for pre-wired utilities: Covers all cross-cutting Vue plugins and helpers available out of the box in OrangeHRM, including internationalization (
$t), access control ($can), user notifications ($toast), global loader, navigation helpers, and date formatting utilities, along with their exact usage patterns and edge cases.
- Convention enforcement guidance: Documents critical project rules such as module-grouped translation key naming, exact backend data group name matching for permissions, and mandatory use of semantic toast shortcuts to ensure consistent user experience across the entire application.
- Use case: Use this Skill whenever building, modifying, or debugging OrangeHRM Vue pages to correctly implement user-facing translations, gate UI elements by user permissions, show standardized notifications, navigate between pages, or format dates per user preferences, without reinventing existing functionality.
Quick Start
Use this skill to correctly implement permission-gated UI elements and standardized success notifications when building a new OrangeHRM Vue page for employee management.
