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.