← Back to Skills Marketplace
90
Downloads
1
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install token-image
Description
Generate themed social/marketing image React components using design tokens. Produces TSX files that render to PNG. Use when the user asks to generate images...
Usage Guidance
This skill appears internally consistent with its goal of generating token-driven React image components, but before running it you should: 1) Review and approve the workspace changes — the script will create a .token-image/ directory and write files into your project. 2) Inspect the generated package.json and the external npm dependency @zane-chen/token-image (and any transitive dependencies) before running npm install; npm installs can run arbitrary install scripts. 3) Be aware SKILL.md asks you to run `npx playwright install chromium`, which downloads browser binaries. If you prefer, run init.sh and installs in an isolated/sandboxed environment (container, VM) or a throwaway branch. 4) If you provide a custom tokens.json path, the skill will read that file — only provide files you trust. 5) If you need a stricter review, check the contents of .token-image/src and node_modules after installation and consider pinning versions or using an audit tool (npm audit, vendor lockfile) before rendering.
Capability Analysis
Type: OpenClaw Skill
Name: token-image
Version: 1.0.0
The token-image skill bundle is a legitimate tool designed to generate themed marketing images by rendering React components using Playwright. The workflow defined in SKILL.md and the supporting prompts (writer.md, reviewer.md) correctly orchestrate a multi-agent process for content planning, component generation, and visual review. The initialization script (scripts/init.sh) safely bootstraps a local workspace, manages design tokens, and installs standard dependencies like React and Playwright. No indicators of data exfiltration, malicious persistence, or harmful prompt injection were found; all shell executions and file operations are strictly aligned with the stated purpose of image generation and workspace management.
Capability Tags
Capability Assessment
Purpose & Capability
The name/description (generate token-aware image components → TSX → PNG) matches the included assets, prompts, and scripts. The skill bundles design-token presets, design guides, writer/reviewer/shared prompts, and an init.sh that bootstraps a .token-image workspace and installs an image-rendering package — all consistent with building and rendering React image components.
Instruction Scope
SKILL.md instructs the agent to ask intake questions, optionally run scripts/init.sh to create .token-image/, copy tokens, write Viewport/styles/components to .token-image/src/, run a render pipeline and visually review PNG outputs. All referenced files are inside the skill package or the created .token-image workspace. The instructions do not request unrelated system files, credentials, or external endpoints beyond tool installation.
Install Mechanism
There is no registry-level install spec, but the included scripts/init.sh will run `npm install` inside the created .token-image workspace and SKILL.md recommends `npx playwright install chromium`. That causes network downloads and execution of npm package install scripts. The package @zane-chen/token-image (declared in the generated package.json) is an external npm package of unknown provenance — installing it is necessary for rendering but carries the usual npm risk (arbitrary install scripts, third-party code). Playwright will download browser binaries. This is expected for the skill's purpose but worth noting as a runtime/downstream risk.
Credentials
The skill requests no environment variables, no credentials, and no config paths outside the project-local .token-image workspace. It operates on files under the project root (reads/writes .token-image and reads user-supplied token files if provided). There are no disproportionate secret or credential requests.
Persistence & Privilege
The skill creates and populates a persistent workspace folder (.token-image/) in the project root, writes package.json/tsconfig/src files and installs node_modules. That persistent filesystem change and dependency installation is expected for build/render workflows but is a lasting modification the user should consent to. The skill does not request elevated system privileges or modify other skills/configs.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install token-image - After installation, invoke the skill by name or use
/token-image - Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
token-image 1.0.0
- Initial release of the token-image skill for generating themed social/marketing image React components using design tokens.
- Guides users through image generation with a structured, multi-phase workflow: Pre-flight checks, Intake Q&A, Content Planning, and Generation.
- Supports various image formats (Twitter cards, Instagram squares, og-images, custom sizes) and per-image layouts/branding.
- Automates setup of the design token workspace and imports token sets and design guides.
- Produces TSX component files that render to PNG, with shared Viewport, Stylesheet, and per-image content briefs.
Metadata
Frequently Asked Questions
What is token-aware-image?
Generate themed social/marketing image React components using design tokens. Produces TSX files that render to PNG. Use when the user asks to generate images... It is an AI Agent Skill for Claude Code / OpenClaw, with 90 downloads so far.
How do I install token-aware-image?
Run "/install token-image" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is token-aware-image free?
Yes, token-aware-image is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does token-aware-image support?
token-aware-image is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created token-aware-image?
It is built and maintained by czl9707 (@czl9707); the current version is v1.0.0.
More Skills