coherence-ui

Document Coherence UI components with API references and React examples.

Updated Feb 13, 2026
One-click install
npx skills add https://github.com/unthinkmedia/vibe-azure --skill coherence-ui
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: coherence-ui
Source: https://github.com/unthinkmedia/vibe-azure/tree/main/.github/skills/coherence-ui
Command: npx skills add https://github.com/unthinkmedia/vibe-azure --skill coherence-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and resources for building user interfaces using Microsoft's Coherence Design System, enabling developers to create consistent, accessible, and visually appealing applications.

Core Features & Use Cases

  • Component Reference: Detailed information on all Coherence UI components, including their API, usage, and design guidelines.
  • Design Tokens & Theming: Access to CSS variables for colors, spacing, typography, and more, facilitating consistent theming.
  • Code Examples & Templates: Practical examples and starter files for implementing components and page layouts.
  • Use Case: A developer needs to build a new settings page for a C+AI product. They can use this Skill to find the appropriate Coherence components (like cui-input, cui-select, cui-button), understand their attributes and slots, and get React code examples for implementing the page according to Coherence design principles.

Quick Start

Use the coherence-ui skill to find guidance on using the cui-button component.

Frequently Asked Questions about coherence-ui

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

FAQPage Schema
How do I build React UI components using the Coherence Design System?

Coherence UI components are web components designed for building accessible and visually appealing applications. This Skill offers comprehensive documentation covering component APIs, attributes, slots, and design tokens to ensure consistency across Microsoft C+AI products.

Can I use Coherence UI web components with plain HTML?

Yes, Coherence UI web components can be used with plain HTML and React. This Skill facilitates frontend development by providing usage patterns, detailed API references, and code examples for implementing components like cui-input and cui-select in both environments.

How do I apply design tokens and theming to Coherence UI components?

You apply theming using CSS variables for colors, spacing, and typography provided as design tokens. This Skill supplies access to these CSS variables alongside component documentation, facilitating consistent visual theming across your web components and layouts.

What's the best way to find API references and attributes for Coherence UI components?

The best way to find API references is using this Skill's component documentation, which details attributes and slots for Coherence UI components. It provides comprehensive guidance and usage patterns for elements like cui-button, cui-input, and cui-select.

Does the Coherence Design System provide templates for frontend development?

Yes, the Coherence Design System provides practical code examples and starter files for implementing components and page layouts. This Skill delivers these templates alongside design guidance to accelerate frontend development for C+AI products.