What problem does it solve? OrangeHRM's frontend is not a typical single-page app: there is no vue-router, every page is a fresh Vue app mounted by a backend Twig template, and a kebab-case component name is the contract between PHP controllers and Vue. This Skill explains that architecture so new pages render correctly instead of failing silently. ## Core Features & Use Cases - Four-step page registration: create the Vue component, register it in the plugin's index.ts with a kebab-case key, confirm pages.ts spreads the plugin, and reference the same string in the backend controller's preRender(). - OXD design system catalog: documents the @ohrm/oxd components actually used (oxd-form, oxd-card-table, oxd-grid, oxd-button) plus the custom @ohrm/components layer (DateInput, EmployeeAutocomplete, DeleteConfirmationDialog). - Page anatomy and conventions: mixed Composition + Options API, external scoped SCSS, $t() translations, $can ACL gates, usePaginate/useSort composables, and navigate() for full-page transitions. - Use Case: You need to add a new employee list page. Follow the checklist to write the .vue file, register 'employee-list' in orangehrmPimPlugin/index.ts, and wire the matching PHP controller so the page renders on first try. ## Quick Start Ask the agent to add a new Vue list page for a feature and have it follow the four-step registration flow with OXD table components.
