mirror of
https://github.com/mergisi/awesome-openclaw-agents.git
synced 2026-08-14 00:47:49 +00:00
Add skills/ section with Gemma and Claude platforms
- New skills/ folder structure for on-device skill templates - Gemma: haiku-card (for Google AI Edge Gallery, Gemma 4) - Claude: placeholder for Claude Code skills - Added skills section to main README contents + body - .nojekyll to enable proper GitHub Pages serving
This commit is contained in:
Mustafa Ergisi
@@ -41,6 +41,7 @@ Pick a template. Customize the config. Get a full deploy package. No terminal re
|
||||
- [E-Commerce](#e-commerce) · [Data](#data) · [SaaS](#saas) · [Real Estate](#real-estate) · [Freelance](#freelance) · [Moltbook](#-moltbook-new)
|
||||
- [Supply Chain](#supply-chain) · [Compliance](#compliance) · [Voice](#voice) · [Customer Success](#customer-success) · [Automation](#automation)
|
||||
- [Use Cases](#use-cases) (132 real-world examples)
|
||||
- [Skills](#skills) (on-device skills for Gemma & Claude Code)
|
||||
- [Quickstart](#quickstart)
|
||||
- [Why OpenClaw?](#why-openclaw) (vs Frameworks, Lightweight, Enterprise)
|
||||
- [Quick Deploy with CrewClaw](#quick-deploy-with-crewclaw)
|
||||
@@ -427,6 +428,22 @@ Top categories: Personal Productivity (14) · Business Operations (11) · Develo
|
||||
|
||||
---
|
||||
|
||||
## Skills
|
||||
|
||||
Reusable on-device skills for local AI platforms.
|
||||
|
||||
### [Gemma](./skills/gemma/) — Google AI Edge Gallery
|
||||
Skills for Gemma 4 running on iPhone / Android via [Google AI Edge Gallery](https://github.com/google-ai-edge/gallery). Fully offline, no API.
|
||||
|
||||
- **[haiku-card](./skills/gemma/haiku-card/)** — Write a haiku, render as a shareable card
|
||||
|
||||
### [Claude](./skills/claude/) — Claude Code
|
||||
Skills for [Claude Code](https://claude.com/claude-code), invoked via slash commands or automatic triggers.
|
||||
|
||||
**[Browse all skills →](./skills/)**
|
||||
|
||||
---
|
||||
|
||||
## Quickstart
|
||||
|
||||
Get a working agent running in under 5 minutes with zero config:
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
# Skills
|
||||
|
||||
Reusable skills for different local AI platforms.
|
||||
|
||||
## Platforms
|
||||
|
||||
### [Gemma](./gemma/) — Google AI Edge Gallery
|
||||
Skills for Gemma 4 running on device via [Google AI Edge Gallery](https://github.com/google-ai-edge/gallery) (iPhone / Android). Fully offline, no API.
|
||||
|
||||
### [Claude](./claude/) — Claude Code
|
||||
Skills for [Claude Code](https://claude.com/claude-code) — invoked via `/skill-name` slash commands or automatic triggers.
|
||||
|
||||
## Difference at a glance
|
||||
|
||||
| | Gemma | Claude |
|
||||
|---|---|---|
|
||||
| **Runs on** | iPhone / Android (on device) | Desktop (Claude Code CLI / app) |
|
||||
| **Format** | SKILL.md + HTML + JS | SKILL.md (Markdown only) |
|
||||
| **Serving** | GitHub Pages (webview) | Local files |
|
||||
| **Install** | URL load in Gallery app | Copy to `~/.claude/skills/` |
|
||||
|
||||
Each folder has its own README with install instructions.
|
||||
@@ -0,0 +1,32 @@
|
||||
# Claude Skills — Claude Code
|
||||
|
||||
Skills for [Claude Code](https://claude.com/claude-code) — invoked via `/skill-name` slash commands or automatic triggers based on the description.
|
||||
|
||||
## How to install
|
||||
|
||||
Copy any skill folder into `~/.claude/skills/`:
|
||||
|
||||
```bash
|
||||
cp -r skill-name ~/.claude/skills/
|
||||
```
|
||||
|
||||
The skill is immediately available. Invoke with `/skill-name` or let Claude trigger it automatically based on the description.
|
||||
|
||||
## Format
|
||||
|
||||
Each skill is a single Markdown file with YAML frontmatter:
|
||||
|
||||
```markdown
|
||||
---
|
||||
name: skill-name
|
||||
description: When to trigger this skill
|
||||
---
|
||||
|
||||
# Instructions
|
||||
|
||||
What the skill should do...
|
||||
```
|
||||
|
||||
## Skills coming soon
|
||||
|
||||
This folder is a placeholder for Claude Code skills. Add yours via PR.
|
||||
@@ -0,0 +1,41 @@
|
||||
# Gemma Skills — Google AI Edge Gallery
|
||||
|
||||
Skills for Gemma 4 running on device via [Google AI Edge Gallery](https://github.com/google-ai-edge/gallery). Each skill loads from a GitHub Pages URL, runs fully offline, no API.
|
||||
|
||||
## Skills in this repo
|
||||
|
||||
### [haiku-card](./haiku-card/)
|
||||
Write a haiku (5-7-5) about any topic and render it as a shareable card.
|
||||
|
||||
**Install URL:**
|
||||
```
|
||||
https://mergisi.github.io/awesome-openclaw-agents/skills/gemma/haiku-card/
|
||||
```
|
||||
|
||||
**Prompts:**
|
||||
- "Write a haiku about ocean"
|
||||
- "Haiku card: cherry blossoms"
|
||||
|
||||
## How to install
|
||||
|
||||
1. Open the Google AI Edge Gallery app ([iOS](https://apps.apple.com/us/app/google-ai-edge-gallery/id6749645337) / [Android](https://play.google.com/store/apps/details?id=com.google.ai.edge.gallery))
|
||||
2. Go to **Agent Skills → Manage Skills**
|
||||
3. Tap **(+) → Load skill from URL**
|
||||
4. Paste the install URL above
|
||||
5. Toggle the skill on
|
||||
|
||||
## How to build your own
|
||||
|
||||
Each skill folder contains:
|
||||
```
|
||||
skill-name/
|
||||
├── SKILL.md ← metadata + LLM instructions (YAML frontmatter)
|
||||
├── scripts/index.html ← JS entry point (run_js handler)
|
||||
└── assets/webview.html ← (optional) interactive webview UI
|
||||
```
|
||||
|
||||
See Google's [Skills README](https://github.com/google-ai-edge/gallery/tree/main/skills) for full format docs.
|
||||
|
||||
## Community skills
|
||||
|
||||
More skills from the community — see [Google's Skills discussion category](https://github.com/google-ai-edge/gallery/discussions/categories/skills).
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
name: haiku-card
|
||||
description: Write a haiku about a topic and render it as a shareable card.
|
||||
---
|
||||
|
||||
# Haiku Card
|
||||
|
||||
Write a haiku (5-7-5) and display it on a decorative card.
|
||||
|
||||
## Examples
|
||||
|
||||
* "Write a haiku about ocean"
|
||||
* "Make a haiku about monday morning"
|
||||
* "Haiku card: cherry blossoms"
|
||||
|
||||
## Instructions
|
||||
|
||||
You MUST use the `run_js` tool with the following exact parameters:
|
||||
|
||||
- data: A JSON string with the following fields:
|
||||
- line1: String - the first line of the haiku
|
||||
- line2: String - the second line of the haiku
|
||||
- line3: String - the third line of the haiku
|
||||
- topic: String - the topic word, displayed at the bottom of the card
|
||||
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Haiku</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body { width: 100%; height: 100%; }
|
||||
body {
|
||||
background: linear-gradient(135deg, #f5f1e8 0%, #e8dfc8 100%);
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
color: #2c2416;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6%;
|
||||
}
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #8b7355;
|
||||
padding: 4%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3%; left: 3%; right: 3%; bottom: 3%;
|
||||
border: 1px solid rgba(139, 115, 85, 0.3);
|
||||
pointer-events: none;
|
||||
}
|
||||
.haiku {
|
||||
text-align: center;
|
||||
font-size: clamp(18px, 5vw, 42px);
|
||||
font-weight: 400;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.haiku div { margin: 0.3em 0; }
|
||||
.rule {
|
||||
width: 80px;
|
||||
height: 1px;
|
||||
background: #8b7355;
|
||||
margin: 30px 0 20px;
|
||||
}
|
||||
.topic {
|
||||
font-style: italic;
|
||||
font-size: clamp(12px, 2.5vw, 20px);
|
||||
color: #8b7355;
|
||||
}
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 6%;
|
||||
font-size: clamp(10px, 1.8vw, 14px);
|
||||
color: rgba(139, 115, 85, 0.6);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="haiku" id="haiku"></div>
|
||||
<div class="rule"></div>
|
||||
<div class="topic" id="topic"></div>
|
||||
<div class="footer">made on device with gemma</div>
|
||||
</div>
|
||||
<script>
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const l1 = params.get('l1') || '';
|
||||
const l2 = params.get('l2') || '';
|
||||
const l3 = params.get('l3') || '';
|
||||
const t = params.get('t') || 'untitled';
|
||||
document.getElementById('haiku').innerHTML =
|
||||
'<div>' + l1 + '</div><div>' + l2 + '</div><div>' + l3 + '</div>';
|
||||
document.getElementById('topic').textContent = '— ' + t + ' —';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Haiku Card</title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
window['ai_edge_gallery_get_result'] = async (data) => {
|
||||
const jsonObj = JSON.parse(data);
|
||||
return JSON.stringify({
|
||||
webview: {
|
||||
url: `webview.html?l1=${encodeURIComponent(jsonObj.line1)}&l2=${encodeURIComponent(jsonObj.line2)}&l3=${encodeURIComponent(jsonObj.line3)}&t=${encodeURIComponent(jsonObj.topic)}`
|
||||
}
|
||||
})
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user