Use Base Components
Replace native HTML form elements with Base* components in Vue files AND ensure every...
Install
npx skills add chamilo/chamilo-lms --skill use-base-components -g -a claude-code -y- Repository
- chamilo/chamilo-lms1k
- Category
- Engineering
- Updated
- 3d ago
- License
- GPL-3.0
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Replace native HTML form elements with Base* components in Vue files AND ensure every Base*/SectionHeader/Fieldset tag in any Vue file has a matching import in <script setup> (Vue 3 does not auto-register most local components in this project; see the global list below). Auto-invoke when: user creates ANY new Vue file or page (form, dialog, view), adds Base*/SectionHeader/Fieldset tags to an existing Vue file, edits a Vue file containing native <input>, <select>, <textarea>, or <checkbox> elements, asks to refactor form fields, reports "Failed to resolve component" runtime warnings, or mentions SectionHeader or any Base* component by name. Do NOT invoke for: non-Vue files, React or Angular components, styling-only changes inside files whose Base* imports are already complete.
Review the Vue file(s) referenced in $ARGUMENTS (or the currently open file if no argument is given)
and replace every native HTML form element with the appropriate Base* component from
assets/vue/components/basecomponents/. Follow the mapping and rules below exactly.
⚠ Critical rule (read first): every component used in the template must be imported
In this project, Vue 3 with <script setup> does NOT auto-register most local components.
A small set of components is registered globally in assets/vue/main.js (the app.component(...) calls) and must
NOT be imported:
- PrimeVue (global):
Dialog,ConfirmDialog,DataView,Dropdown(alias ofSelect),InputText,Button,Column,ColumnGroup,Toolbar. - Base (global):
BaseAppLink.
Everything else, BaseButton, BaseDialog, BaseSelect, BaseTable, BaseInputText,
BaseInputNumber, BaseCheckbox, BaseCalendar, BaseAutocomplete, BaseMultiSelect,
BaseRadioButtons, BaseColorPicker, BaseTextArea, BaseIcon, SectionHeader, Fieldset,
etc., MUST be imported explicitly in <script setup>.
Note: prefer the
Base*wrapper over the raw PrimeVue global where one exists. UseBaseDialog(not the globalDialog),BaseSelect(not the globalDropdown),BaseInputText(not the globalInputText),BaseButton(not the globalButton). The PrimeVue globals exist mostly for legacy/transitional code and insideBase*wrappers.Column,ColumnGroupandToolbarare the normal exceptions you use directly (insideBaseTable).
