A professional-grade CLI utility for generating, layering, and animating CSS shadows with local persistence.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install shadow
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install shadow using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Shadow CSS Generator?
Shadow is a robust technical tool designed to streamline the creation of complex visual depth in web development. As a specialized addition to the Openclaw Skills ecosystem, it allows developers to generate box-shadow, text-shadow, and drop-shadow values using precise CLI parameters rather than manual trial and error.
The tool excels at creating sophisticated design systems by supporting multi-layer compositions and neumorphic presets. By using these Openclaw Skills, frontend engineers can move beyond simple single-line shadows to create rich, elevated UI components that are instantly exportable to CSS, SCSS, or JSON formats.
Shadow CSS Generator Use Cases
- Designing elevation levels for Material Design or Neumorphic UI systems.
- Generating complex, multi-layered shadows that require high-precision blur and spread values.
- Creating smooth CSS animation keyframes between different shadow states for hover effects.
- Exporting a centralized shadow library into design tokens for SCSS or CSS variables.
How Shadow CSS Generator Works
- Initialize a shadow type (box, text, drop, or inset) using specific offset, blur, and color parameters.
- Save individual shadow definitions to a local JSONL database for persistence.
- Compose advanced visuals by layering multiple saved shadows into a single composite effect.
- Generate HTML previews or ASCII art representations to verify the visual output.
- Export the final configurations into production-ready code formats like CSS custom properties.
Shadow CSS Generator Setup
To integrate this into your environment for Openclaw Skills, ensure you have Python 3.8+ installed.
# Clone the repository containing the skill
git clone https://github.com/bytesagain/ai-skills
cd ai-skills/shadow
# Ensure the script is executable
chmod +x scripts/script.sh
# Run help to verify installation
bash scripts/script.sh help
Shadow CSS Generator Data Schema & Taxonomy
The skill maintains a local flat-file database to ensure your design tokens are portable and permanent.
| File Path | Format | Description |
|---|---|---|
~/.shadow/data.jsonl |
JSONL | Stores each shadow definition, parameters, and metadata per line. |
preview.html |
HTML/CSS | Optional temporary file generated for visual browser testing. |
stdout |
String | CSS-ready strings for direct copy-paste into stylesheets. |
Shadow CSS Generator Advanced Features
- Multi-layer Compositions: Combine an unlimited number of saved shadows into a single
layercommand for realistic depth. - Automated Keyframe Generation: Automatically calculates the interpolation between two shadow states for CSS @keyframes.
- Built-in Design Presets: Access industry-standard elevation levels (Material-1 through Material-5) out of the box.
- Design System Export: Batch export all saved presets into SCSS variables or CSS Custom Properties.
SKILL.md
Loading
Related Openclaw Skills
ClawWars Arena
A browser-based spectator combat arena where AI agents engage in real-time tactical battles and challenge the Lobster King.
macvital
A comprehensive macOS hardware health monitor for tracking CPU, RAM, disk space, and system temperatures via the command line.
Conference Schedule Optimizer
An AI-powered optimization tool designed to create personalized, high-impact itineraries for academic and scientific conferences.
TypeScript SDK: Types (Move ↔ TypeScript)
A specialized technical guide for mapping Aptos Move data types to TypeScript when using the @aptos-labs/ts-sdk.
taobao-ai
A comprehensive AI-driven navigation skill providing verified official entry points to the entire Taobao and Alibaba ecosystem.
Media.io AI Hairstyle Generator
An AI-powered image transformation tool that allows users to virtually test new hairstyles, colors, and accessories using the Media.io OpenAPI.
Featured*
