skills.rest
genexuslabs
genexuslabsOFFICIAL
Explore all skills by this author →
Website𝕏@GeneXusGitHub

chameleon-controls-library

Compose Chameleon web components (ch-*) to create enterprise-grade UIs.

Updated Aug 23, 2026
Search Tags:#frontend#design-system#web-components#component-library#enterprise-ui#chameleon
One-click install
npx skills add https://github.com/genexuslabs/genexus-skills --skill chameleon-controls-library
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chameleon-controls-library
Source: https://github.com/genexuslabs/genexus-skills/tree/main/frontend/chameleon-controls-library
Command: npx skills add https://github.com/genexuslabs/genexus-skills --skill chameleon-controls-library

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Create enterprise-grade UIs by composing Chameleon web components (ch-*).

Core Features & Use Cases

  • Component selection, wiring, usage, and styling of ch-* components for grids, trees, chats, sidebars, accordions, combos, tabs, dialogs, and forms.
  • Supports implementing a UI from Figma or images, vibe coding a UI, migrating an existing UI to Chameleon, or auditing Chameleon usage across projects.
  • Use the Design System Builder for tokens, naming, and theme architecture.

Quick Start

Prototype a dashboard UI using Chameleon components with a collapsible sidebar, tabs, and a data grid.

Frequently Asked Questions about chameleon-controls-library

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an enterprise dashboard UI using web components?▼

Build enterprise dashboards by composing Chameleon web components (ch-*), wiring elements like grids, sidebars, and tabs into a cohesive layout. You can prototype a dashboard UI with a collapsible sidebar and data grid quickly.

Can I migrate an existing admin panel to a chameleon component library?▼

Yes, you can migrate an existing UI to Chameleon components. The Skill supports mapping and replacing current elements with ch-* components, ensuring your admin panel aligns with registry usage and best practices.

What Chameleon web components are available for complex forms and dialogs?▼

Chameleon provides ch-* components for grids, trees, chats, sidebars, accordions, combos, tabs, dialogs, and forms. These enterprise-grade components can be wired together to handle complex form inputs and modal interactions.

How do I implement a UI design from a Figma file into frontend code?▼

Implement a UI from Figma or images by selecting and styling corresponding ch-* components. The Skill translates visual designs into enterprise web components, applying the correct naming and theme architecture.

Does the Chameleon design system support tokens and theme architecture?▼

Yes, the Design System Builder supports tokens, naming, and theme architecture. This allows you to define and apply consistent styling variables across your enterprise UI components.

Related Skills

Explore More Software Engineering Skills→
vultisigvultisig
19

Figma Design Implementation

Translate Figma UI designs into React components using MCP tools.

Official
Intermediate
agarzonagarzon
4

moonshine-components-v4

Build MoonShine v4 admin interfaces with component usage and async interactions.

Community
Advanced
good-ideagood-idea
3

opencode-config-validation

Validate OpenCode configuration files for frontmatter, naming, and cross-references.

Community
Advanced
Design-System-ETDesign-System-ET

chameleon-controls-library

Build web interfaces with Chameleon components, data grids, and form controls.

Official
Advanced