skills.rest
Cumulocity-IoT
Cumulocity-IoTOFFICIAL
Explore all skills by this author →
GitHub

c8y-ui

Scaffolds Cumulocity UI projects and implements HTML layouts using Codex design system classes.

5|Updated Jan 29, 2026
Search Tags:#ui#html#design system#angular#codex#cumulocity
One-click install
npx skills add https://github.com/Cumulocity-IoT/cumulocity-skills --skill c8y-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: c8y-ui
Source: https://github.com/Cumulocity-IoT/cumulocity-skills/tree/main/skills/c8y-ui
Command: npx skills add https://github.com/Cumulocity-IoT/cumulocity-skills --skill c8y-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers create high-quality HTML layouts for Cumulocity applications, ensuring consistency with the Cumulocity Codex design system and minimizing custom CSS.

Core Features & Use Cases

  • Design System Adherence: Guides users on implementing Cumulocity's design principles for typography, grid, forms, and icons.
  • Scaffolding New Projects: Provides instructions for setting up new Cumulocity web projects.
  • Efficient Styling: Promotes the use of existing Codex utility classes over custom CSS.
  • Use Case: A developer needs to build a new plugin for Cumulocity and wants to ensure it matches the look and feel of the existing platform. They can use this skill to understand how to structure their HTML and apply the correct Codex classes for elements like forms, buttons, and layout.

Quick Start

Use the c8y-ui skill to learn about the foundation design principles for Cumulocity UI development.

Frequently Asked Questions about c8y-ui

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

FAQPage Schema
How do I build a Cumulocity UI that matches the Codex design system?▼

To build a Cumulocity UI aligned with the Codex design system, use this skill to scaffold your Angular project and apply existing utility classes for typography, grids, and forms instead of writing custom CSS.

What do I need to scaffold a new Cumulocity web project?▼

Scaffolding a new Cumulocity web project requires Node.js and the Angular CLI. Once your environment is set up, this skill provides instructions to initialize the project and structure your HTML layouts effectively.

How do I style forms and icons in Cumulocity without custom CSS?▼

To style forms and icons in Cumulocity without custom CSS, apply the existing utility classes from the Codex design system. This skill guides you through the correct class implementations for consistent platform styling.

Does Cumulocity UI development work with standard Angular components?▼

Cumulocity UI development leverages Angular for project setup and component architecture. This skill helps you integrate standard Angular components while adhering to the Codex design system's HTML layout principles.

Why use the Codex design system for Cumulocity plugin development?▼

Using the Codex design system for Cumulocity plugin development ensures your application matches the platform's look and feel. It enforces consistent typography, forms, and icons while minimizing the need for custom CSS.

Related Skills

Explore More Software Engineering Skills→
jbaranskijbaranski

jeff-skill-angular-project

Install or update the Angular CLI globally and verify with ng version.

Community
Intermediate
Cumulocity-IoTCumulocity-IoT
5

websdk-1023-upgrade

Upgrade Cumulocity Web SDK projects from 1022 to 1023 with Angular 20 migration.

Official
Advanced
Cumulocity-IoTCumulocity-IoT
5

@c8y/client API Usage

Document @c8y/client TypeScript SDK usage for Cumulocity IoT REST API operations.

Official
Intermediate
nicholasgriffintnnicholasgriffintn
2

frontend-design

Design frontend interfaces with typography, color, motion, and layout guidelines.

Community
Intermediate