Why Ethereum

{
  "name": "ethskills",
  "owner": {
    "name": "Austin Griffith"
  },
  "metadata": {
    "version": "1.0.0",
    "description": "Ethereum development skills — corrects LLM blind spots on gas costs, L2s, DeFi protocols, security, and the current tool landscape."
  },
  "plugins": [
    {
      "name": "ethskills",
      "source": "./",
      "version": "1.0.0",
      "description": "Ethereum development skills — corrects LLM blind spots on gas costs, L2s, DeFi protocols, security, and the current tool landscape.",
      "author": {
        "name": "Austin Griffith"
      }
    }
  ]
}

{
  "name": "ethskills",
  "version": "1.1.0",
  "description": "Ethereum development skills — corrects LLM blind spots on gas costs, L2s, DeFi protocols, security, and the current tool landscape.",
  "author": {
    "name": "Austin Griffith",
    "url": "https://github.com/austintgriffith"
  },
  "homepage": "https://ethskills.com",
  "repository": "https://github.com/austintgriffith/ethskills",
  "license": "MIT",
  "keywords": ["ethereum", "solidity", "defi", "web3", "blockchain", "scaffold-eth"],
  "skills": [
    "./ship",
    "./why",
    "./protocol",
    "./gas",
    "./wallets",
    "./l2s",
    "./standards",
    "./tools",
    "./building-blocks",
    "./orchestration",
    "./addresses",
    "./concepts",
    "./security",
    "./testing",
    "./indexing",
    "./frontend-ux",
    "./frontend-playbook",
    "./qa",
    "./audit"
  ]
}

name: Update Gas Prices

on:
  schedule:
    - cron: '0 12 * * 1' # Weekly on Monday at noon UTC
  workflow_dispatch: # Manual trigger

jobs:
  update-gas:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Check current gas
        id: gas
        run: |
          # Get base fee from Ethereum mainnet
          RESPONSE=$(curl -s -X POST https://eth.llamarpc.com \
            -H 'Content-Type: application/json' \
            -d '{"jsonrpc":"2.0","method":"eth_gasPrice","params":[],"id":1}')
          GAS_HEX=$(echo "$RESPONSE" | jq -r '.result')
          GAS_WEI=$(printf "%d" "$GAS_HEX")
          GAS_GWEI=$(echo "scale=3; $GAS_WEI / 1000000000" | bc)
          
          # Get ETH price from CoinGecko (free, no key)
          ETH_PRICE=$(curl -s 'https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd' | jq -r '.ethereum.usd')
          
          TODAY=$(date -u +%Y-%m-%d)
          
          echo "gas_gwei=$GAS_GWEI" >> "$GITHUB_OUTPUT"
          echo "eth_price=$ETH_PRICE" >> "$GITHUB_OUTPUT"
          echo "today=$TODAY" >> "$GITHUB_OUTPUT"
          
          echo "Current gas: ${GAS_GWEI} gwei, ETH: \$${ETH_PRICE}"

      - name: Update freshness stamp
        run: |
          GAS="${{ steps.gas.outputs.gas_gwei }}"
          ETH="${{ steps.gas.outputs.eth_price }}"
          TODAY="${{ steps.gas.outputs.today }}"
          
          # Update the freshness line in gas/SKILL.md
          sed -i "s|> \*\*Last verified:\*\* .*|> **Last verified:** ${TODAY} \| Base fee: ~${GAS} gwei \| ETH: ~\$${ETH}|" gas/SKILL.md
          
          # Check if anything changed significantly (>10x drift)
          echo "Updated freshness stamp to ${TODAY}"

      - name: Commit if changed
        run: |
          git config user.name "github-actions[bot]"
          git config user.email "github-actions[bot]@users.noreply.github.com"
          git diff --quiet gas/SKILL.md || {
            git add gas/SKILL.md
            git commit -m "auto-update gas freshness: ${{ steps.gas.outputs.gas_gwei }} gwei, \${{ steps.gas.outputs.eth_price }} ETH [skip ci]"
            git push
          }

.vercel

const RATE_LIMIT_WINDOW = 5 * 60 * 1000;
const recentIPs = new Map();

function rateLimit(ip) {
  const now = Date.now();
  const last = recentIPs.get(ip);
  if (last && now - last < RATE_LIMIT_WINDOW) return false;
  recentIPs.set(ip, now);
  if (recentIPs.size > 1000) {
    for (const [k, v] of recentIPs) {
      if (now - v > RATE_LIMIT_WINDOW) recentIPs.delete(k);
    }
  }
  return true;
}

async function kvGet(path) {
  const url = process.env.KV_REST_API_URL;
  const token = process.env.KV_REST_API_TOKEN;
  const res = await fetch(`${url}/${path}`, {
    headers: { Authorization: `Bearer ${token}` },
  });
  return res.json();
}

async function kvPost(path, body) {
  const url = process.env.KV_REST_API_URL;
  const token = process.env.KV_REST_API_TOKEN;
  const res = await fetch(`${url}/${path}`, {
    method: 'POST',
    headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  });
  return res.json();
}

export default async function handler(req, res) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  if (req.method === 'OPTIONS') return res.status(200).end();

  if (!process.env.KV_REST_API_URL || !process.env.KV_REST_API_TOKEN) {
    return res.status(500).json({ error: 'storage not configured' });
  }

  // POST: submit feedback (public) or mark as read (secret required)
  if (req.method === 'POST') {
    const { action } = req.query;

    // Mark as read
    if (action === 'read') {
      const { secret, id } = req.query;
      if (!process.env.FEEDBACK_SECRET || secret !== process.env.FEEDBACK_SECRET) {
        return res.status(401).json({ error: 'unauthorized' });
      }
      if (!id) return res.status(400).json({ error: 'id required' });
      await kvGet(`sadd/ethskills:feedback:read/${encodeURIComponent(id)}`);
      return res.status(200).json({ ok: true });
    }

    // Submit feedback
    const ip = req.headers['x-forwarded-for']?.split(',')[0]?.trim() || 'unknown';
    if (!rateLimit(ip)) {
      return res.status(429).json({ error: 'Too many requests. Please wait 5 minutes.' });
    }

    const { kind, message, problem, skill, context, agent } = req.body || {};
    // Accept `message` (current) or `problem` (legacy field name).
    const body = typeof message === 'string' ? message
      : typeof problem === 'string' ? problem
      : null;
    if (!body || body.trim().length < 10) {
      return res.status(400).json({ error: 'message is required (min 10 chars)' });
    }

    const rawKind = String(kind ?? '').trim().toLowerCase();
    let normalizedKind;
    if (!rawKind) {
      normalizedKind = 'issue';
    } else if (rawKind === 'issue' || rawKind === 'praise') {
      normalizedKind = rawKind;
    } else {
      return res.status(400).json({ error: 'kind must be "issue" or "praise"' });
    }

    const entry = JSON.stringify({
      id: Date.now().toString(),
      ts: new Date().toISOString(),
      kind: normalizedKind,
      message: body.trim().slice(0, 2000),
      skill: skill ? String(skill).trim().slice(0, 100) : null,
      context: context ? String(context).trim().slice(0, 2000) : null,
      agent: agent ? String(agent).trim().slice(0, 100) : null,
    });

    const parsed = JSON.parse(entry);
    await kvGet(`lpush/ethskills:feedback/${encodeURIComponent(entry)}`);
    return res.status(200).json({ ok: true, id: parsed.id });
  }

  // GET: read feedback (secret required)
  if (req.method === 'GET') {
    const { secret } = req.query;
    if (!process.env.FEEDBACK_SECRET || secret !== process.env.FEEDBACK_SECRET) {
      return res.status(401).json({ error: 'unauthorized' });
    }

    const [listResult, readResult] = await Promise.all([
      kvGet('lrange/ethskills:feedback/0/199'),
      kvGet('smembers/ethskills:feedback:read'),
    ]);

    const readIds = new Set(readResult.result || []);
    const entries = (listResult.result || []).map(e => {
      const parsed = typeof e === 'string' ? JSON.parse(e) : e;
      return { ...parsed, read: readIds.has(parsed.id) };
    });

    return res.status(200).json({ count: entries.length, entries });
  }

  return res.status(405).json({ error: 'method not allowed' });
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="4" fill="#0a0a0a"/>
  <text x="16" y="24" font-family="monospace" font-size="24" font-weight="bold" fill="#ffb000" text-anchor="middle">E</text>
</svg>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ETHSKILLS — Feedback Inbox</title>
<style>
:root {
  --bg: #1a1208;
  --fg: #e8d5b0;
  --dim: #8a7a5f;
  --accent: #ffb000;
  --praise: #6ec27a;
  --border: #2e2410;
  --hover: #251c0c;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.6;
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { color: var(--accent); font-size: 18px; font-weight: 600; margin-bottom: 0.25rem; }
.subtitle { color: var(--dim); font-size: 13px; margin-bottom: 2rem; }

/* Auth */
#auth { max-width: 400px; }
#auth label { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: 0.5rem; }
#auth input {
  width: 100%;
  background: var(--hover);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  padding: 0.5rem 0.75rem;
  border-radius: 3px;
  margin-bottom: 0.75rem;
  outline: none;
}
#auth input:focus { border-color: var(--accent); }
#auth button {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  font-size: 14px;
  padding: 0.5rem 1.25rem;
  border-radius: 3px;
  cursor: pointer;
}
#auth button:hover { background: var(--hover); }
.auth-error { color: #c94a4a; font-size: 13px; margin-top: 0.5rem; display: none; }

/* Inbox */
#inbox { display: none; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.filter-btns { display: flex; gap: 0; }
.filter-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dim);
  font-family: inherit;
  font-size: 12px;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
}
.filter-btn:first-child { border-radius: 3px 0 0 3px; }
.filter-btn:not(:first-child) { border-left: none; }
.filter-btn:last-child { border-radius: 0 3px 3px 0; }
.filter-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(255,176,0,0.06); }
.filter-btn:hover:not(.active) { color: var(--fg); border-color: var(--dim); }

.unread-badge {
  background: var(--accent);
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  margin-left: 0.3rem;
}

.spacer { flex: 1; }
.count { color: var(--dim); font-size: 13px; }
.btn-small {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dim);
  font-family: inherit;
  font-size: 12px;
  padding: 0.3rem 0.75rem;
  border-radius: 3px;
  cursor: pointer;
}
.btn-small:hover { border-color: var(--accent); color: var(--accent); }

/* Entries */
.entry {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  background: var(--hover);
  transition: opacity 0.15s;
}
.entry.is-read { opacity: 0.5; }
.entry.is-read:hover { opacity: 0.8; }

.entry-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.entry-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.entry-ts { color: var(--dim); font-size: 12px; }
.unread-dot {
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.entry-skill {
  color: var(--accent);
  font-size: 12px;
  background: rgba(255,176,0,0.08);
  border: 1px solid rgba(255,176,0,0.2);
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
}
.entry-kind {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
}
.entry-kind.kind-issue {
  color: var(--accent);
  background: rgba(255,176,0,0.08);
  border: 1px solid rgba(255,176,0,0.25);
}
.entry-kind.kind-praise {
  color: var(--praise);
  background: rgba(110,194,122,0.08);
  border: 1px solid rgba(110,194,122,0.3);
}
.entry.kind-praise { border-left: 3px solid var(--praise); }
.entry-agent { color: var(--dim); font-size: 12px; }

.entry-problem { color: var(--fg); font-size: 14px; margin-bottom: 0.5rem; line-height: 1.6; }
.entry-context {
  color: var(--dim);
  font-size: 13px;
  border-left: 2px solid var(--border);
  padding-left: 0.75rem;
  margin-top: 0.5rem;
}

.mark-read-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dim);
  font-family: inherit;
  font-size: 11px;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.mark-read-btn:hover { border-color: var(--accent); color: var(--accent); }
.is-read .mark-read-btn { display: none; }

.empty { color: var(--dim); font-size: 14px; padding: 2rem 0; }

.footer {
  color: var(--dim);
  font-size: 12px;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
</style>
</head>
<body>

<h1>ETHSKILLS / Feedback Inbox</h1>
<p class="subtitle"><a href="/">← ethskills.com</a></p>

<div id="auth">
  <label for="secret-input">Secret</label>
  <input type="password" id="secret-input" placeholder="Enter your FEEDBACK_SECRET" autocomplete="off">
  <button id="auth-btn">Open Inbox</button>
  <p class="auth-error" id="auth-error">Wrong secret or server error.</p>
</div>

<div id="inbox">
  <div class="toolbar">
    <div class="filter-btns">
      <button class="filter-btn active" data-filter="unread" id="filter-unread">
        Unread<span class="unread-badge" id="unread-count" style="display:none"></span>
      </button>
      <button class="filter-btn" data-filter="issue">Issues</button>
      <button class="filter-btn" data-filter="praise">Praise</button>
      <button class="filter-btn" data-filter="all">All</button>
    </div>
    <span class="spacer"></span>
    <span class="count" id="count"></span>
    <button class="btn-small" id="mark-all-btn">Mark all read</button>
    <button class="btn-small" id="refresh-btn">↻ Refresh</button>
    <button class="btn-small" id="logout-btn">Sign out</button>
  </div>
  <div id="entries"></div>
</div>

<div class="footer"><a href="/">ethskills.com</a></div>

<script>
const SECRET_KEY = 'ethskills_feedback_secret';
let allEntries = [];
let currentFilter = 'unread';
let secret = '';

function formatDate(iso) {
  return new Date(iso).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
}
function esc(s) {
  return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

async function loadFeedback() {
  const res = await fetch(`/api/feedback?secret=${encodeURIComponent(secret)}`);
  if (res.status === 401) throw new Error('unauthorized');
  if (!res.ok) throw new Error('server error');
  return res.json();
}

async function markRead(id) {
  await fetch(`/api/feedback?action=read&secret=${encodeURIComponent(secret)}&id=${encodeURIComponent(id)}`, {
    method: 'POST',
  });
  const entry = allEntries.find(e => e.id === id);
  if (entry) entry.read = true;
  renderEntries();
}

async function markAllRead() {
  const unread = allEntries.filter(e => !e.read);
  await Promise.all(unread.map(e => markRead(e.id)));
}

function kindOf(entry) {
  return entry.kind === 'praise' ? 'praise' : 'issue';
}

function renderEntries() {
  const el = document.getElementById('entries');
  const countEl = document.getElementById('count');
  const unreadCountEl = document.getElementById('unread-count');

  const unread = allEntries.filter(e => !e.read);
  let visible;
  let label;
  if (currentFilter === 'unread') {
    visible = unread;
    label = 'unread';
  } else if (currentFilter === 'issue') {
    visible = allEntries.filter(e => kindOf(e) === 'issue');
    label = `issue${visible.length === 1 ? '' : 's'}`;
  } else if (currentFilter === 'praise') {
    visible = allEntries.filter(e => kindOf(e) === 'praise');
    label = visible.length === 1 ? 'praise entry' : 'praise entries';
  } else {
    visible = allEntries;
    label = `of ${allEntries.length}`;
  }

  // Update unread badge
  if (unread.length > 0) {
    unreadCountEl.textContent = unread.length;
    unreadCountEl.style.display = '';
  } else {
    unreadCountEl.style.display = 'none';
  }

  countEl.textContent = `${visible.length} ${label}`;

  if (!visible.length) {
    const empty = currentFilter === 'unread' ? 'All caught up.'
      : currentFilter === 'praise' ? 'No praise yet.'
      : currentFilter === 'issue' ? 'No issues.'
      : 'No feedback yet.';
    el.innerHTML = `<p class="empty">${empty}</p>`;
    return;
  }

  el.innerHTML = visible.map(e => {
    const k = kindOf(e);
    return `
    <div class="entry kind-${k} ${e.read ? 'is-read' : ''}" data-id="${esc(e.id)}">
      <div class="entry-header">
        <div class="entry-meta">
          ${!e.read ? '<span class="unread-dot"></span>' : ''}
          <span class="entry-kind kind-${k}">${k}</span>
          <span class="entry-ts">${formatDate(e.ts)}</span>
          ${e.skill ? `<span class="entry-skill">${esc(e.skill)}</span>` : ''}
          ${e.agent ? `<span class="entry-agent">${esc(e.agent)}</span>` : ''}
        </div>
        <button class="mark-read-btn" data-id="${esc(e.id)}">Mark read</button>
      </div>
      <div class="entry-problem">${esc(e.message ?? e.problem)}</div>
      ${e.context ? `<div class="entry-context">${esc(e.context)}</div>` : ''}
    </div>`;
  }).join('');

  el.querySelectorAll('.mark-read-btn').forEach(btn => {
    btn.addEventListener('click', e => { e.stopPropagation(); markRead(btn.dataset.id); });
  });
}

async function openInbox(s) {
  secret = s;
  const data = await loadFeedback();
  localStorage.setItem(SECRET_KEY, s);
  allEntries = data.entries;
  document.getElementById('auth').style.display = 'none';
  document.getElementById('inbox').style.display = 'block';
  renderEntries();
}

// Auth
document.getElementById('auth-btn').addEventListener('click', async () => {
  const s = document.getElementById('secret-input').value.trim();
  if (!s) return;
  try { await openInbox(s); }
  catch { document.getElementById('auth-error').style.display = 'block'; }
});
document.getElementById('secret-input').addEventListener('keydown', e => {
  if (e.key === 'Enter') document.getElementById('auth-btn').click();
});

// Filter
document.querySelectorAll('.filter-btn[data-filter]').forEach(btn => {
  btn.addEventListener('click', () => {
    currentFilter = btn.dataset.filter;
    document.querySelectorAll('.filter-btn[data-filter]').forEach(b => {
      b.classList.toggle('active', b.dataset.filter === currentFilter);
    });
    renderEntries();
  });
});

// Actions
document.getElementById('refresh-btn').addEventListener('click', async () => {
  const data = await loadFeedback();
  allEntries = data.entries;
  renderEntries();
});
document.getElementById('mark-all-btn').addEventListener('click', markAllRead);
document.getElementById('logout-btn').addEventListener('click', () => {
  localStorage.removeItem(SECRET_KEY);
  secret = '';
  allEntries = [];
  document.getElementById('inbox').style.display = 'none';
  document.getElementById('auth').style.display = 'block';
  document.getElementById('secret-input').value = '';
});

// Auto-login
const stored = localStorage.getItem(SECRET_KEY);
if (stored) openInbox(stored).catch(() => localStorage.removeItem(SECRET_KEY));
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ETHSKILLS — Ethereum Knowledge for AI Agents</title>
<meta name="description" content="The missing knowledge between AI agents and production Ethereum.">
<meta property="og:title" content="ETHSKILLS">
<meta property="og:description" content="The missing knowledge between AI agents and production Ethereum.">
<meta property="og:image" content="https://ethskills.com/og-image.png">
<meta property="og:url" content="https://ethskills.com">
<meta property="og:type" content="website">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="alternate" type="text/markdown" href="/SKILL.md" title="ETHSKILLS — full skill index (machine-readable)">
<link rel="alternate" type="text/plain" href="/llms.txt" title="ETHSKILLS — llms.txt (machine-readable)">
<meta name="ai-skills" content="https://ethskills.com/SKILL.md">
<!-- Privacy-friendly analytics by Plausible -->
<script async src="https://plausible.io/js/pa-OJ2HwbywhcpZ1FyxkBxzG.js"></script>
<script>
window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
plausible.init()
</script>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ETHSKILLS">
<meta name="twitter:description" content="The missing knowledge between AI agents and production Ethereum.">
<meta name="twitter:image" content="https://ethskills.com/og-image.png">
<style>
:root {
  /* Amber CRT (active) */
  --bg: #1a1208;
  --fg: #e8d5b0;
  --dim: #8a7a5f;
  --accent: #ffb000;
  --border: #2e2410;
  --hover: #251c0c;
  --green: #ffb000;
  /* Hot Pink (alt)
  --bg: #1a0a1a;
  --fg: #e0c8e0;
  --dim: #8a5f8a;
  --accent: #ff66cc;
  --border: #2e1430;
  --hover: #25102a;
  --green: #ff66cc;
  */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.6;
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.ascii {
  color: var(--accent);
  font-size: 16px;
  line-height: 1.15;
  white-space: pre;
  margin-bottom: 0.75rem;
  letter-spacing: 0.5px;
}

.tagline {
  color: var(--fg);
  font-size: 16px;
  margin-bottom: 1.5rem;
}
.cursor {
  display: inline-block;
  width: 8px;
  height: 1.1em;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  font-size: 15px;
  padding: 0.5rem 1rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 2.5rem;
}
.hero-btn:hover { background: var(--hover); }

.clarifier {
  color: var(--dim);
  font-size: 13px;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.hero-caption {
  color: var(--dim);
  font-size: 12px;
  margin: -2rem 0 2.5rem 0;
}

h2 {
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 2.5rem 0 1.25rem 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
  font-weight: 400;
}

.skill {
  margin-bottom: 1.25rem;
  padding: 0.6rem 0.85rem;
  border-radius: 3px;
  transition: background 0.1s;
}
.skill:hover { background: var(--hover); }
.skill-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.skill-desc {
  color: var(--dim);
  font-size: 13px;
  margin: 0.3rem 0 0.5rem 0;
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--green);
  font-family: inherit;
  font-size: 12px;
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.copy-btn:hover {
  border-color: var(--green);
  background: rgba(158, 206, 106, 0.05);
}
.copy-btn.copied {
  border-color: var(--green);
  color: var(--green);
}
.copy-btn svg, .hero-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.section-text {
  color: var(--dim);
  font-size: 13px;
}
.command-line + .section-text {
  margin-top: 1.75rem;
}

.command-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--hover);
}
.command-label {
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  flex-shrink: 0;
  margin-right: 1.5rem;
}
.command-line code {
  flex: 1;
  min-width: 0;
  color: var(--fg);
  font-family: monospace;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
}
.command-line .copy-btn { flex-shrink: 0; }
.setup-list {
  margin-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.setup-row {
  display: grid;
  grid-template-columns: 10rem 1.5fr 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.setup-tool {
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding-top: 0.1rem;
}
.setup-artifact { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.setup-howto {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
  opacity: 0.85;
}
.setup-artifact code {
  display: block;
  color: var(--fg);
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.35rem 0.55rem;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}
.setup-artifact code.is-content {
  border-style: dashed;
  color: var(--fg);
}
.setup-howto + .setup-howto,
.setup-artifact code + .setup-howto {
  margin-top: 0.65rem;
}
.setup-note {
  color: var(--dim);
  line-height: 1.6;
  padding-top: 0.5rem;
}
@media (max-width: 620px) {
  .command-line {
    align-items: stretch;
    flex-direction: column;
  }
  .command-line .copy-btn {
    width: fit-content;
  }
  .setup-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .setup-note { padding-top: 0; }
}

.footer {
  color: var(--dim);
  font-size: 12px;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* Modal */
.skill { cursor: pointer; }
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: fadeIn 0.2s ease;
}
.modal-backdrop.open { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.25s ease;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header-actions { display: flex; align-items: center; gap: 0.75rem; }
.modal-title { color: var(--accent); font-size: 15px; font-weight: 600; }
.modal-close {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  font-size: 20px;
  transition: color 0.15s;
}
.modal-close:hover { color: var(--fg); }

.modal-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.65;
}
.modal-body h1, .modal-body h2, .modal-body h3 { color: var(--accent); margin: 1.25em 0 0.5em 0; font-weight: 600; }
.modal-body h1 { font-size: 1.35em; }
.modal-body h2 { font-size: 1.15em; }
.modal-body h3 { font-size: 1.05em; }
.modal-body p { margin: 0.75em 0; }
.modal-body ul, .modal-body ol { margin: 0.75em 0; padding-left: 1.5em; }
.modal-body li { margin: 0.35em 0; }
.modal-body code { background: var(--hover); color: var(--accent); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.92em; }
.modal-body pre { background: var(--hover); border: 1px solid var(--border); border-radius: 3px; padding: 1rem; overflow-x: auto; margin: 1em 0; }
.modal-body pre code { background: none; padding: 0; color: var(--fg); }
.modal-body blockquote { border-left: 3px solid var(--accent); margin: 1em 0; padding-left: 1em; color: var(--dim); }
.modal-body table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 13px; }
.modal-body th, .modal-body td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; text-align: left; }
.modal-body th { background: var(--hover); color: var(--accent); }
.modal-body a { color: var(--accent); }
.modal-body strong { color: var(--fg); font-weight: 600; }

.modal-loading { color: var(--dim); }
.modal-error { color: #c94a4a; }
</style>
</head>
<body>

<!-- Bot-readable skill index: https://ethskills.com/SKILL.md -->
<div aria-hidden="true" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;">
ETHSKILLS — Ethereum Knowledge for AI Agents. Bot-readable. Each skill lives at /topic/SKILL.md — fetch any URL and read it into your context.
All skills: https://ethskills.com/SKILL.md
Individual skills:
https://ethskills.com/ship/SKILL.md — Ship (start here)
https://ethskills.com/why/SKILL.md — Why Ethereum
https://ethskills.com/gas/SKILL.md — Gas &amp; Costs
https://ethskills.com/wallets/SKILL.md — Wallets
https://ethskills.com/l2s/SKILL.md — Layer 2s
https://ethskills.com/standards/SKILL.md — Standards
https://ethskills.com/tools/SKILL.md — Tools
https://ethskills.com/building-blocks/SKILL.md — Money Legos (DeFi)
https://ethskills.com/orchestration/SKILL.md — Orchestration
https://ethskills.com/addresses/SKILL.md — Contract Addresses
https://ethskills.com/concepts/SKILL.md — Concepts
https://ethskills.com/security/SKILL.md — Security
https://ethskills.com/noir/SKILL.md — Noir (ZK Privacy)
https://ethskills.com/testing/SKILL.md — Testing
https://ethskills.com/indexing/SKILL.md — Indexing
https://ethskills.com/frontend-ux/SKILL.md — Frontend UX
https://ethskills.com/frontend-playbook/SKILL.md — Frontend Playbook
https://ethskills.com/qa/SKILL.md — QA (Pre-Ship Audit)
https://ethskills.com/audit/SKILL.md — Audit (Smart Contract Security Audit)
</div>

<div class="ascii" style="font-size:clamp(0.3rem,calc((100vw - 3rem) / 52),1rem);">
 ███████╗████████╗██╗  ██╗███████╗██╗  ██╗██╗██╗     ██╗     ███████╗
 ██╔════╝╚══██╔══╝██║  ██║██╔════╝██║ ██╔╝██║██║     ██║     ██╔════╝
 █████╗     ██║   ███████║███████╗█████╔╝ ██║██║     ██║     ███████╗
 ██╔══╝     ██║   ██╔══██║╚════██║██╔═██╗ ██║██║     ██║     ╚════██║
 ███████╗   ██║   ██║  ██║███████║██║  ██╗██║███████╗███████╗███████║
 ╚══════╝   ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚═╝╚══════╝╚══════╝╚══════╝
</div>

<p class="tagline">The missing knowledge between AI agents and production Ethereum.<span class="cursor"></span></p>

<p class="clarifier">Your AI agent is wrong about building on Ethereum. ETHSKILLS fixes that, so anyone can ship onchain, expert or not. Works in Claude, ChatGPT, Cursor, or any agent.</p>

<div class="command-line">
  <span class="command-label">Prompt</span>
  <code>Read https://ethskills.com/SKILL.md and follow it before writing Solidity or shipping anything onchain.</code>
  <button class="copy-btn" data-url="Read https://ethskills.com/SKILL.md and follow it before writing Solidity or shipping anything onchain."><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> Copy prompt</button>
</div>

<p class="section-text">Per session. To install it once in Claude Code, Cursor, or Codex, see <a href="#persistent-setup">Persistent Setup</a> below.</p>

<h2>Skills</h2>

<div class="skill">
  <div class="skill-name">Ship</div>
  <div class="skill-desc">End-to-end guide for AI agents — from a dApp idea to deployed production app. Fetch this FIRST, it routes you through all other skills.</div>
  <button class="copy-btn" data-url="https://ethskills.com/ship/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/ship/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Why Ethereum</div>
  <div class="skill-desc">Why build on Ethereum specifically — Pectra/Fusaka upgrades, honest tradeoffs, the AI agent angle, countering stale FUD, matching use cases to strengths.</div>
  <button class="copy-btn" data-url="https://ethskills.com/why/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/why/SKILL.md</button>
</div>
<div class="skill">
  <div class="skill-name">Protocol</div>
  <div class="skill-desc">How Ethereum evolves — EIP lifecycle, fork process, where decisions happen, and how to verify what's actually planned. Use when asked about upcoming features, Verkle trees, roadmap items, or any protocol-level changes. Prevents confidently wrong answers based on stale training data.</div>
  <button class="copy-btn" data-url="https://ethskills.com/protocol/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/protocol/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Gas &amp; Costs</div>
  <div class="skill-desc">Current gas prices, what things actually cost on Ethereum today, mainnet vs L2 honest comparison. Counters the #1 misconception that Ethereum is expensive.</div>
  <button class="copy-btn" data-url="https://ethskills.com/gas/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/gas/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Wallets</div>
  <div class="skill-desc">Creating wallets, connecting to dApps, signing transactions, multisig (Gnosis Safe), account abstraction. How an AI agent gets a wallet and uses it safely.</div>
  <button class="copy-btn" data-url="https://ethskills.com/wallets/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/wallets/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Layer 2s</div>
  <div class="skill-desc">Current L2 landscape, bridging, deployment differences, when to use which L2. Arbitrum, Optimism, Base, zkSync, and more.</div>
  <button class="copy-btn" data-url="https://ethskills.com/l2s/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/l2s/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Standards</div>
  <div class="skill-desc">ERC-20, ERC-721, ERC-1155, ERC-8004 (agent identity), EIP-7702 (smart EOAs), and newer ERCs. Token standards, identity standards, payment standards.</div>
  <button class="copy-btn" data-url="https://ethskills.com/standards/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/standards/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Tools</div>
  <div class="skill-desc">Current frameworks, libraries, RPCs, block explorers. x402 (HTTP payments), MCPs, abi.ninja, Foundry, Scaffold-ETH 2. What actually works today.</div>
  <button class="copy-btn" data-url="https://ethskills.com/tools/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/tools/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Money Legos</div>
  <div class="skill-desc">DeFi legos and protocol composability. Uniswap, Aave, Compound, MakerDAO, Yearn, Curve — what they do, how to build on them, how to combine them.</div>
  <button class="copy-btn" data-url="https://ethskills.com/building-blocks/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/building-blocks/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Orchestration</div>
  <div class="skill-desc">The three-phase build system and dApp orchestration patterns. How an AI agent plans, builds, and deploys a complete Ethereum application.</div>
  <button class="copy-btn" data-url="https://ethskills.com/orchestration/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/orchestration/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Contract Addresses</div>
  <div class="skill-desc">Verified contract addresses for major protocols across Ethereum mainnet and L2s. Stop hallucinating addresses — use real ones.</div>
  <button class="copy-btn" data-url="https://ethskills.com/addresses/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/addresses/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Concepts</div>
  <div class="skill-desc">The essential mental models for building onchain. "Nothing is automatic" — every function needs a caller and an incentive. Randomness pitfalls, incentive design, the hyperstructure test, and how to teach your human.</div>
  <button class="copy-btn" data-url="https://ethskills.com/concepts/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/concepts/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Security</div>
  <div class="skill-desc">Solidity security patterns and common vulnerabilities with defensive code. Token decimals, reentrancy, oracle manipulation, vault inflation attacks, and a pre-deploy checklist. Run through this before every deployment.</div>
  <button class="copy-btn" data-url="https://ethskills.com/security/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/security/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Noir (ZK Privacy)</div>
  <div class="skill-desc">Building privacy apps with Noir zero-knowledge circuits — toolchain, commitment-nullifier pattern, Solidity verifiers, NoirJS frontend integration. Use when building anything with zero-knowledge proofs on Ethereum.</div>
  <button class="copy-btn" data-url="https://ethskills.com/noir/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/noir/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Testing</div>
  <div class="skill-desc">Smart contract testing with Foundry — unit tests, fuzz testing, fork testing, invariant testing. What to test, what not to test, and what LLMs get wrong.</div>
  <button class="copy-btn" data-url="https://ethskills.com/testing/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/testing/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Indexing</div>
  <div class="skill-desc">How to read and query onchain data — events, The Graph, Dune, indexing patterns. Why you cannot just loop through blocks, and what to use instead.</div>
  <button class="copy-btn" data-url="https://ethskills.com/indexing/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/indexing/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Frontend UX</div>
  <div class="skill-desc">Mandatory frontend rules for Scaffold-ETH 2 projects. Onchain button loaders, three-button approval flow, Address components, USD values, RPC config, and pre-publish checklist. Prevents the UX mistakes AI agents make on every build.</div>
  <button class="copy-btn" data-url="https://ethskills.com/frontend-ux/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/frontend-ux/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Frontend Playbook</div>
  <div class="skill-desc">The complete build-to-production pipeline. Fork mode, IPFS deployment, Vercel monorepo config, ENS subdomain setup, and the full go-to-production checklist with verification steps.</div>
  <button class="copy-btn" data-url="https://ethskills.com/frontend-playbook/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/frontend-playbook/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">QA</div>
  <div class="skill-desc">Production QA checklist for dApps. Give this to a SEPARATE reviewer agent after the build — it audits the app against every common mistake AI agents make before shipping. Covers approve button double-fire, wallet flow, SE2 branding cleanup, USD values, and more.</div>
  <button class="copy-btn" data-url="https://ethskills.com/qa/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/qa/SKILL.md</button>
</div>

<div class="skill">
  <div class="skill-name">Audit</div>
  <div class="skill-desc">Deep EVM smart contract audit system. 500+ non-obvious checklist items across 19 domains — AMM, lending, oracles, proxies, signatures, governance, bridges, and more. Runs parallel specialist agents, synthesizes findings, and files GitHub issues. Use when auditing contracts you didn't write.</div>
  <button class="copy-btn" data-url="https://ethskills.com/audit/SKILL.md"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> ethskills.com/audit/SKILL.md</button>
</div>


<h2 id="persistent-setup">Persistent Setup</h2>
<p class="section-text">Optional. If you'd rather not paste the prompt above every session, configure your tool once below.</p>

<div class="setup-list">
  <div class="setup-row">
    <span class="setup-tool">Codex</span>
    <div class="setup-artifact">
      <span class="setup-howto">1. Create this file in your repo root</span>
      <code>AGENTS.md</code>
      <span class="setup-howto">2. Paste this inside the file</span>
      <code class="is-content">Read https://ethskills.com/SKILL.md and follow it before writing Solidity or shipping anything onchain.</code>
    </div>
    <span class="setup-note">Pointer (per repo). Codex fetches ethskills on each task.</span>
  </div>
  <div class="setup-row">
    <span class="setup-tool">Cursor</span>
    <div class="setup-artifact">
      <span class="setup-howto">1. Create this Cursor rule file</span>
      <code>.cursor/rules/ethskills.mdc</code>
      <span class="setup-howto">2. Paste this inside the file</span>
      <code class="is-content">---
description: ethskills knowledge pack for building on Ethereum
alwaysApply: true
---

Before writing Solidity, deploying contracts, integrating DeFi, or building a dApp frontend, read https://ethskills.com/SKILL.md and follow it.</code>
    </div>
    <span class="setup-note">Pointer (per repo). Cursor fetches when the rule fires.</span>
  </div>
  <div class="setup-row">
    <span class="setup-tool">Claude Code</span>
    <div class="setup-artifact">
      <span class="setup-howto">1. Add the marketplace catalog</span>
      <code>/plugin marketplace add austintgriffith/ethskills</code>
      <span class="setup-howto">2. Install ethskills (active in every project)</span>
      <code>/plugin install ethskills@ethskills</code>
    </div>
    <span class="setup-note">Install (user-wide). Plugin reads from disk, granular skill loading.</span>
  </div>
  <div class="setup-row">
    <span class="setup-tool">OpenClaw</span>
    <div class="setup-artifact">
      <span class="setup-howto">Run in your terminal</span>
      <code>clawhub install ethskills</code>
    </div>
    <span class="setup-note">Install (per project). Cloned into ./skills/.</span>
  </div>
  <div class="setup-row">
    <span class="setup-tool">Scripts</span>
    <div class="setup-artifact">
      <span class="setup-howto">Run in your shell</span>
      <code>curl -s https://ethskills.com/SKILL.md</code>
    </div>
    <span class="setup-note">Fetch + bake (per script). Embed in pipelines or system prompts.</span>
  </div>
</div>

<h2>Contributing</h2>
<p class="section-text">Something wrong or missing? Humans and agents alike are welcome to <a href="https://github.com/austintgriffith/ethskills">open a PR</a>.</p>

<h2>Feedback</h2>
<p class="section-text">If something in ethskills confused you, slowed you down, or genuinely helped — issues OR praise — fetch <a href="https://ethskills.com/feedback/SKILL.md">feedback/SKILL.md</a> and send a note. Bias toward sending; weak signals are easy to ignore in the inbox, but missing signals can't be recovered.</p>

<div class="footer">MIT License · <a href="https://github.com/austintgriffith/ethskills">GitHub Repo</a> · <a href="https://github.com/austintgriffith/ethskills-research">Research</a></div>

<div id="modal" class="modal-backdrop" aria-hidden="true">
  <div class="modal-box" role="dialog" aria-modal="true">
    <div class="modal-header">
      <span class="modal-title" id="modal-title">Skill</span>
      <div class="modal-header-actions">
        <button type="button" class="copy-btn" id="modal-copy-btn" data-url="" title="Copy skill URL"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> <span id="modal-copy-label"></span></button>
        <a class="copy-btn" id="modal-edit-btn" href="#" target="_blank" rel="noopener" title="Edit on GitHub">Edit</a>
        <button type="button" class="modal-close" id="modal-close" aria-label="Close">&times;</button>
      </div>
    </div>
    <div class="modal-body" id="modal-body"></div>
  </div>
</div>

<script>
// Minimal markdown → HTML (no external deps). Escapes HTML in text.
function renderMarkdown(md) {
  const esc = s => s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  const inline = s => esc(s)
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.+?)\*/g, '<em>$1</em>')
    .replace(/`([^`]+)`/g, '<code>$1</code>')
    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
  let raw = md.replace(/\r\n?/g, '\n');
  if (raw.startsWith('---\n')) {
    const end = raw.indexOf('\n---', 4);
    if (end !== -1) raw = raw.slice(end + 4).replace(/^\n+/, '');
  }
  let out = '';
  const lines = raw.split('\n');
  let i = 0;
  while (i < lines.length) {
    const line = lines[i];
    if (/^```(\w*)\s*$/.test(line)) {
      let block = '';
      for (i++; i < lines.length && !/^```\s*$/.test(lines[i]); i++) block += esc(lines[i]) + '\n';
      i++;
      out += '<pre><code>' + block + '</code></pre>';
      continue;
    }
    if (/^(#{1,3})\s+(.+)$/.test(line)) {
      const l = RegExp.$1.length;
      out += '<h' + l + '>' + inline(RegExp.$2) + '</h' + l + '>';
      i++;
      continue;
    }
    if (/^\|.+\|$/.test(line)) {
      const rows = [];
      while (i < lines.length && /^\|.+\|$/.test(lines[i])) {
        if (!/^\|[-:\s|]+\|$/.test(lines[i])) {
          rows.push(lines[i].split('|').slice(1, -1).map(c => c.trim()));
        }
        i++;
      }
      if (rows.length) {
        out += '<table><thead><tr>';
        rows[0].forEach(c => { out += '<th>' + inline(c) + '</th>'; });
        out += '</tr></thead><tbody>';
        for (let r = 1; r < rows.length; r++) {
          out += '<tr>';
          rows[r].forEach(c => { out += '<td>' + inline(c) + '</td>'; });
          out += '</tr>';
        }
        out += '</tbody></table>';
      }
      continue;
    }
    if (/^>\s?(.*)$/.test(line)) {
      let block = inline(RegExp.$1);
      for (i++; i < lines.length && /^>\s?(.*)$/.test(lines[i]); i++) block += '\n' + inline(RegExp.$1);
      out += '<blockquote>' + block.replace(/\n/g, '<br>') + '</blockquote>';
      continue;
    }
    if (/^[-*]\s+(.+)$/.test(line)) {
      out += '<ul>';
      while (i < lines.length && /^[-*]\s+(.+)$/.test(lines[i])) {
        out += '<li>' + inline(RegExp.$1) + '</li>';
        i++;
      }
      out += '</ul>';
      continue;
    }
    if (/^\d+\.\s+(.+)$/.test(line)) {
      out += '<ol>';
      while (i < lines.length && /^\d+\.\s+(.+)$/.test(lines[i])) {
        out += '<li>' + inline(RegExp.$1) + '</li>';
        i++;
      }
      out += '</ol>';
      continue;
    }
    if (line.trim() === '') {
      i++;
      continue;
    }
    out += '<p>' + inline(line) + '</p>';
    i++;
  }
  return out;
}

// Copy URL on copy button click (stop propagation so card click doesn't fire)
document.querySelectorAll('.copy-btn[data-url]').forEach(btn => {
  btn.addEventListener('click', async (e) => {
    e.stopPropagation();
    const url = btn.dataset.url;
    try { await navigator.clipboard.writeText(url); } catch(err) {
      const t = document.createElement('textarea'); t.value = url; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t);
    }
    const orig = btn.innerHTML;
    btn.classList.add('copied');
    btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Copied!';
    setTimeout(() => { btn.innerHTML = orig; btn.classList.remove('copied'); }, 1500);
  });
});

// Hero button now uses copy-btn class — handled by the querySelectorAll above.

// Modal: open on card click, fetch skill and render markdown
const modal = document.getElementById('modal');
const modalTitle = document.getElementById('modal-title');
const modalBody = document.getElementById('modal-body');
const modalClose = document.getElementById('modal-close');
const modalCopyBtn = document.getElementById('modal-copy-btn');
const modalCopyLabel = document.getElementById('modal-copy-label');

const GITHUB_BASE = 'https://github.com/austintgriffith/ethskills/blob/master/';

function openModal(title, path, skillUrl) {
  modal.classList.add('open');
  modal.setAttribute('aria-hidden', 'false');
  modalTitle.textContent = title;
  modalCopyBtn.dataset.url = skillUrl;
  modalCopyLabel.textContent = skillUrl.replace(/^https?:\/\/[^/]+\//, '');
  document.getElementById('modal-edit-btn').href = GITHUB_BASE + path;
  modalBody.innerHTML = '<p class="modal-loading">Loading…</p>';
  modalBody.classList.remove('modal-error');

  fetch(path)
    .then(r => { if (!r.ok) throw new Error(r.statusText); return r.text(); })
    .then(text => { modalBody.innerHTML = renderMarkdown(text); })
    .catch(err => {
      modalBody.classList.add('modal-error');
      modalBody.innerHTML = '<p>Could not load skill: ' + ('' + err.message).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') + '.</p>';
    });
}

function closeModal() {
  modal.classList.remove('open');
  modal.setAttribute('aria-hidden', 'true');
}

document.querySelectorAll('.skill').forEach(card => {
  const copyBtn = card.querySelector('.copy-btn[data-url]');
  const title = card.querySelector('.skill-name');
  if (!copyBtn || !title) return;
  card.addEventListener('click', (e) => {
    if (e.target.closest('.copy-btn')) return;
    const skillUrl = copyBtn.dataset.url;
    const path = new URL(skillUrl).pathname.slice(1);
    openModal(title.textContent, path, skillUrl);
  });
});

modalCopyBtn.addEventListener('click', async (e) => {
  e.stopPropagation();
  const url = modalCopyBtn.dataset.url;
  if (!url) return;
  try { await navigator.clipboard.writeText(url); } catch(err) {
    const t = document.createElement('textarea'); t.value = url; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t);
  }
  const orig = modalCopyBtn.innerHTML;
  modalCopyBtn.classList.add('copied');
  modalCopyBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Copied!';
  setTimeout(() => { modalCopyBtn.innerHTML = orig; modalCopyBtn.classList.remove('copied'); }, 1500);
});

modalClose.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
</script>
</body>
</html>