using-ngx-gaia
Provides usage guidance for @vsn-ux/ngx-gaia Angular components (Gaia design system). Use when implementing UI with ga- prefixed elements, GaButtonModule, GaSelectModule, ga-form-field, gaInput directives, or when asking about Gaia components.
When & Why to Use This Skill
This Claude skill provides comprehensive usage guidance and implementation support for the @vsn-ux/ngx-gaia Angular component library (Gaia design system). It helps developers accelerate frontend development by providing precise code patterns for ga-prefixed elements, directives, and module imports, ensuring adherence to Gaia design standards.
Use Cases
- Implementing Gaia UI components such as buttons, alerts, and selects with correct Angular syntax and ga- prefixes.
- Identifying and importing the necessary GaModule (e.g., GaButtonModule, GaSelectModule) for specific UI features to ensure proper dependency management.
- Applying Gaia-specific directives like [gaButton], [gaInput], and [gaTooltip] to enhance standard HTML elements with design system styling.
- Accessing documentation and usage patterns for complex Angular components like Modals, Steppers, and Data Selects within the Gaia ecosystem.
| name | using-ngx-gaia |
|---|---|
| description | Provides usage guidance for @vsn-ux/ngx-gaia Angular components (Gaia design system). Use when implementing UI with ga- prefixed elements, GaButtonModule, GaSelectModule, ga-form-field, gaInput directives, or when asking about Gaia components. |
ngx-gaia
Requires @vsn-ux/ngx-gaia. If doc links fail, the package is not installed in this project.
Patterns
- Elements:
<ga-alert>,<ga-button>,<ga-select> - Directives:
[gaButton],[gaInput],[gaTooltip] - Modules:
Ga{Component}Module(e.g.,GaButtonModule)
Components
| Component | Module | Docs |
|---|---|---|
| Alert | GaAlertModule | alert.md |
| Badge | GaBadgeModule | badge.md |
| Button | GaButtonModule | button.md |
| Card | GaCardModule | card.md |
| Checkbox | GaCheckboxModule | checkbox.md |
| Chip | GaChipModule | chip.md |
| Data Select | GaDataSelectModule | data-select.md |
| Datepicker | GaDatepickerModule | datepicker.md |
| Form Field | GaFormFieldModule | form-field.md |
| Icon | GaIconModule | icon.md |
| Input | GaInputModule | input.md |
| Link | GaLinkModule | link.md |
| Menu | GaMenuModule | menu.md |
| Modal | GaModalModule | modal.md |
| Radio | GaRadioModule | radio.md |
| Segmented Control | GaSegmentedControlModule | segmented-control.md |
| Select | GaSelectModule | select.md |
| Spinner | GaSpinnerModule | spinner.md |
| Stepper | GaStepperModule | stepper.md |
| Switch | GaSwitchModule | switch.md |
| Tabs | GaTabsModule | tabs.md |
| Text Area | GaTextAreaModule | textarea.md |
| Tooltip | GaTooltipModule | tooltip.md |
| Utils | - | utils.md |