A standardized HTML and CSS framework for AI agents to generate structured, masonry-style daily reports with built-in theme switching.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install groupaassage
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 groupaassage 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 HTML Daily Report Generator Spec?
This specification defines the essential elements and structure for generating daily reports in HTML format. Designed specifically for AI assistants like Claude Code, it ensures visual consistency, responsive design, and modern features like dark/light mode and masonry layouts. By using these Openclaw Skills, developers can automate the creation of professional community or project updates that are both readable and aesthetically pleasing across different devices.
The framework focuses on a flat HTML structure that allows for dynamic content distribution while maintaining strict UI standards. It includes comprehensive CSS variables, font specifications, and JavaScript hooks for theme persistence, making it a robust foundation for any automated reporting workflow.
HTML Daily Report Generator Spec Use Cases
- Automating community daily news summaries using AI agents.
- Generating project status reports with balanced multi-column layouts.
- Creating theme-aware documentation snippets that sync with parent UI containers.
- Developing standardized output formats for Openclaw Skills to ensure consistency across various LLM-generated documents.
How HTML Daily Report Generator Spec Works
- The AI agent initializes an HTML document with specific root attributes and CSS variables.
- A specialized Masonry CSS layout is applied using column-count to distribute content sections dynamically.
- JavaScript scripts handle theme persistence and anti-flicker (FOUC) logic using localStorage.
- Large content blocks like hot topics or AI news are split into smaller sections to maintain visual balance across columns.
- Theme synchronization is established between the parent page and report iframe via the postMessage API.
HTML Daily Report Generator Spec Setup
To implement this within your Openclaw Skills workflow, follow these steps:
- Set the root HTML element:
<html lang="zh-CN" data-theme="dark">
- Define the CSS variables in your
:rootfor dark and light modes. - Insert the FOUC prevention script in the
<head>:
(function () {
const t = localStorage.getItem('pusa-theme') || 'dark';
document.documentElement.setAttribute('data-theme', t);
})();
- Structure your content using a flat
<main class="newspaper-grid">containing only sibling<section>elements.
HTML Daily Report Generator Spec Data Schema & Taxonomy
The skill organizes its output based on a strict hierarchy and naming convention:
| Element | CSS Class | Purpose |
|---|---|---|
| Main Container | .newspaper-grid |
3-column masonry layout container |
| Content Section | section |
Individual content blocks (avoiding nested wraps) |
| Theme Button | .theme-btn |
Interactive toggle for dark/light mode |
| Metadata | .issue-info |
Displaying report version or date |
| Logic Key | pusa-theme |
localStorage key for persistent user preferences |
HTML Daily Report Generator Spec Advanced Features
- Automated Masonry Layout for optimized screen space usage without complex JavaScript libraries.
- Cross-window theme synchronization using HTML5 postMessage for seamless integration into dashboards.
- Intelligent content splitting rules that monitor block height to ensure column balance.
- Native system font stack implementation for maximum performance and zero external font dependencies.
- FOUC (Flash of Unstyled Content) prevention script for smooth theme transitions.
SKILL.md
Loading
Related Openclaw Skills
Romania
A specialized AI agent skill for planning deep, authentic Romanian travel experiences with regional expertise and practical logistics.
AI.MD: AI-Native Structured Instructions
AI.MD is a methodology and conversion tool that transforms human-readable system instructions into high-precision, structured labels optimized for LLM attention and token efficiency.
DingTalk Group Management Skill
A technical interface for managing DingTalk internal group chats through the DingTalk Open Platform API.
OpenClaw Immediate Ack
A specialized skill for OpenClaw agents that sends an immediate, bilingual acknowledgment message to users before the full AI response is generated.
buffy-agent
A free personal behavior agent for tracking habits, tasks, and routines with automated reminders and daily briefings across multiple chat platforms.
Subdomain Enumerator
A high-performance reconnaissance tool that discovers subdomains via DNS brute-forcing and certificate transparency log mining.
Featured*
