zds-design-system

Enforce Zelis Design System standards for Bootstrap 5 UI components.

Updated Jan 30, 2026
One-click install
npx skills add https://github.com/spallempati/AI-Studio --skill zds-design-system
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: zds-design-system
Source: https://github.com/spallempati/AI-Studio/tree/main/skills/design-system/zds-design-system
Command: npx skills add https://github.com/spallempati/AI-Studio --skill zds-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that UI development adheres to the Zelis Design System (ZDS) standards, maintaining consistency, accessibility, and a unified look and feel across the application.

Core Features & Use Cases

  • Component Styling: Provides guidance on using ZDS-approved classes for buttons, cards, forms, and tables.
  • Accessibility Compliance: Enforces WCAG 2.1 AA standards and proper ARIA attribute usage.
  • Layout & Spacing: Defines correct usage of Bootstrap grid utilities and ZDS spacing scale.
  • Use Case: When building a new feature, use this Skill to ensure all new UI components, like forms and buttons, are styled and implemented according to ZDS guidelines, including accessibility requirements.

Quick Start

Apply the Zelis Design System standards to the provided UI component code.

Frequently Asked Questions about zds-design-system

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

FAQPage Schema
How do I implement Bootstrap 5 UI components that meet WCAG 2.1 AA accessibility standards?

To implement Bootstrap 5 UI components with WCAG 2.1 AA accessibility compliance, apply Zelis Design System standards to your code. This enforces proper ARIA attribute usage, component classes, and color palette guidelines across .razor, .cshtml, .css, and .scss files.

What is the best way to ensure consistent UI typography and spacing in .razor and .cshtml files?

The best way to ensure consistent UI typography and spacing in .razor and .cshtml files is to apply Zelis Design System standards. This enforces the correct usage of Bootstrap grid utilities, the ZDS spacing scale, and approved typography guidelines across your application components.

Does this design system work with standard Bootstrap 5 forms and tables?

Yes, this design system works directly with standard Bootstrap 5 forms and tables by providing ZDS-approved classes. It enforces company design guidelines and WCAG 2.1 AA compliance, ensuring buttons, cards, forms, and tables maintain a unified look and feel.

How do I style buttons and cards according to company design guidelines?

To style buttons and cards according to company design guidelines, apply the Zelis Design System standards to your component code. This enforces the use of approved ZDS component classes, the correct color palette, and required accessibility attributes.

Can I use standard CSS and SCSS files with the Zelis Design System?

Yes, you can use standard CSS and SCSS files with the Zelis Design System. The standards apply directly to .css and .scss files, enforcing the ZDS color palette, typography, and layout spacing rules to maintain UI consistency across your application.