aura-theme

Generate a Vaadin Aura theme CSS file from natural language descriptions.

5|2|Updated Jun 2, 2026
One-click install
npx skills add https://github.com/vaadin/agent-skills --skill aura-theme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aura-theme
Source: https://github.com/vaadin/agent-skills/tree/main/skills/aura-theme
Command: npx skills add https://github.com/vaadin/agent-skills --skill aura-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Generating consistent Vaadin Aura theme CSS configurations from natural language descriptions to accelerate UI design and ensure brand-aligned theming.

Core Features & Use Cases

  • Interpret user design intent from plain text and map it to Aura theme properties.
  • Reference official Aura tokens and recommended presets to produce valid, ready-to-apply CSS files.
  • Output a descriptive file name and an import-ready CSS file that can be added to an existing styles.css.

Quick Start

Describe your desired theme and I will generate an Aura theme CSS file you can apply immediately.

Frequently Asked Questions about aura-theme

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

FAQPage Schema
How do I generate a Vaadin Aura theme CSS file from a description?▼

To generate a Vaadin Aura theme CSS file, you provide a natural language description of your design intent. The system maps your text to Aura properties, outputting a ready-to-use CSS file with an import reference for your styles.

What design properties can I customize when creating an Aura theme?▼

When creating an Aura theme, you can customize light and dark modes, font choices, surface levels, radii, and color palettes. These properties are mapped from your description to generate a valid CSS configuration.

Can I use natural language to define light and dark modes for a Vaadin CSS theme?▼

Yes, you can use natural language to define light and dark modes for a Vaadin CSS theme. The generator interprets your plain text design intent and applies it across the required modes for brand-aligned theming.

Does the generated Vaadin theme CSS include font imports?▼

Yes, the generated Vaadin theme CSS includes optional font imports based on your description. The output provides an import-ready file that can be directly added to an existing styles.css workflow.

What is the best way to apply a generated Aura theme to an existing project?▼

The best way to apply a generated Aura theme is to add the output CSS file to your existing styles.css. The generator provides a deterministic file naming scheme and an accompanying import reference for seamless integration.