vibe21-design-configurationView as Markdown

vibe21-design-configuration

Refines the look already saved by vibe21-web-new. You pick a primary color and, if you want one, a secondary color.

This skill writes config. It does not restyle the generated pages.

When to use it

Run it after vibe21-web-new, before you start writing pages.

Run it again when the brand colors change.

Style and theme were chosen during the scaffold. This skill does not ask for them again. To change those keys, edit vibe21.json or start a new site.

How to run it

/vibe21-design-configuration

The agent reads design from vibe21.json and tells you what that style means. Then it asks for:

• a primary color — a preset, a Tailwind color name, or a hex
• an optional secondary color — or no secondary color

Colors are stored as uppercase #RRGGBB under designConfiguration.

What happens

• vibe21.json gets designConfiguration.primaryColor and, when you chose one, secondaryColor.
• The Next.js app is not restyled here. Later UI work reads those keys and writes CSS tokens (--color-primary, --color-on-primary, and secondary when present).
• The Design section in vibe21.md is refreshed.

Then the agent offers vibe21-web-preview.