SKILL.md — MAGNE Agent Landing Page Generator
Purpose
Generate MAGNE product landing pages in the MAGNE Agent-Native Terminal Web Style — inspired by nara.build's agent-economy aesthetic, but mapped to MAGNE's specific narrative: AI agent payment rails on M Hash L2.
Use this skill when asked to:
- Create a MAGNE product landing page
- Build a MAGNE agent-native website
- Refactor/rebuild magne-ai or MAGNE-related pages
- Generate developer-facing MAGNE demo pages
1. Visual Style — MAGNE Agent-Native Terminal Web
Style Name: MAGNE Agent-Native Terminal Web
Visual Keywords
dark, terminal-native, agent economy, protocol dashboard,
mono font, dense data cards, grid lines, terminal glow,
neon minimalism, scanline optional, CLI blocks
Background
- Base:
#050810or#070910(near-black, not pure black) - Radial gradient: subtle center glow, very dark
- Grid: thin
1pxlines at low opacity (rgba(88,166,255,0.04)) - Optional: scanline overlay at
2pxpitch, 3% opacity - Avoid: glossy SaaS gradients, rounded-corner bubble UI, Apple-style frosted glass
Typography
| Element | Font | Style |
|---|---|---|
| Hero headline | Space Grotesk or Inter, fallback system-ui | Bold, 4-6rem, high contrast, tight leading |
| Body | Inter or system-ui | 400-500 weight, sharp and concise |
| Technical labels | JetBrains Mono or monospace | Uppercase, letter-spacing: 0.1em, small |
| Terminal/code blocks | JetBrains Mono or Consolas | Monospace, dark card background |
| Data values | JetBrains Mono | High contrast, neon accent |
Color Palette
Background: #070910 (near-black)
Surface: #0d1520 (card backgrounds)
Border: #1a2a3a (subtle)
Text Primary: #e6edf3
Text Secondary:#8b949e
Accent Cyan: #39d0d6 (MAGNE primary accent)
Accent Purple: #a371f7
Accent Green: #3fb950 (success/verified)
Accent Yellow: #d29922 (warning/pending)
Accent Red: #f85149 (error)
Neon Glow: rgba(57,208,214,0.2) (for terminal glow effects)
Component Patterns
- Dense data cards: small padding, tight borders, monospace values
- Terminal blocks: black background (
#010108), cyan/green text, no rounded corners or very minimal (2px) - Status indicators: small dot or
✓/✕/⏳prefix - Grid layout: CSS Grid primary, not Flexbox-heavy
- No hero images: prefer terminal output, code blocks, data
2. Narrative Structure
MAGNE Hero Narrative
Do NOT copy nara.build directly. Map its concepts:
NARA Pattern:
"Next economic actors aren't human"
→ Identity / Aapps / Currency
→ CLI: inspect / call / settle / watch
MAGNE Pattern (payment rails for AI agents):
"Agents can think. They still cannot safely pay."
→ No secure authorization
→ No agent payments
→ No verifiable receipts
→ MAGNE Agent Pay solves this
MAGNE Core Narrative Blocks
PROBLEM:
AI agents can execute tasks.
They cannot receive reliable payment.
Traditional APIs return 401.
Traditional payments lack auditability.
SOLUTION:
MAGNE Agent Pay = x402-compatible payment flow
+ M Hash L2 settlement
+ AI Task Receipt on-chain
+ MAGNE Phone as authorization layer
FLOW:
Agent creates task → API returns 402 with payment metadata
→ User authorizes in MAGNE Phone / Wallet
→ mMHA or supported asset transfers
→ Facilitator verifies on M Hash L2
→ AI Task Receipt recorded on-chain
→ Immutable, auditable by any party
Per-Section Narrative
| Section | Headline Energy | Subtext |
|---|---|---|
| Hero | One sentence, punch, agent-centric | One-liner explaining the core value |
| Problem Grid | Three problems, stark | No solution yet — just pain |
| Solution Flow | Show the full cycle | Step-by-step, no jargon |
| Live Demo | CLI as real output | Actual terminal-style interaction |
| Receipt Layer | Why receipts matter | Trust, audit, compliance |
| Phone Auth | Why it matters | Secure authorization premise |
| Dev SDK | Brief, technical | SKILL.md is the product |
| Verification Status | Honest, dense | Testnet/local vs production |
| Roadmap + CTA | Short, clear | What's next, what's blocked |
3. Page Module Rules — 9 Required Sections
Every MAGNE landing page generated by this skill must include these 9 modules:
01 — Hero
- One sharp headline (max 10 words)
- One subhead (max 20 words)
- No stock photos, no illustrations
- Optional: subtle animated grid background
- CTA: "See Demo" or "Read SKILL.md"
02 — Problem Grid
- 3-column or 3-row grid
- Each problem: icon (terminal style) + bold label + 1-line description
- Problems:
- No Secure Authorization
- No Agent Payment Flow
- No Verifiable Receipts
- Stark, no solution yet in this section
03 — Agent Pay Flow
- Visual diagram or ASCII-style flow chart
- 5 steps: Task → 402 → Authorization → Settlement → Receipt
- Each step: number + label + 1-line description
- Style: terminal/grid, not bubble diagram
04 — Live Demo Terminal
- This is the most important module
- Mimic real CLI output in terminal block
- Example content:
$ magne agent task create "analyze wallet risk"
✓ task created — task_20260520_001
$ magne api call wallet-risk --wallet 0x742d...
✕ 402 Payment Required
amount: 0.01 mMHA
recipient: 0xf39...2266
chain: mhash-l2-testnet (20250827)
$ magne pay settle --tx 0x130b...701e --network mhash-l2
✓ payment verified
status: verified
block: 4
$ magne receipt create --task task_20260520_001
✓ AI Task Receipt created
receiptId: 0x428d...fe91
explorer: https://l2-explorer.testnet.magicalhash.com/tx/0x7d42...
- Use real tx hashes and addresses from runtime verification when available
05 — Receipt Layer
- Explain why on-chain receipts matter
- Technical detail: event
AITaskReceiptCreated(receiptId, taskId, user, provider, amount, token, paymentTxHash, timestamp) - Show actual event fields
- Emphasize: immutable, programmable, verifiable
06 — Secure Phone Authorization
- Brief section on MAGNE Phone as the authorization layer
- "MAGNE turns secure phones into AI agent payment terminals"
- Not detailed — teaser, not full spec
07 — Developer SDK / SKILL.md
- Show SKILL.md as the product
- Code block: the core SKILL.md contract pattern
- Link to the actual SKILL.md
- Developer pitch: "Your code + a SKILL.md = an Aapp"
08 — Runtime Verification Status
- Dense table or terminal-style status output
- Show actual current state:
[✓] Smart contracts compile
[✓] Smart contracts deploy (local Hardhat)
[⏳] M Hash L2 testnet deployment pending
[✓] Backend server runtime verified
[✓] Facilitator verify — strict mode
[✓] mMHA ERC20 payment — verified
[✓] AI Task Receipt — tx confirmed
[⏳] Browser MetaMask flow — pending real browser
[⏳] M Hash L2 explorer link — pending testnet access
09 — Roadmap + CTA
- Short roadmap: What's next, what's blocked
- CTA: "Deploy to M Hash L2" / "Read the SKILL.md" / "Fork the Demo"
- Compliance note: testnet only, not production
4. Copy / Tone Rules
Tone Principles
- Concise: No marketing fluff. Every sentence carries information.
- Agent-native: Write as if addressing an AI agent, not a human marketer.
- Technical rhythm: Short declarative sentences. Lists over paragraphs.
- Honest: State what's working, what's pending, what's blocked.
Sentence Patterns That Work
Agents can [verb].
They still cannot [limitation].
APIs can [verb].
They still cannot [limitation].
[Verb] in. [Noun] out.
Your [noun] + a SKILL.md = an Aapp.
Phrases TO USE
- "x402-compatible"
- "testnet-stage developer demo"
- "designed to support"
- "planned"
- "subject to technical validation"
- "runtime verified"
- "strict on-chain verification"
- "immutable AI Task Receipt"
- "facilitator pattern"
- "M Hash L2 settlement"
Phrases NEVER USE (Red Lines)
❌ "production-ready" (unless on mainnet, audited, live)
❌ "guaranteed revenue"
❌ "MHA will appreciate"
❌ "risk-free"
❌ "first / only / world's first" (unless legally verified)
❌ "official x402 partnership" (unless confirmed)
❌ "secure" alone (use "cryptographically verifiable" or "on-chain")
❌ "decentralized" (unless provably so)
❌ "mainnet available"
❌ "100% uptime"
5. NARA → MAGNE Concept Mapping
Use this table when referencing nara.build concepts:
| NARA Concept | MAGNE Mapping |
|---|---|
| Agent Identity | MAGNE Agent ID / Agent Registry |
| Aapp | MAGNE Agent Service / Agent Pay API |
| SkillHub | MAGNE SkillHub / Developer SDK |
| NARA Currency (NAR) | mMHA / MHA-supported settlement asset |
CLI: agent inspect | magne agent task create |
CLI: agent call | magne api call wallet-risk |
CLI: agent settle | magne pay settle --tx <hash> |
CLI: agent watch | magne receipt watch --task <id> |
| on-chain state | M Hash L2 AI Task Receipt |
| AgentX | MAGNE Agent Portal / magne-agent-pay-demo |
| mainnet live stats | Runtime Verification Status |
| nar token | mMHA (ERC20 testnet mock) |
6. Technical Content Mapping
When including technical details, use these exact values from runtime verification:
Network: M Hash L2 Testnet
Chain ID: 20250827
RPC: https://l2-rpc.testnet.magicalhash.com
Explorer: https://l2-explorer.testnet.magicalhash.com
MockMHA: 0x5FbDB2315678afecb367f032d93F642f64180aa3 (local verified)
AITaskReceipt: 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512 (local verified)
Payment tx: 0x130ba003e19e8a6edc2a7ae6147e1f7ff9411cb78b0dc875b9d5084df4b4701e
Receipt tx: 0x7d423e93ed4ecd7b488394a71a9c711f8b30b7b1515e34a537030abce785a705
Receipt ID: 0x428d5f6dc07adf8f473793dcdc01c8041d979a521084759ca2e10dcb7152fe91
Block (local): 4
7. Deliverable Format Rules
Every output generated with this skill must include:
File Structure
magne-agent-landing/
├── index.html # Single page, all sections inline
├── style.css # MAGNE Agent-Native Terminal style
├── app.js # Minimal JS for terminal animation
├── README.md # Link to SKILL.md + deployment notes
└── SKILL.md # Reference copy of this skill
HTML Requirements
<!DOCTYPE html>,<html lang="en">- CSS Grid primary layout
- Responsive down to 375px width
- No external JS dependencies except:
https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js(when wallet integration needed)
- Terminal block must use
<pre><code>with proper escaping - All section IDs:
hero,problems,flow,demo,receipts,phone,sdk,status,roadmap
CSS Requirements
- CSS custom properties for all colors (
:root) - No Tailwind (unless explicitly requested)
- Mobile-first with
min-widthbreakpoints at 768px and 1200px - Terminal glow:
box-shadow: 0 0 20px rgba(57,208,214,0.15)
Copy Requirements
- Headlines: max 10 words
- Subheads: max 20 words
- Body paragraphs: max 2 sentences each
- No lorem ipsum
- All status claims must match actual runtime state
Compliance Checklist
- No "production-ready" unless on verified mainnet
- Testnet badge on hero
- Risk warning in footer
- Chain ID / RPC / Explorer links point to
magicalhash.com - No token price claims
- No guaranteed revenue language
- All tx hashes are real (from runtime verification, not placeholder)
Quickstart Checklist
When generating a MAGNE landing page:
- Read this SKILL.md
- Map NARA concepts → MAGNE concepts (Section 5)
- Use real runtime data (Section 6) — do not use placeholder hashes
- Build 9 sections (Section 3) in order
- Apply MAGNE Agent-Native Terminal style (Section 1)
- Run compliance checklist (Section 7)
- Verify: page loads, terminal demo renders, all links point to magicalhash.com
Reference Links
- SKILL.md source:
~/.openclaw/workspace-main/skills/magne-agent-landing/SKILL.md - MAGNE Agent Pay Demo:
https://github.com/jerrysohigh-create/magne-agent-pay-demo - M Hash L2:
https://github.com/magne-ai/M-Hash-L2 - nara.build (inspiration):
https://nara.build