← Back to Skills Marketplace
118
Downloads
1
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install openclaw-skill-vibe-to-code-theme-gen
Description
Generates a color palette and CSS variables based on a descriptive atmosphere
Usage Guidance
Before installing, consider the following:
- The code sends the user's 'vibe' text to https://openrouter.ai; SKILL.md does not disclose this. If you care about privacy or sensitive prompts, do not install until the author clarifies and documents the external call.
- Ask the author to explicitly declare any required credentials (e.g., OPENROUTER_API_KEY) and to add an Authorization header rather than relying on implicit platform credentials.
- Request that SKILL.md be updated to state clearly that user input is transmitted to an external LLM and to which endpoint.
- Recommend code hardening: validate/trust the model output safely (wrap JSON.parse in try/catch, validate expected keys and color formats, reject or sanitize unexpected values) to avoid runtime crashes or malformed outputs.
- If you prefer no network calls, ask for an offline fallback implementation (deterministic color generation from the vibe string) or remove the external fetch entirely.
- Do not install this skill on systems that may send sensitive or confidential text to third parties until the data flow and credential handling are clarified.
If the maintainer confirms that use of openrouter.ai is intentional, they should: (1) declare the API key env var in the skill metadata, (2) add Authorization to the request headers, (3) update SKILL.md to disclose the external call, and (4) add robust parsing and validation of the model response.
Capability Analysis
Type: OpenClaw Skill
Name: openclaw-skill-vibe-to-code-theme-gen
Version: 1.0.0
The skill bundle is a legitimate tool for generating UI color themes based on text descriptions. The `handler.js` file implements the logic by sending the user's input to the OpenRouter API and formatting the JSON response into CSS, Tailwind, or VS Code configurations. While the code lacks an API key for the fetch request and performs basic JSON parsing of LLM output, these are functional oversights or environment-specific implementations rather than malicious behaviors.
Capability Assessment
Purpose & Capability
The skill's stated purpose is to generate palettes/CSS. The handler.js implementation calls an external LLM endpoint (https://openrouter.ai/api/v1/chat/completions). The SKILL.md does not mention using a third-party LLM service or needing an API key. Either the network call is intended (and should be declared), or the code is misplaced; the lack of declared credentials or explanation is disproportionate to the stated purpose.
Instruction Scope
SKILL.md describes local generation/formats and gives no indication that user-provided 'vibe' text will be sent to a third-party API. The runtime code does exactly that. This is scope creep: the instructions do not disclose external transmission of user input to openrouter.ai.
Install Mechanism
This is an instruction-only skill with one small handler.js file and no install spec or remote downloads. There is no install-time execution of arbitrary code from external URLs.
Credentials
No environment variables or credentials are declared, yet the code calls an external LLM endpoint that typically requires authentication. The skill does not request or document an API key (e.g., OPENROUTER_API_KEY) or show how authentication is provided; this is an inconsistency and could lead to implicit credential usage or failing network requests.
Persistence & Privilege
The skill is not always-enabled and does not request elevated or persistent privileges. It does not modify other skills or system-wide settings.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install openclaw-skill-vibe-to-code-theme-gen - After installation, invoke the skill by name or use
/openclaw-skill-vibe-to-code-theme-gen - Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
# VibeTheme
An OpenClaw skill that generates color palettes and theme code from a descriptive atmosphere string.
Give it a vibe like "cozy autumn evening" or "neon cyberpunk city" and get back ready-to-use theme code.
## Install
Clone into your OpenClaw skills directory:
## Usage
```
/vibe_theme generate_theme --vibe "<atmosphere>" [--format css|tailwind|vscode]
```
### Parameters
| Parameter | Required | Default | Description |
|-----------|----------|---------|-------------|
| `vibe` | Yes | — | A descriptive atmosphere (e.g. "cozy autumn evening", "neon cyberpunk city") |
| `format` | No | `css` | Output format: `css`, `tailwind`, or `vscode` |
## Output Formats
### CSS Variable Sheet (`--format css`)
A `:root` block of CSS custom properties you can paste into any stylesheet.
```css
:root {
--primary-color: #D4A373;
--secondary-color: #FAEDCD;
--accent-color: #E9EDC9;
--background-color: #FEFAE0;
--font-stack: Serif;
}
```
### Tailwind Config Snippet (`--format tailwind`)
A `colors` and `fontFamily` object for your `tailwind.config.js`.
```js
{
"colors": {
"primary": "#D4A373",
"secondary": "#FAEDCD",
"accent": "#E9EDC9",
"background": "#FEFAE0"
},
"fontFamily": {
"vibe": "Serif"
}
}
```
### VS Code Theme Draft (`--format vscode`)
A JSON structure for VS Code's `workbench.colorCustomizations` in `settings.json`.
```json
{
"workbench.colorCustomizations": {
"editor.background": "#FEFAE0",
"editor.foreground": "#D4A373",
"editorLineNumber.foreground": "#FAEDCD",
"editorCursor.foreground": "#E9EDC9",
"activityBar.background": "#FEFAE0",
"sideBar.background": "#FEFAE0",
"editor.fontFamily": "Serif"
}
}
```
## How It Works
1. The `vibe` string is sent to an LLM with a system prompt that instructs it to act as a professional UI designer.
2. The LLM returns a JSON object with `primaryColor`, `secondaryColor`, `accentColor`, `backgroundColor`, and `fontStack`.
3. The selected formatter transforms that JSON into the requested output format.
## Skill Metadata
| Field | Value |
|----------|-------|
| Name | VibeTheme |
| Slug | `openclaw-skill-vibe-to-code-theme-gen` |
| Version | `1.0.0` |
| Command | `generate_theme` |
## API
### `generateTheme(vibe, format?)`
Returns a formatted theme string.
- `vibe` **string** (required) — Descriptive atmosphere.
- `format` **string** (optional, default `'css'`) — One of `'css'`, `'tailwind'`, `'vscode'`.
### `toCSS(theme)`
Converts a theme object to a CSS `:root` block.
### `toTailwind(theme)`
Converts a theme object to a Tailwind config snippet.
### `toVSCode(theme)`
Converts a theme object to a VS Code `workbench.colorCustomizations` JSON.
Metadata
Frequently Asked Questions
What is VibeTheme?
Generates a color palette and CSS variables based on a descriptive atmosphere. It is an AI Agent Skill for Claude Code / OpenClaw, with 118 downloads so far.
How do I install VibeTheme?
Run "/install openclaw-skill-vibe-to-code-theme-gen" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is VibeTheme free?
Yes, VibeTheme is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does VibeTheme support?
VibeTheme is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created VibeTheme?
It is built and maintained by Peter Lum (@liverock); the current version is v1.0.0.
More Skills