untitled-ui-ref

Apply Untitled UI design tokens to Angular Material v3 components.

Updated Apr 8, 2026
One-click install
npx skills add https://github.com/aegisx-platform/untitled-ui-skill --skill untitled-ui-ref
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: untitled-ui-ref
Source: https://github.com/aegisx-platform/untitled-ui-skill/tree/main/untitled-ui-ref
Command: npx skills add https://github.com/aegisx-platform/untitled-ui-skill --skill untitled-ui-ref

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill bridges the gap between the Untitled UI design system and the AegisX UI library, ensuring that Angular Material v3 components maintain a consistent, clinical, and professional aesthetic without requiring manual CSS overrides.

Core Features & Use Cases

  • Design Token Mapping: Provides a 3-layer semantic token system (Primitive, Semantic, Component) to ensure dark-mode readiness and visual consistency.
  • Component Pattern Library: Offers standardized patterns for tables, forms, cards, and modals, ensuring they adhere to the AegisX "Clean Clinical SaaS" design language.
  • Production-Ready Overrides: Includes a comprehensive SCSS override file that suppresses heavy Material shadows and ripples, replacing them with the refined Untitled UI elevation and border model.

Quick Start

Use the untitled-ui-ref skill to style this mat-table component according to the AegisX design system.

Frequently Asked Questions about untitled-ui-ref

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

FAQPage Schema
How do I apply Untitled UI design patterns to Angular Material components?

To apply Untitled UI patterns to Angular Material, you use a skill that standardizes component styling via a 3-layer semantic token system and global SCSS overrides, ensuring visual consistency without manual CSS.

What is the best way to remove heavy Material shadows and ripples for a clinical SaaS interface?

The best way to suppress heavy Material shadows and ripples is by applying production-ready SCSS overrides that replace them with the refined Untitled UI elevation and border model for a clean clinical aesthetic.

Can I use semantic design tokens to ensure dark-mode readiness in an AegisX UI application?

Yes, you can ensure dark-mode readiness by implementing a 3-layer semantic token architecture—spanning Primitive, Semantic, and Component layers—mapped specifically to Angular Material v3 components within the AegisX UI framework.

How do I standardize tables, forms, and modals to match a clean clinical SaaS design language?

You standardize these UI elements by leveraging a component pattern library that provides pre-configured tables, forms, cards, and modals adhering strictly to the AegisX Clean Clinical SaaS design language.

Does this Untitled UI bridge require manual CSS overrides for Angular Material v3 components?

No, it eliminates the need for manual CSS overrides by providing a comprehensive SCSS override file that automatically aligns Angular Material v3 components with the Untitled UI design system.

When do I need to integrate global SCSS overrides for Untitled UI design tokens?

You need to integrate global SCSS overrides when mapping Untitled UI design patterns onto Angular Material v3, requiring strict adherence to the AegisX token architecture to achieve the intended professional aesthetic.