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

chi-utilities

Explain Chi utility classes and correct double-dash syntax errors.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps users understand and correctly apply Chi's extensive library of utility classes for styling and layout, preventing common errors like incorrect syntax.

Core Features & Use Cases

  • Utility Class Reference: Provides detailed information on spacing, color, display, flexbox, typography, and more.
  • Syntax Correction: Identifies and corrects the common double-dash syntax errors.
  • Use Case: A developer needs to add 32px of padding to the left and right of a component. They can ask the Skill for the correct utility class, which will be -px--4.

Quick Start

Explain the -p--4 utility class and provide an example.

Frequently Asked Questions about chi-utilities

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

FAQPage Schema
How do I apply 32px of padding using Chi design system utility classes?▼

Yes, you can use Chi CSS utility classes for flexbox layouts. The Skill provides comprehensive information and examples for flexbox utilities, alongside spacing, display, and position classes to manage component alignment and structure.

Why does my Chi CSS utility class syntax not work with double dashes?▼

Chi CSS utility class syntax fails with double dashes due to a common error. The Skill identifies and corrects these double-dash syntax mistakes, mapping your intent to the appropriate utility classes for proper styling.

What utility classes are available for typography and color in the Chi design system?▼

The Chi design system provides extensive utility classes for typography and color. The Skill serves as a reference for these classes, detailing how to apply text styles and color schemes effectively within your frontend development workflow.

How do I add shadow and border styling using Chi frontend utilities?▼

To add shadow and border styling, you use specific Chi frontend utility classes. The Skill provides detailed references for both shadow and border utilities, ensuring you apply the correct class names for your visual design requirements.

Can I get examples for Chi display and sizing utility classes?▼

Yes, the Skill provides comprehensive examples for Chi display and sizing utility classes. It maps user intents to appropriate classes, helping you correctly adjust element visibility and dimensions in your layout.

Related Skills

Explore More Software Engineering Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
niallr12niallr12

review-design

Audit a component's CSS properties and resolved design tokens against its Figma source via MCP server.

Community
Advanced
locnbk2002locnbk2002
1

ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
fusenginefusengine
22

tailwindcss-utilities

Reference Tailwind CSS utility classes categorized by function from markdown files.

Community
Basic