diff --git a/.agents/skills/react-email/README.md b/.agents/skills/react-email/README.md
new file mode 100644
index 00000000..65267cf7
--- /dev/null
+++ b/.agents/skills/react-email/README.md
@@ -0,0 +1,51 @@
+# React Email Agent Skill
+
+This directory contains an Agent Skill for building HTML emails with React Email components.
+
+## Structure
+
+```
+skills/
+└── react-email/
+ ├── SKILL.md # Main skill instructions
+ └── references/
+ ├── COMPONENTS.md # Complete component reference
+ ├── EDITOR.md # Visual email editor reference
+ ├── I18N.md # Internationalization guide
+ ├── PATTERNS.md # Common email patterns and examples
+ ├── SENDING.md # Email sending guide
+ └── STYLING.md # Styling and CSS reference
+```
+
+## What is an Agent Skill?
+
+Agent Skills are a standardized format for giving AI agents specialized knowledge and workflows. This skill teaches agents how to:
+
+- Build HTML email templates using React Email components
+- Add a visual drag-and-drop email editor to a React application (using `@react-email/editor`)
+- Send emails through Resend and other providers
+- Implement internationalization for multi-language support
+- Follow email development best practices
+
+## Using This Skill
+
+AI agents can load this skill to gain expertise in React Email development. The skill follows the [Agent Skills specification](https://agentskills.io) with:
+
+- **SKILL.md**: Core instructions loaded when the skill is activated (< 350 lines)
+- **references/**: Detailed documentation loaded on-demand for specific topics
+
+## Progressive Disclosure
+
+The skill is structured for efficient context usage:
+
+1. **Metadata** (~100 tokens): Name and description in frontmatter
+2. **Core Instructions** (~3K tokens): Main SKILL.md content
+3. **Detailed References** (as needed): Component docs, i18n guides, patterns
+
+Agents load only what they need for each task.
+
+## Learn More
+
+- [React Email Documentation](https://react.email/docs/llms.txt)
+- [Agent Skills Specification](https://agentskills.io/specification.md)
+- [Resend Documentation](https://resend.com/docs/llms.txt)
\ No newline at end of file
diff --git a/.agents/skills/react-email/SKILL.md b/.agents/skills/react-email/SKILL.md
new file mode 100644
index 00000000..0b495e5b
--- /dev/null
+++ b/.agents/skills/react-email/SKILL.md
@@ -0,0 +1,400 @@
+---
+name: react-email
+description: Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.
+license: MIT
+metadata:
+ author: Resend
+ version: "2.1.0"
+ homepage: https://react.email
+ source: https://github.com/resend/react-email
+ openclaw:
+ install:
+ - kind: node
+ package: react-email
+ label: React Email
+ links:
+ repository: https://github.com/resend/react-email
+ documentation: https://resend.com/docs/react-email-skill
+---
+
+# React Email
+
+Build and send HTML emails using React components. A modern, component-based approach to email development that works across all major email clients.
+
+## Installation
+
+```sh
+npm i react-email
+```
+
+Or scaffold a new project:
+
+```sh
+npx create-email@latest
+cd react-email-starter
+npm install
+npm run dev
+```
+
+This works with any package manager (npm, yarn, pnpm, bun) — substitute accordingly.
+
+The dev server runs at localhost:3000 with a preview interface for templates in the `emails` folder.
+
+### Adding to an Existing Project
+
+Install the packages and add a script to your `package.json`:
+
+```json
+{
+ "scripts": {
+ "email": "email dev --dir emails --port 3000"
+ }
+}
+```
+
+Make sure the path to the emails folder is relative to the base project directory. Ensure `tsconfig.json` includes proper support for JSX.
+
+## Basic Email Template
+
+Create an email component with proper structure using the Tailwind component for styling:
+
+```tsx
+import {
+ Html,
+ Head,
+ Preview,
+ Body,
+ Container,
+ Heading,
+ Text,
+ Button,
+ Tailwind,
+ pixelBasedPreset
+} from 'react-email';
+
+interface WelcomeEmailProps {
+ name: string;
+ verificationUrl: string;
+}
+
+export default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) {
+ return (
+
+
+
+
+ Welcome - Verify your email
+
+
+ Welcome!
+
+
+ Hi {name}, thanks for signing up!
+
+
+
+
+
+
+ );
+}
+
+// Preview props for testing
+WelcomeEmail.PreviewProps = {
+ name: 'John Doe',
+ verificationUrl: 'https://example.com/verify/abc123'
+} satisfies WelcomeEmailProps;
+
+export { WelcomeEmail };
+```
+
+## Behavioral Guidelines
+
+- When iterating over the code, only update what the user asked for. Keep the rest intact.
+- If the user asks to use media queries, inform them that most email clients don't support them and suggest a different approach.
+- Never use template variables (like `{{name}}`) directly in TypeScript code. Instead, reference the underlying properties directly. If the user explicitly asks for `{{variableName}}`, place the mustache string only in PreviewProps, never in the component JSX:
+
+```typescript
+const EmailTemplate = (props) => {
+ return (
+
Hello, {props.variableName}!
+ );
+}
+
+EmailTemplate.PreviewProps = {
+ variableName: "{{variableName}}",
+};
+
+export default EmailTemplate;
+```
+
+- Never write the `{{variableName}}` pattern directly in the component structure. If the user insists, explain that this would make the template invalid.
+
+## Essential Components
+
+See [references/COMPONENTS.md](references/COMPONENTS.md) for complete component documentation.
+
+**Core Structure:**
+- `Html` - Root wrapper with `lang` attribute
+- `Head` - Meta elements, styles, fonts
+- `Body` - Main content wrapper
+- `Container` - Outermost centering wrapper (has built-in `max-width: 37.5em`). Use only once per email.
+- `Section` - Interior content blocks (no built-in max-width). Use for grouping content inside `Container`.
+- `Row` & `Column` - Multi-column layouts
+- `Tailwind` - Enables Tailwind CSS utility classes
+
+**Content:**
+- `Preview` - Inbox preview text, always first inside ``
+- `Heading` - h1-h6 headings
+- `Text` - Paragraphs
+- `Button` - Styled link buttons (always include `box-border`)
+- `Link` - Hyperlinks
+- `Img` - Images (see Static Files section below)
+- `Hr` - Horizontal dividers
+
+**Specialized:**
+- `CodeBlock` - Syntax-highlighted code
+- `CodeInline` - Inline code
+- `Markdown` - Render markdown
+- `Font` - Custom web fonts
+
+## Before Writing Code
+
+When a user requests an email template, ask clarifying questions FIRST if they haven't provided:
+
+1. **Brand colors** - Ask for primary brand color (hex code like #007bff)
+2. **Logo** - Ask if they have a logo file and its format (PNG/JPG only - warn if SVG/WEBP)
+3. **Style preference** - Professional, casual, or minimal tone
+4. **Production URL** - Where will static assets be hosted in production?
+
+## Static Files and Images
+
+### Directory Structure
+
+Local images must be placed in the `static` folder inside your emails directory:
+
+```
+project/
+├── emails/
+│ ├── welcome.tsx
+│ └── static/ <-- Images go here
+│ └── logo.png
+```
+
+### Dev vs Production URLs
+
+Use this pattern for images that work in both dev preview and production:
+
+```tsx
+const baseURL = process.env.NODE_ENV === "production"
+ ? "https://cdn.example.com" // User's production CDN
+ : "";
+
+export default function Email() {
+ return (
+
+ );
+}
+```
+
+**How it works:**
+- **Development:** `baseURL` is empty, so URL is `/static/logo.png` - served by React Email's dev server
+- **Production:** `baseURL` is the CDN domain, so URL is `https://cdn.example.com/static/logo.png`
+
+**Important:** Always ask the user for their production hosting URL. Do not hardcode `localhost:3000`.
+
+## Styling
+
+See [references/STYLING.md](references/STYLING.md) for comprehensive styling documentation including typography, layout patterns, dark mode, and brand consistency.
+
+### Key Rules
+
+- Use `Tailwind` with `pixelBasedPreset` (email clients don't support `rem`). Import `pixelBasedPreset` from `react-email`.
+- Never use flexbox or grid — use `Row`/`Column` components or tables for layouts.
+- Avoid CSS/Tailwind media queries (`sm:`, `md:`, `lg:`, `xl:`) — limited email client support.
+- Never use theme selectors (`dark:`, `light:`) — not supported.
+- Never use SVG or WEBP images — warn users about rendering issues.
+- Always specify border type (`border-solid`, `border-dashed`, etc.) — email clients don't inherit it.
+- For single-side borders, reset others first (`border-none border-l border-solid`).
+
+### Required Classes
+
+| Component | Required Class | Why |
+|-----------|---------------|-----|
+| `Button` | `box-border` | Prevents padding from overflowing the button width |
+| `Hr` / any border | `border-solid` (or `border-dashed`, etc.) | Email clients don't inherit border type |
+| Single-side borders | `border-none` + the side | Resets default borders on other sides |
+
+### Structure Notes
+- Always define `
+ );
+}
+```
+
+**How it works:**
+- **Development:** `baseURL` is empty, so URL is `/static/logo.png` - served by React Email's dev server
+- **Production:** `baseURL` is the CDN domain, so URL is `https://cdn.example.com/static/logo.png`
+
+**Important:** Always ask the user for their production hosting URL. Do not hardcode `localhost:3000`.
+
+## Styling
+
+See [references/STYLING.md](references/STYLING.md) for comprehensive styling documentation including typography, layout patterns, dark mode, and brand consistency.
+
+### Key Rules
+
+- Use `Tailwind` with `pixelBasedPreset` (email clients don't support `rem`). Import `pixelBasedPreset` from `react-email`.
+- Never use flexbox or grid — use `Row`/`Column` components or tables for layouts.
+- Avoid CSS/Tailwind media queries (`sm:`, `md:`, `lg:`, `xl:`) — limited email client support.
+- Never use theme selectors (`dark:`, `light:`) — not supported.
+- Never use SVG or WEBP images — warn users about rendering issues.
+- Always specify border type (`border-solid`, `border-dashed`, etc.) — email clients don't inherit it.
+- For single-side borders, reset others first (`border-none border-l border-solid`).
+
+### Required Classes
+
+| Component | Required Class | Why |
+|-----------|---------------|-----|
+| `Button` | `box-border` | Prevents padding from overflowing the button width |
+| `Hr` / any border | `border-solid` (or `border-dashed`, etc.) | Email clients don't inherit border type |
+| Single-side borders | `border-none` + the side | Resets default borders on other sides |
+
+### Structure Notes
+- Always define `