kortix-design-system

Enforce Kortix design system tokens and component reuse in web UI development.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/jbreel77888/Agent-AiNorx --skill kortix-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kortix-design-system
Source: https://github.com/jbreel77888/Agent-AiNorx/tree/main/.claude/skills/kortix-design-system
Command: npx skills add https://github.com/jbreel77888/Agent-AiNorx --skill kortix-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates inconsistent, hand-rolled UI in Kortix's web apps that breaks brand identity, creates maintenance overhead, and leads to disjointed user experiences for end users.

Core Features & Use Cases

  • Strict Component Reuse: Enforces using pre-built design system components from the src/components/ui/ directory instead of hand-rolling custom UI chrome, reducing code duplication and maintenance work.
  • Brand Compliance Enforcement: Provides canonical rules for color tokens, typography, spacing, avatar shapes, and component patterns to ensure all UI matches Kortix's standardized brand identity.
  • Use Case: When building a new user settings page in the apps/web directory, use this Skill to ensure all panels, lists, form fields, and avatars follow design system rules, avoid hand-rolled components, and pass brand compliance checks.

Quick Start

Use the kortix-design-system skill to build a new project dashboard screen in apps/web that adheres to all brand, component, and token rules.

Frequently Asked Questions about kortix-design-system

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

FAQPage Schema
How do I enforce design system compliance when building frontend UI components?▼

To enforce design system compliance, use pre-built components from the src/components/ui/ directory instead of hand-rolling custom UI chrome, ensuring strict adherence to brand identity tokens, component reuse hierarchies, and standardized UI patterns.

Why does my web frontend UI violate brand identity guidelines?▼

Your web frontend UI likely violates brand identity due to inconsistent, hand-rolled implementation. Eliminate this by applying canonical rules for color tokens, typography, spacing, and avatar shapes defined by the design system.

What is the best way to build a user settings page without duplicating UI code?▼

The best way to build a user settings page without duplicating UI code is to follow strict component reuse rules, utilizing standardized design system components for panels, lists, form fields, and avatars in the apps/web directory.

Can I use custom UI components for Kortix web products?▼

You should not use custom UI components for Kortix web products. The design system eliminates maintenance overhead by enforcing the use of pre-built components from the src/components/ui/ directory to maintain standardized brand identity.

How do I standardize avatar shapes and typography in frontend development?▼

To standardize avatar shapes and typography in frontend development, apply the canonical design system rules that govern visual surface development, ensuring all components match Kortix's standardized brand identity tokens and patterns.