Semantic CSS

A skill for AI agents that teaches semantic CSS styling using the New UI Framework.

Installation

npx skills add CreateNewUI/skills

What's Included

• 6 Theme Variants - light, light-warm, light-cold, dark, dark-warm, dark-cold
• Design Tokens - Spacing, typography, colors, shadows, radius, blur
• Utility Classes - Prefixed with nu- using BEM naming conventions
• Responsive Typography - Automatic desktop/mobile scaling

Usage

Skills are automatically available once installed. The agent will use them when building web interfaces.

Style this page with semantic CSS

Create a dark-themed card component

Add proper spacing and typography

Skill Structure

semantic-css/
└── SKILL.md    # Complete New UI Framework reference

Dependencies

npm i -D @new-ui/foundations