skills.rest
CenturyLink
CenturyLinkOFFICIAL
Explore all skills by this author →
WebsiteGitHub

chi-components

Scan SCSS source files and reference markdown for Chi CSS component details.

17|63|Updated Mar 12, 2021
Search Tags:#frontend#design system#css#components#web components#chi
One-click install
npx skills add https://github.com/CenturyLink/Chi --skill chi-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chi-components
Source: https://github.com/CenturyLink/Chi/tree/main/.cursor/skills/chi-components
Command: npx skills add https://github.com/CenturyLink/Chi --skill chi-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers understand and utilize the Chi design system's components, ensuring consistency and adherence to design guidelines.

Core Features & Use Cases

  • Component Reference: Provides detailed information on Chi's CSS components, including their names, modifiers, BEM structure, and Web Component equivalents.
  • Modifier Exploration: Lists available modifiers for each component, allowing for customization and variation.
  • Web Component Mapping: Identifies the corresponding Web Component for each CSS component, facilitating modern development practices.
  • Use Case: A developer needs to implement a new alert message in their application. They can use this Skill to find the correct chi-alert component, discover available modifiers like -success or -banner, and learn how to use its Web Component equivalent <chi-alert>.

Quick Start

Use the chi-components skill to get information about the Chi button component.

Frequently Asked Questions about chi-components

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

FAQPage Schema
What is the Chi design system and how do its CSS components work?▼

The Chi design system provides CSS components built with a BEM structure to ensure UI consistency. It includes specific component names and modifiers that allow developers to customize visual elements while adhering to standardized design guidelines.

How do I find the correct modifiers for a Chi CSS component like an alert?▼

To find Chi CSS component modifiers like `-success` or `-banner`, you can reference the component details. This allows developers to discover available variations and apply the correct styling options for customizing elements such as alert messages.

Can I use Chi CSS components as Web Components in modern frontend development?▼

Yes, Chi CSS components have corresponding Web Component equivalents. For example, the `chi-alert` CSS component maps to the `<chi-alert>` Web Component, facilitating modern development practices by providing encapsulated, reusable custom elements.

How do I map a Chi CSS component to its Web Component equivalent?▼

Mapping a Chi CSS component to its Web Component equivalent involves checking the component reference details. The system identifies the corresponding custom element, allowing developers to transition from CSS classes to integrated Web Component tags.

Does the Chi design system support component lookup for frontend integration?▼

The Chi design system supports component lookup by scanning SCSS source files and reference markdown. This provides developers with detailed information on component names, BEM structure, and available modifiers for direct frontend integration.

Why use the Chi design system for frontend component customization?▼

Using the Chi design system for frontend component customization ensures consistency and adherence to design guidelines. It provides detailed modifier exploration and Web Component mapping, preventing visual fragmentation across application interfaces.

Related Skills

Explore More Software Engineering Skills→
baloisebaloise
111

ds-create-token

Analyze SCSS files to create design tokens in Base.tokens.json.

Official
Intermediate
paleopaleo
1

pleasant-bem-css

Standardize CSS class naming with a customized BEM methodology.

Community
Basic
shwilliamsonshwilliamson

css-standards

Enforce BEM naming, CSS variables, and responsive patterns for CSS/SCSS.

Community
Basic
mklozmkloz

tailwind-design-system

Implement Tailwind CSS v4 design systems with design tokens and theming.

Community
Intermediate