chameleon-controls-library

Category: Development & Coding | Uploader: genexuslabs | Downloads: 0 | Version: v1.0（Latest）

Builds UIs with Chameleon web components (ch-*). Use when the user mentions Chameleon, ch- components, or needs enterprise UI patterns like grids, trees, chat, sidebars, accordions, combos, tabs, dialogs, or forms. Also use for: implementing a UI from Figma or images, vibe coding a UI, migrating an existing UI to Chameleon, or auditing Chameleon usage in an application.

Changelog: Source: GitHub https://github.com/genexuslabs/genexus-skills

Directory Structure

Current level: tree/main/frontend/chameleon-controls-library/

📁 references/
- 📁 best-practices/
  - 📄 accessibility.md 1.4 KB
  - 📄 performance.md 1.4 KB
  - 📄 seo.md 1.1 KB
- 📁 components/
  - 📁 ch-accordion-render/
    
    📄 README.md 6.5 KB
    
    📄 styling.md 8.9 KB
    
    📄 usage.md 7.0 KB
  - 📁 ch-action-group-render/
    
    📄 README.md 16.2 KB
    
    📄 styling.md 7.2 KB
    
    📄 usage.md 5.3 KB
  - 📁 ch-action-list-render/
    
    📄 README.md 13.9 KB
    
    📄 styling.md 9.7 KB
    
    📄 usage.md 6.2 KB
  - 📁 ch-action-menu-render/
    
    📄 README.md 12.0 KB
    
    📄 styling.md 8.2 KB
    
    📄 usage.md 7.1 KB
  - 📁 ch-barcode-scanner/
    
    📄 README.md 7.2 KB
    
    📄 styling.md 3.0 KB
    
    📄 usage.md 3.5 KB
  - 📁 ch-chat/
    
    📄 README.md 46.6 KB
    
    📄 styling.md 8.2 KB
    
    📄 usage.md 9.4 KB
  - 📁 ch-checkbox/
    
    📄 README.md 11.2 KB
    
    📄 styling.md 8.7 KB
    
    📄 usage.md 5.1 KB
  - 📁 ch-code/
    
    📄 README.md 4.2 KB
    
    📄 styling.md 8.3 KB
    
    📄 usage.md 6.8 KB
  - 📁 ch-code-diff-editor/
    
    📄 README.md 6.9 KB
  - 📁 ch-code-editor/
    
    📄 README.md 7.2 KB
  - 📁 ch-color-field/
    
    📄 README.md 5.4 KB
    
    📄 styling.md 529 B
  - 📁 ch-color-picker/
    
    📄 README.md 46.3 KB
    
    📄 styling.md 18.3 KB
    
    📄 usage.md 6.0 KB
  - 📁 ch-combo-box-render/
    
    📄 README.md 27.2 KB
    
    📄 styling.md 15.8 KB
    
    📄 usage.md 9.2 KB
  - 📁 ch-dialog/
    
    📄 README.md 9.5 KB
    
    📄 styling.md 10.3 KB
    
    📄 usage.md 7.4 KB
  - 📁 ch-edit/
    
    📄 README.md 26.1 KB
    
    📄 styling.md 21.0 KB
    
    📄 usage.md 8.5 KB
  - 📁 ch-flexible-layout-render/
    
    📄 README.md 26.5 KB
    
    📄 styling.md 5.0 KB
    
    📄 usage.md 12.5 KB
  - 📁 ch-image/
    
    📄 README.md 6.3 KB
    
    📄 styling.md 2.4 KB
    
    📄 usage.md 4.1 KB
  - 📁 ch-intersection-observer/
    
    📄 README.md 7.0 KB
    
    📄 styling.md 1.7 KB
    
    📄 usage.md 3.6 KB
  - 📁 ch-layout-splitter/
    
    📄 README.md 8.2 KB
    
    📄 styling.md 4.8 KB
    
    📄 usage.md 6.2 KB
  - 📁 ch-live-kit-room/
    
    📄 README.md 8.5 KB
    
    📄 styling.md 1.6 KB
    
    📄 usage.md 4.3 KB
  - 📁 ch-markdown-viewer/
    
    📄 README.md 8.2 KB
    
    📄 styling.md 2.1 KB
    
    📄 usage.md 6.1 KB
  - 📁 ch-math-viewer/
    
    📄 README.md 4.6 KB
    
    📄 styling.md 3.4 KB
    
    📄 usage.md 4.0 KB
  - 📁 ch-navigation-list-render/
    
    📄 README.md 14.4 KB
    
    📄 styling.md 13.7 KB
    
    📄 usage.md 6.9 KB
  - 📁 ch-paginator-render/
    
    📄 README.md 32.2 KB
    
    📄 styling.md 4.8 KB
  - 📁 ch-popover/
    
    📄 README.md 16.9 KB
    
    📄 styling.md 7.0 KB
    
    📄 usage.md 6.7 KB
  - 📁 ch-progress/
    
    📄 README.md 13.4 KB
    
    📄 styling.md 3.0 KB
    
    📄 usage.md 5.4 KB
  - 📁 ch-qr/
    
    📄 README.md 6.2 KB
    
    📄 styling.md 1.8 KB
    
    📄 usage.md 2.9 KB
  - 📁 ch-radio-group-render/
    
    📄 README.md 5.8 KB
    
    📄 styling.md 6.5 KB
    
    📄 usage.md 4.4 KB
  - 📁 ch-rating/
    
    📄 README.md 5.2 KB
    
    📄 styling.md 4.5 KB
    
    📄 usage.md 4.0 KB
  - 📁 ch-rendering/
    
    📄 README.md 4.1 KB
  - 📁 ch-segmented-control-render/
    
    📄 README.md 5.8 KB
    
    📄 styling.md 4.2 KB
    
    📄 usage.md 5.3 KB
  - 📁 ch-shortcuts/
    
    📄 README.md 2.2 KB
    
    📄 styling.md 5.4 KB
    
    📄 usage.md 10.1 KB
  - 📁 ch-sidebar/
    
    📄 README.md 5.5 KB
    
    📄 styling.md 6.9 KB
    
    📄 usage.md 5.9 KB
  - 📁 ch-slider/
    
    📄 README.md 6.6 KB
    
    📄 styling.md 5.3 KB
    
    📄 usage.md 3.9 KB
  - 📁 ch-smart-grid/
    
    📄 README.md 12.0 KB
    
    📄 styling.md 4.2 KB
    
    📄 usage.md 9.3 KB
  - 📁 ch-status/
    
    📄 README.md 6.8 KB
    
    📄 styling.md 2.9 KB
    
    📄 usage.md 4.2 KB
  - 📁 ch-switch/
    
    📄 README.md 7.1 KB
    
    📄 styling.md 6.4 KB
    
    📄 usage.md 4.5 KB
  - 📁 ch-tab-render/
    
    📄 README.md 24.3 KB
    
    📄 styling.md 11.0 KB
    
    📄 usage.md 7.6 KB
  - 📁 ch-tabular-grid/
    
    📄 README.md 26.1 KB
    
    📄 styling.md 6.1 KB
    
    📄 usage.md 12.4 KB
  - 📁 ch-tabular-grid-action-refresh/
    
    📄 README.md 961 B
  - 📁 ch-tabular-grid-action-settings/
    
    📄 README.md 985 B
  - 📁 ch-tabular-grid-actionbar/
    
    📄 README.md 244 B
  - 📁 ch-tabular-grid-column/
    
    📄 README.md 14.5 KB
    
    📄 styling.md 729 B
  - 📁 ch-tabular-grid-column-display/
    
    📄 README.md 808 B
  - 📁 ch-tabular-grid-column-resize/
    
    📄 README.md 1.7 KB
  - 📁 ch-tabular-grid-column-settings/
    
    📄 README.md 1.4 KB
  - 📁 ch-tabular-grid-columnset/
    
    📄 README.md 1.5 KB
  - 📁 ch-tabular-grid-infinite-scroll/
    
    📄 README.md 1.1 KB
  - 📁 ch-tabular-grid-row-actions/
    
    📄 README.md 2.9 KB
  - 📁 ch-tabular-grid-rowset-empty/
    
    📄 README.md 289 B
  - 📁 ch-tabular-grid-rowset-legend/
    
    📄 README.md 1.9 KB
    
    📄 styling.md 328 B
  - 📁 ch-tabular-grid-settings/
    
    📄 README.md 1.7 KB
  - 📁 ch-tabular-grid-settings-columns/
    
    📄 README.md 1.0 KB
    
    📄 styling.md 249 B
  - 📁 ch-tabular-grid-virtual-scroller/
    
    📄 README.md 1.6 KB
  - 📁 ch-textblock/
    
    📄 README.md 6.9 KB
    
    📄 styling.md 4.2 KB
    
    📄 usage.md 5.7 KB
  - 📁 ch-theme/
    
    📄 README.md 7.6 KB
    
    📄 styling.md 2.7 KB
    
    📄 usage.md 4.4 KB
  - 📁 ch-tooltip/
    
    📄 README.md 5.9 KB
    
    📄 styling.md 7.4 KB
    
    📄 usage.md 8.1 KB
  - 📁 ch-tree-view-render/
    
    📄 README.md 64.1 KB
    
    📄 styling.md 18.7 KB
    
    📄 usage.md 9.5 KB
  - 📁 ch-virtual-scroller/
    
    📄 README.md 10.6 KB
    
    📄 styling.md 1.8 KB
    
    📄 usage.md 4.6 KB
- 📁 installation/
  - 📄 README.md 1.8 KB
- 📁 types/
  - 📄 AccessibleRole.ts 193 B
  - 📄 AccordionItemExpandedChangeEvent.ts 150 B
  - 📄 AccordionItemModel.ts 595 B
  - 📄 AccordionItemModelExpandedSize.ts 257 B
  - 📄 AccordionItemModelExpandedSizeUnit.ts 118 B
  - 📄 AccordionModel.ts 179 B
  - 📄 ActionGroupActionableModel.ts 346 B
  - 📄 ActionGroupItemModel.ts 412 B
  - 📄 ActionGroupModel.ts 187 B
  - 📄 ActionGroupSeparatorModel.ts 218 B
  - 📄 ActionGroupSlotModel.ts 198 B
  - 📄 ActionListCaptionChangeEventDetail.ts 157 B
  - 📄 ActionListFixedChangeEventDetail.ts 151 B
  - 📄 ActionListImagePathCallback.ts 337 B
  - 📄 ActionListItemActionable.ts 924 B
  - 📄 ActionListItemAdditionalAction.ts 423 B
  - 📄 ActionListItemAdditionalBase.ts 346 B
  - 📄 ActionListItemAdditionalCustom.ts 148 B
  - 📄 ActionListItemAdditionalInformation.ts 488 B
  - 📄 ActionListItemAdditionalItem.ts 588 B
  - 📄 ActionListItemAdditionalItemActionType.ts 392 B
  - 📄 ActionListItemAdditionalModel.ts 322 B
  - 📄 ActionListItemAdditionalSlot.ts 127 B
  - 📄 ActionListItemGroup.ts 808 B
  - 📄 ActionListItemModel.ts 396 B
  - 📄 ActionListItemModelExtended.ts 362 B
  - 📄 ActionListItemModelExtendedGroup.ts 312 B
  - 📄 ActionListItemModelExtendedRoot.ts 293 B
  - 📄 ActionListItemSeparator.ts 534 B
  - 📄 ActionListItemType.ts 548 B
  - 📄 ActionListItemTypeActionable.ts 120 B
  - 📄 ActionListItemTypeGroup.ts 110 B
  - 📄 ActionListItemTypeSeparator.ts 118 B
  - 📄 ActionListModel.ts 246 B
  - 📄 ActionListTranslations.ts 327 B
  - 📄 ActionMenuExpandedChangeEvent.ts 259 B
  - 📄 ActionMenuHyperlinkClickEvent.ts 261 B
  - 📄 ActionMenuImagePathCallback.ts 364 B
  - 📄 ActionMenuItemActionableModel.ts 1.1 KB
  - 📄 ActionMenuItemModel.ts 463 B
  - 📄 ActionMenuItemSeparatorModel.ts 264 B
  - 📄 ActionMenuItemSlotModel.ts 225 B
  - 📄 ActionMenuItemTypeActionable.ts 120 B
  - 📄 ActionMenuItemTypeSeparator.ts 166 B
  - 📄 ActionMenuItemTypeSlot.ts 108 B
  - 📄 ActionMenuModel.ts 183 B
  - 📄 ChatActionsRender.ts 231 B
  - 📄 ChatCallbacks.ts 2.2 KB
  - 📄 ChatCodeBlockRender.ts 236 B
  - 📄 ChatContentRender.ts 337 B
  - 📄 ChatFileRender.ts 287 B
  - 📄 ChatFileUploadState.ts 136 B
  - 📄 ChatLiveModeConfiguration.ts 201 B
  - 📄 ChatMessage.ts 1.5 KB
  - 📄 ChatMessageAssistant.ts 936 B
  - 📄 ChatMessageByRole.ts 526 B
  - 📄 ChatMessageByRoleNoId.ts 592 B
  - 📄 ChatMessageContent.ts 235 B
  - 📄 ChatMessageContentFilesAndSources.ts 321 B
  - 📄 ChatMessageError.ts 658 B
  - 📄 ChatMessageFile.ts 740 B
  - 📄 ChatMessageFiles.ts 172 B
  - 📄 ChatMessageRenderByItem.ts 262 B
  - 📄 ChatMessageRenderBySections.ts 2.2 KB
  - 📄 ChatMessageRole.ts 136 B
  - 📄 ChatMessageSource.ts 466 B
  - 📄 ChatMessageSources.ts 180 B
  - 📄 ChatMessageStructureRender.ts 515 B
  - 📄 ChatMessageSystem.ts 594 B
  - 📄 ChatMessageUser.ts 769 B
  - 📄 ChatSendContainerLayout.ts 417 B
  - 📄 ChatSendContainerLayoutElement.ts 231 B
  - 📄 ChatSourceRender.ts 247 B
  - 📄 ChatTranslations.ts 801 B
  - 📄 ChGridColumnFreeze.ts 222 B
  - 📄 ChGridColumnFreezeChangedEvent.ts 351 B
  - 📄 ChGridColumnHiddenChangedEvent.ts 275 B
  - 📄 ChGridColumnOrderChangedEvent.ts 271 B
  - 📄 ChGridColumnSizeChangedEvent.ts 268 B
  - 📄 ChGridColumnSortChangedEvent.ts 372 B
  - 📄 ChGridColumnSortDirection.ts 235 B
  - 📄 ChGridRowClickedEvent.ts 275 B
  - 📄 ChGridSelectionChangedEvent.ts 331 B
  - 📄 ChPaginatorNavigateClickedEvent.ts 224 B
  - 📄 ChPaginatorNavigateType.ts 141 B
  - 📄 ChPopoverAlign.ts 180 B
  - 📄 ChPopoverSizeMatch.ts 181 B
  - 📄 ChThemeLoadedEvent.ts 179 B
  - 📄 CodeDiffEditorOptions.ts 170 B
  - 📄 CodeEditorOptions.ts 162 B
  - 📄 ColorPickerControlsOrder.ts 258 B
  - 📄 ColorPickerTranslations.ts 2.9 KB
  - 📄 ColorVariants.ts 188 B
  - 📄 ComboBoxImagePathCallback.ts 326 B
  - 📄 ComboBoxItemGroup.ts 255 B
  - 📄 ComboBoxItemLeaf.ts 345 B
  - 📄 ComboBoxItemModel.ts 256 B
  - 📄 ComboBoxModel.ts 175 B
  - 📄 ComboBoxSuggestOptions.ts 1.6 KB
  - 📄 CssContainProperty.ts 201 B
  - 📄 CssOverflowProperty.ts 160 B
  - 📄 DataModel.ts 155 B
  - 📄 DraggableViewInfo.ts 178 B
  - 📄 DroppableArea.ts 175 B
  - 📄 EditInputMode.ts 187 B
  - 📄 EditTranslations.ts 1004 B
  - 📄 EditType.ts 225 B
  - 📄 Entity.ts 177 B
  - 📄 EntityItem.ts 306 B
  - 📄 EntityItemType.ts 120 B
  - 📄 EntityNameToATTs.ts 123 B
  - 📄 ErrorCorrectionLevel.ts 138 B
  - 📄 FlexibleLayoutGroupModel.ts 445 B
  - 📄 FlexibleLayoutItemExtended.ts 814 B
  - 📄 FlexibleLayoutItemModel.ts 310 B
  - 📄 FlexibleLayoutLeafConfiguration.ts 420 B
  - 📄 FlexibleLayoutLeafConfigurationSingleContent.ts 468 B
  - 📄 FlexibleLayoutLeafConfigurationTabbed.ts 1.6 KB
  - 📄 FlexibleLayoutLeafInfo.ts 544 B
  - 📄 FlexibleLayoutLeafModel.ts 434 B
  - 📄 FlexibleLayoutLeafType.ts 129 B
  - 📄 FlexibleLayoutModel.ts 746 B
  - 📄 FlexibleLayoutRenderedWidgets.ts 155 B
  - 📄 FlexibleLayoutRenders.ts 233 B
  - 📄 FlexibleLayoutViewRemoveResult.ts 267 B
  - 📄 FlexibleLayoutWidget.ts 1.2 KB
  - 📄 FlexibleLayoutWidgetCloseInfo.ts 150 B
  - 📄 FlexibleLayoutWidgetRender.ts 1.9 KB
  - 📄 GridChameleonState.ts 281 B
  - 📄 GridChameleonStateColumn.ts 331 B
  - 📄 GridChameleonStateColumnFilter.ts 170 B
  - 📄 GxControl.ts 429 B
  - 📄 GxControlDataType.ts 199 B
  - 📄 GxControlPossibleValues.ts 121 B
  - 📄 GxControlType.ts 143 B
  - 📄 GxDataTransferInfo.ts 135 B
  - 📄 GxGrid.ts 2.7 KB
  - 📄 GxGridCellProperties.ts 202 B
  - 📄 GxGridColumn.ts 1.2 KB
  - 📄 GxGridRow.ts 198 B
  - 📄 GxImageMultiState.ts 213 B
  - 📄 GxObject.ts 132 B
  - 📄 ImageRender.ts 173 B
  - 📄 ItemLink.ts 755 B
  - 📄 ItemsOverflowBehavior.ts 159 B
  - 📄 LayoutSplitterDirection.ts 236 B
  - 📄 LayoutSplitterDragBarConfig.ts 164 B
  - 📄 LayoutSplitterGroupModel.ts 430 B
  - 📄 LayoutSplitterItemAddResult.ts 165 B
  - 📄 LayoutSplitterItemModel.ts 310 B
  - 📄 LayoutSplitterItemRemoveResult.ts 316 B
  - 📄 LayoutSplitterLeafModel.ts 492 B
  - 📄 LayoutSplitterModel.ts 339 B
  - 📄 LayoutSplitterReconnectedSubtree.ts 166 B
  - 📄 LayoutSplitterSize.ts 127 B
  - 📄 LayoutSplitterSticky.ts 193 B
  - 📄 LazyLoadTreeItemsCallback.ts 224 B
  - 📄 LiveKitCallbacks.ts 747 B
  - 📄 LiveKitConnectionListener.ts 490 B
  - 📄 MarkdownViewerCodeRender.ts 259 B
  - 📄 MarkdownViewerCodeRenderOptions.ts 213 B
  - 📄 MarkdownViewerExtension.ts 1.3 KB
  - 📄 MarkdownViewerExtensionRender.ts 347 B
  - 📄 MarkdownViewerExtensionRenderFunction.ts 262 B
  - 📄 NavigationListHyperlinkClickEvent.ts 247 B
  - 📄 NavigationListItemModel.ts 486 B
  - 📄 NavigationListModel.ts 199 B
  - 📄 NotificationMessage.ts 401 B
  - 📄 NotificationMessageWithDelay.ts 349 B
  - 📄 NotificationsPositions.ts 271 B
  - 📄 PaginatorControlsOrder.ts 349 B
  - 📄 PaginatorRenderHyperlinkItemModel.ts 119 B
  - 📄 PaginatorRenderHyperlinkModel.ts 264 B
  - 📄 PaginatorRenderModel.ts 368 B
  - 📄 PaginatorRenderNumericModel.ts 203 B
  - 📄 PaginatorTranslations.ts 640 B
  - 📄 PopoverActionElement.ts 136 B
  - 📄 PopoverClosedInfo.ts 201 B
  - 📄 RadioGroupItemModel.ts 206 B
  - 📄 RadioGroupModel.ts 183 B
  - 📄 SegmentedControlItemModel.ts 396 B
  - 📄 SegmentedControlModel.ts 207 B
  - 📄 SmartGridDataState.ts 265 B
  - 📄 SmartGridItem.ts 137 B
  - 📄 SmartGridModel.ts 164 B
  - 📄 TabItemCloseInfo.ts 138 B
  - 📄 TabItemModel.ts 1.6 KB
  - 📄 TabListPosition.ts 164 B
  - 📄 TabModel.ts 155 B
  - 📄 TabSelectedItemInfo.ts 184 B
  - 📄 TabularGridCellItemModel.ts 156 B
  - 📄 TabularGridCellSelectionChangedEvent.ts 176 B
  - 📄 TabularGridCellSelectorClickedEvent.ts 158 B
  - 📄 TabularGridCellsModel.ts 204 B
  - 📄 TabularGridColumnDragEvent.ts 185 B
  - 📄 TabularGridColumnFreeze.ts 118 B
  - 📄 TabularGridColumnFreezeChangedEvent.ts 250 B
  - 📄 TabularGridColumnHiddenChangedEvent.ts 159 B
  - 📄 TabularGridColumnItemModel.ts 1.0 KB
  - 📄 TabularGridColumnOrderChangedEvent.ts 156 B
  - 📄 TabularGridColumnResizeEvent.ts 156 B
  - 📄 TabularGridColumnSelectorClickedEvent.ts 142 B
  - 📄 TabularGridColumnSizeChangedEvent.ts 154 B
  - 📄 TabularGridColumnsModel.ts 212 B
  - 📄 TabularGridColumnSortChangedEvent.ts 276 B
  - 📄 TabularGridColumnSortDirection.ts 124 B
  - 📄 TabularGridMarkingChangedEvent.ts 216 B
  - 📄 TabularGridModel.ts 320 B
  - 📄 TabularGridRowClickedEvent.ts 168 B
  - 📄 TabularGridRowContextMenuEvent.ts 239 B
  - 📄 TabularGridRowDragEvent.ts 198 B
  - 📄 TabularGridRowItemModel.ts 340 B
  - 📄 TabularGridRowPressedEvent.ts 168 B
  - 📄 TabularGridRowsetItemGroupModel.ts 332 B
  - 📄 TabularGridRowsetItemSimpleModel.ts 340 B
  - 📄 TabularGridRowsetsGroupModel.ts 232 B
  - 📄 TabularGridRowsetsModel.ts 421 B
  - 📄 TabularGridRowsModel.ts 200 B
  - 📄 TabularGridSelectionChangedEvent.ts 218 B
  - 📄 ThemeItemBaseModel.ts 652 B
  - 📄 ThemeItemModel.ts 277 B
  - 📄 ThemeItemModelStyleSheet.ts 215 B
  - 📄 ThemeItemModelUrl.ts 202 B
  - 📄 ThemeModel.ts 200 B
  - 📄 TreeViewDataTransferInfo.ts 400 B
  - 📄 TreeViewDropCheckInfo.ts 333 B
  - 📄 TreeViewDropType.ts 124 B
  - 📄 TreeViewFilterOptions.ts 717 B
  - 📄 TreeViewFilterType.ts 178 B
  - 📄 TreeViewImagePathCallback.ts 365 B
  - 📄 TreeViewItemCheckedInfo.ts 166 B
  - 📄 TreeViewItemContextMenu.ts 212 B
  - 📄 TreeViewItemDragStartInfo.ts 167 B
  - 📄 TreeViewItemExpandedInfo.ts 142 B
  - 📄 TreeViewItemImageMultiState.ts 235 B
  - 📄 TreeViewItemModel.ts 1.1 KB
  - 📄 TreeViewItemModelExtended.ts 231 B
  - 📄 TreeViewItemNewCaption.ts 138 B
  - 📄 TreeViewItemOpenReferenceInfo.ts 163 B
  - 📄 TreeViewItemSelected.ts 226 B
  - 📄 TreeViewItemSelectedInfo.ts 250 B
  - 📄 TreeViewLines.ts 116 B
  - 📄 TreeViewModel.ts 175 B
  - 📄 TreeViewOperationStatus.ts 126 B
  - 📄 TreeViewOperationStatusModifyCaption.ts 244 B
  - 📄 ViewAccessibleRole.ts 198 B
  - 📄 ViewItemCloseInfo.ts 271 B
  - 📄 ViewSelectedItemInfo.ts 203 B
  - 📄 VirtualScrollVirtualItems.ts 261 B
  - 📄 WidgetDragInfo.ts 132 B
  - 📄 WidgetDropInfo.ts 209 B
  - 📄 WidgetReorderInfo.ts 241 B
- 📄 components-index.md 28.7 KB
- 📄 css-shadow-parts-guide.md 17.5 KB
- 📄 examples.md 4.5 KB
- 📄 icons-and-images.md 22.3 KB
- 📄 layout-syntax.md 12.1 KB
- 📄 registry.md 9.7 KB
- 📄 types-index.md 27.6 KB
📄 evals.json 6.0 KB
📄 SKILL.md 16.6 KB

SKILL.md

---
name: chameleon-controls-library
description: "Builds UIs with Chameleon web components (ch-*). Use when the user mentions Chameleon, ch- components, or needs enterprise UI patterns like grids, trees, chat, sidebars, accordions, combos, tabs, dialogs, or forms. Also use for: implementing a UI from Figma or images, vibe coding a UI, migrating an existing UI to Chameleon, or auditing Chameleon usage in an application."
metadata:
  version: "0.3.0"
---

# Chameleon Controls Library

Build UIs with Chameleon web components. This skill covers component selection, structure, wiring, usage, and styling of individual components. For Design System-level patterns (tokens, class naming, theme architecture), use the **design-system-builder** skill

## Workflow

The workflow is a sequence of phases. Depending on the task, you can enter at any phase, skip phases that don't apply, and jump back to earlier phases to fix issues. Phases A and B always run in parallel at the start

```
┌─────────────────────────────────────────────────────────────┐
│                     [Entry Point]                           │
│                          │                                  │
│            ┌─────────────┼─────────────┐                    │
│            ▼                           ▼                    │
│    A: Gain Context              B: Installation             │
│            └─────────────┬─────────────┘                    │
│                          ▼                                  │
│               C: Understand the UI                          │
│           ┌──────┬───────┬───────┬──────┐                   │
│          C1     C2      C3      C4     C5                   │
│        Figma  Image   Text  Migration  Audit─────┐          │
│           └──────┴───────┴───────┘               │          │
│                          │                       │          │
│                          ▼                       │          │
│              D: Component Selection              │          │
│                          │                       │          │
│                          ▼                       │          │
│           E: Understand Component APIs           │          │
│                          │                       │          │
│                          ▼                       │          │
│              F: Styling Strategy                 │          │
│                          │                       │          │
│                          ▼                       │          │
│            G: Code Implementation                │          │
│                          │                       │          │
│                          ▼                       │          │
│                  H: Audit ◄──────────────────────┘          │
│                    │   ▲                                    │
│                    │   │ fix issues                         │
│                    │   └──────┘                             │
│                    ▼                                        │
│                  [Done]                                     │
└─────────────────────────────────────────────────────────────┘
```

---

### Phase A — Gain Context (parallel with B)

Detect before writing any code:

1. **Framework** — What framework is the project using? (e.g., Angular, React, Stencil, vanilla JS/TS, Lit/Kasstor, etc.)
2. **Existing code** — What components, structure, and patterns are already in place?
3. **Design System** — Is there a DS built on Chameleon? Check for `ch-theme`, `getBundles`, DS CSS files

This is observational — no reference files needed

---

### Phase B — Installation Check (parallel with A)

**Read** [Installation guide](references/installation/README.md). Verify Chameleon is installed and configured for the detected framework. If not installed, follow the guide

Do not proceed to Phase C until installation is confirmed

---

### Phase C — Understand the UI

Choose the sub-entry that matches the task. All sub-entries converge on the same output: a semantic understanding of each UI element — what it is, how it's used, how keyboard users reach it, and how elements interact

#### C1: From Figma

Analyze Figma frames. Identify visual elements and their semantic roles (navigation, data entry, data display, action triggers, feedback, etc.)

#### C2: From an image

Analyze the visual. Map each visible element to its semantic purpose. Identify layout structure, component boundaries, and interactive elements

#### C3: From text, audio, or description

Parse the user's description. Identify the UI elements described, their relationships, and the interactions expected

#### C4: Migration from existing UI

Analyze the current implementation. Map existing HTML elements and third-party components to Chameleon equivalents. Identify what can be replaced 1:1 and what requires restructuring

#### C5: Audit only

Skip directly to [Phase H](#phase-h--audit)

---

### Phase D — Component Selection

**Read** [Components index](references/components-index.md). For every UI element identified in Phase C, look up the matching component:

1. Read its "When to use" and "When NOT to use" columns
2. **Never pick a component from memory** — always verify against the index
3. If a native HTML element (`<select>`, `<input>`, etc.) is chosen instead of a Chameleon component, **state the explicit reason** before proceeding

**When a component does not exist in Chameleon:**

- Chameleon does not wrap `<button>` or `<a>` — use native HTML elements for buttons and links. When a Design System is active, apply its CSS classes
- For more complex missing components, compose from existing Chameleon components and/or build a custom component using the **kasstor** skill (if available) for cross-framework web components

**Icons and images:**

- **Read** [Icons & Images guide](references/icons-and-images.md) to choose the right technique: semantic (`<img>` with `alt`) vs decorative (CSS, `ch-image`), `mask-image` for themeable icons, `startImgSrc`/`endImgSrc` for component item models
- For global icon resolution, **Read** [Registry](references/registry.md) to register `getImagePathCallback` once instead of per-instance

---

### Phase E — Understand Component APIs

For each selected component, **Read** its documentation in order:

1. `references/components/{component}/README.md` — Properties, events, methods, slots, dependencies
2. `references/components/{component}/usage.md` — Usage examples, patterns, do's and don'ts

For TypeScript types used in properties and events, consult the [Types index](references/types-index.md)

---

### Phase F — Styling Strategy

Follow this decision tree to determine how to style each component:

```
Has a Design System built on Chameleon?
├─ YES → Check the DS component guide for this component
│        ├─ Guide exists → Use it (DS handles classes, tokens, ::part())
│        └─ Guide missing → Is design-system-builder skill available?
│             ├─ YES → Use it to create the component's DS styles
│             └─ NO  → Read the component's styling.md (see below)
│
└─ NO → Is design-system-builder skill available?
      ├─ YES → Use it to scaffold a Design System
      └─ NO  → Read the component's styling.md (see below)
```

**When using component styling directly:**

- **Read** `references/components/{component}/styling.md` — Shadow parts, CSS custom properties, shadow DOM layout, styling recipes, anti-patterns
- **Read** [CSS Shadow Parts Guide](references/css-shadow-parts-guide.md) — General `::part()` rules, state parts pattern, `exportparts`, limitations
- To understand the shadow DOM layout diagrams, consult [Layout Syntax](references/layout-syntax.md)

---

### Phase G — Code Implementation

Build the UI with Chameleon components (`ch-*`), applying the properties, events, styles, icons, and patterns determined in prior phases

- Use `<button>` and `<a>` for buttons and links — Chameleon does not wrap these
- Follow the **frontend-best-practices** skill if active

---

### Phase H — Audit

Verify the implementation against this checklist. This phase is also the direct entry point from C5 (audit-only mode)

1. **Tags exist** — Every `ch-*` tag used exists in the library (cross-reference [Components index](references/components-index.md))
2. **No invented APIs** — All properties, events, and methods used are documented in the component's `README.md`. No guessed or assumed API names
3. **Valid slots** — All slot names used are valid according to the component docs and the context of use
4. **Valid styles** — All `::part()` selectors reference parts that exist in the component's `styling.md`. All CSS custom properties used are documented. If a DS is active, verify classes match the DS documentation
5. **Best practices** — The implementation follows [Accessibility](references/best-practices/accessibility.md), [Performance](references/best-practices/performance.md), and [SEO](references/best-practices/seo.md) guidelines. The **frontend-best-practices** skill was consulted for general code quality
6. **No anti-patterns** — The implementation does not violate any "When NOT to use", "Do not use when", or anti-patterns listed in the component's `usage.md` and `styling.md`
7. **Fix and re-audit** — If any check fails, fix the issue (returning to phases D-G as needed) and re-audit until all checks pass

---

## Component catalog

Chameleon provides **58 components** across 11 categories. It intentionally does not wrap every HTML element — buttons (`<button>`) and links (`<a>`) use native HTML with Design System CSS classes

For the complete catalog with descriptions, use cases, and anti-patterns for every component, consult the [Components index](references/components-index.md)

**Categories at a glance:**

| Category           | Count | Key components                                                                                                                                                                                        |
| ------------------ | ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Layout             | 4     | `ch-theme`, `ch-flexible-layout-render`, `ch-layout-splitter`, `ch-sidebar`                                                                                                                           |
| Forms              | 9     | `ch-edit`, `ch-checkbox`, `ch-combo-box-render`, `ch-radio-group-render`, `ch-slider`, `ch-switch`, `ch-color-picker`, `ch-color-field`, `ch-rating`                                                  |
| Data Display       | 8     | `ch-accordion-render`, `ch-action-list-render`, `ch-action-menu-render`, `ch-tree-view-render`, `ch-tab-render`, `ch-segmented-control-render`, `ch-navigation-list-render`, `ch-action-group-render` |
| Overlays           | 3     | `ch-dialog`, `ch-tooltip`, `ch-popover`                                                                                                                                                               |
| Content            | 5     | `ch-markdown-viewer`, `ch-code`, `ch-math-viewer`, `ch-image`, `ch-textblock`                                                                                                                         |
| Grid / Tabular     | 18    | `ch-tabular-grid` + 14 subcomponents, `ch-smart-grid`, `ch-virtual-scroller`, `ch-tabular-grid-render`                                                                                                |
| Editors            | 2     | `ch-code-editor`, `ch-code-diff-editor`                                                                                                                                                               |
| Feedback & Loading | 2     | `ch-progress`, `ch-status`                                                                                                                                                                            |
| Chat & Real-time   | 2     | `ch-chat`, `ch-live-kit-room`                                                                                                                                                                         |
| Pagination         | 1     | `ch-paginator-render`                                                                                                                                                                                 |
| Utilities          | 4     | `ch-qr`, `ch-barcode-scanner`, `ch-intersection-observer`, `ch-shortcuts`                                                                                                                             |

## Best practices

- **Accessibility:** Prefer visible `<label>` elements linked via `for`/`id` over the `accessible-name` property — labels are visible and provide better UX. Chameleon form components support `ElementInternals`, so a `<label for="X">` with a matching `id="X"` on the component works natively. Use `accessible-name` only when a visible label is not possible (e.g., icon-only controls). Use `close-button-accessible-name` on dialogs. See [Accessibility](references/best-practices/accessibility.md)
- **Performance:** Use virtualization for long lists (`ch-virtual-scroller`, `ch-tabular-grid-virtual-scroller`). Lazy-load heavy components (`ch-code-editor`, `ch-code-diff-editor`, `ch-math-viewer`, `ch-chat`). See [Performance](references/best-practices/performance.md)
- **SEO:** Keep critical content in static HTML. Use semantic elements. See [SEO](references/best-practices/seo.md)

## Critical rules

- **Never pick components from memory** — always consult [Components index](references/components-index.md)
- **Native HTML over Chameleon requires a stated reason** — if `<select>`, `<input>`, or another native element is chosen instead of a Chameleon component, explain why before proceeding
- **`ch-theme` is always hidden** — never place children inside it. Use it as a sibling element
- **Use `<button>` and `<a>` for buttons and links** — Chameleon intentionally does not wrap these elements
- **Read component docs before writing code** — never assume API shapes. Properties, events, slots, and parts must be verified

## Installation

Framework-specific setup:

- [Installation index](references/installation/README.md) — React (Vite), Angular, Stencil, script tag

## References

| Topic                    | Reference                                                                                |
| ------------------------ | ---------------------------------------------------------------------------------------- |
| Components catalog       | [references/components-index.md](references/components-index.md)                         |
| Icons & Images           | [references/icons-and-images.md](references/icons-and-images.md)                         |
| Registry Property System | [references/registry.md](references/registry.md)                                         |
| Types index              | [references/types-index.md](references/types-index.md)                                   |
| CSS Shadow Parts Guide   | [references/css-shadow-parts-guide.md](references/css-shadow-parts-guide.md)             |
| Shadow DOM Layout Syntax | [references/layout-syntax.md](references/layout-syntax.md)                               |
| Accessibility            | [references/best-practices/accessibility.md](references/best-practices/accessibility.md) |
| Performance              | [references/best-practices/performance.md](references/best-practices/performance.md)     |
| SEO                      | [references/best-practices/seo.md](references/best-practices/seo.md)                     |
| Examples                 | [references/examples.md](references/examples.md)                                         |
| Installation             | [references/installation/README.md](references/installation/README.md)                   |

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

chameleon-controls-library

Directory Structure

SKILL.md

Report

Notice