# Use Base Components

Replace native HTML form elements with Base* components in Vue files AND ensure every...

- Repository: https://github.com/chamilo/chamilo-lms (1019 stars)
- Category: Engineering
- License: GPL-3.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add chamilo/chamilo-lms --skill use-base-components -g -a claude-code -y`
Codex: `npx skills add chamilo/chamilo-lms --skill use-base-components -g -a codex -y`
Cursor: `npx skills add chamilo/chamilo-lms --skill use-base-components -g -a cursor -y`
Gemini CLI: `npx skills add chamilo/chamilo-lms --skill use-base-components -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

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 of `Select`),
  `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. Use
> `BaseDialog` (not the global `Dialog`), `BaseSelect` (not the global `Dropdown`),
> `BaseInputText` (not the global `InputText`), `BaseButton` (not the global `Button`).
> The PrimeVue globals exist mostly for legacy/transitional code and inside `Base*` wrappers.
> `Column`, `ColumnGroup` and `Toolbar` are the normal exceptions you use directly (inside
> `BaseTable`).

The rest: https://github.com/chamilo/chamilo-lms/blob/HEAD/.claude/skills/use-base-components/SKILL.md