Skip to content

Commit a6b8dcb

Browse files
craigbidenbot[bot]craigbidenbot[bot]
committed
feat: add frontend-design skill (from poncho) + x402-tip skill
frontend-design: Mason's styling guide — distinctive, production-grade UIs that avoid generic AI slop. Typography, motion, spatial composition. x402-tip: Complete playbook for non-custodial USDC tip claim pages. Burner wallet → fund via x402scan → claim via facilitator → gasless. Documents the full architecture we built tonight.
1 parent b96818b commit a6b8dcb

File tree

2 files changed

+227
-0
lines changed

2 files changed

+227
-0
lines changed

‎skills/frontend-design/SKILL.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
name: frontend-design
3+
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
4+
---
5+
6+
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
7+
8+
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
9+
10+
## Design Thinking
11+
12+
Before coding, understand the context and commit to a BOLD aesthetic direction:
13+
- **Purpose**: What problem does this interface solve? Who uses it?
14+
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
15+
- **Constraints**: Technical requirements (framework, performance, accessibility).
16+
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
17+
18+
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
19+
20+
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
21+
- Production-grade and functional
22+
- Visually striking and memorable
23+
- Cohesive with a clear aesthetic point-of-view
24+
- Meticulously refined in every detail
25+
26+
## Frontend Aesthetics Guidelines
27+
28+
Focus on:
29+
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
30+
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
31+
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
32+
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
33+
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
34+
35+
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
36+
37+
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
38+
39+
**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
40+
41+
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

‎skills/x402-tip/SKILL.md‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
---
2+
name: x402-tip
3+
description: Create non-custodial USDC tip claim pages using x402. Use when someone asks to tip a person, create a tip link, send money via a claim page, or build a tip jar. Generates a funded burner wallet, builds a claim page, and uploads it — all gasless via x402facilitator.dev.
4+
---
5+
6+
# x402 Tip Claim Page
7+
8+
Create a non-custodial USDC tip page: generate a burner wallet, fund it, build an HTML claim page, upload to agentupload.dev. The recipient claims gaslessly via x402facilitator.dev — no gas ETH needed, no backend, one static HTML file.
9+
10+
## Prerequisites
11+
12+
- `@x402/core`, `@x402/evm`, `viem`, `ethers` installed in `/tmp/node_modules`
13+
- A funded facilitator account on x402facilitator.dev (Craig's: `cddea943-c042-4546-9111-8900b4968319`)
14+
- Craig's x402 wallet (via mcporter) for funding the burner
15+
16+
## Architecture
17+
18+
The x402 protocol uses EIP-3009 `transferWithAuthorization` for gasless USDC transfers. A **facilitator** submits the signed authorization on-chain and pays gas via Coinbase CDP. The tip page embeds a burner private key and signs the transfer in the browser.
19+
20+
```
21+
[Burner Wallet] --signs transferWithAuthorization--> [Facilitator] --submits on-chain via CDP--> [Recipient gets USDC]
22+
```
23+
24+
The facilitator settle endpoint has CORS enabled (PR #8 on x402facilitator), so browsers can call it directly.
25+
26+
## Step-by-Step Flow
27+
28+
### 1. Generate a burner wallet
29+
30+
```javascript
31+
const { ethers } = require('ethers');
32+
const wallet = ethers.Wallet.createRandom();
33+
// Save: wallet.address and wallet.privateKey
34+
```
35+
36+
### 2. Fund the burner via x402scan
37+
38+
```bash
39+
NODE_OPTIONS="--max-old-space-size=128" mcporter call x402 fetch \
40+
url="https://www.x402scan.com/api/send?address=BURNER_ADDRESS&amount=AMOUNT&chain=base" \
41+
method=POST body='{}'
42+
```
43+
44+
This uses Craig's x402 wallet to pay x402scan, which transfers USDC to the burner.
45+
46+
### 3. Build the claim page
47+
48+
The HTML page must:
49+
50+
1. Import x402 libraries via esm.sh:
51+
```javascript
52+
import { x402Client, x402HTTPClient } from 'https://esm.sh/@x402/core@2.3.1/client';
53+
import { registerExactEvmScheme } from 'https://esm.sh/@x402/evm@2.3.1/exact/client';
54+
import { privateKeyToAccount } from 'https://esm.sh/viem@2.21.26/accounts';
55+
import { isAddress } from 'https://esm.sh/viem@2.21.26';
56+
```
57+
58+
2. Set up the x402 client with the burner PK as signer:
59+
```javascript
60+
const account = privateKeyToAccount(BURNER_PK);
61+
const client = new x402Client();
62+
registerExactEvmScheme(client, { signer: account });
63+
const httpClient = new x402HTTPClient(client);
64+
```
65+
66+
3. Claim flow (when user enters their address):
67+
```javascript
68+
// Step 1: Get 402 challenge from x402scan
69+
const res = await fetch(
70+
`https://www.x402scan.com/api/send?address=${recipientAddress}&amount=${amount}&chain=base`,
71+
{ method: 'POST' }
72+
);
73+
// res.status === 402
74+
75+
// Step 2: Parse and sign the x402 payment
76+
const paymentRequired = httpClient.getPaymentRequiredResponse(
77+
(name) => res.headers.get(name)
78+
);
79+
const paymentPayload = await httpClient.createPaymentPayload(paymentRequired);
80+
const requirements = paymentRequired.accepts[0]; // Select EVM/Base
81+
82+
// Step 3: Settle via facilitator (gasless!)
83+
const settleRes = await fetch(`${FACILITATOR_URL}/settle`, {
84+
method: 'POST',
85+
headers: { 'Content-Type': 'application/json' },
86+
body: JSON.stringify({
87+
x402Version: paymentPayload.x402Version,
88+
paymentPayload,
89+
paymentRequirements: requirements,
90+
}),
91+
});
92+
const data = await settleRes.json();
93+
// data.success === true, data.transaction === "0x..."
94+
```
95+
96+
4. Check if already claimed on page load:
97+
```javascript
98+
// Read USDC balance of burner via viem
99+
const bal = await publicClient.readContract({
100+
address: USDC_ADDRESS, // 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
101+
abi: [balanceOf ABI],
102+
functionName: 'balanceOf',
103+
args: [BURNER_ADDRESS],
104+
});
105+
if (bal === 0n) { /* show "already claimed" state */ }
106+
```
107+
108+
5. Offer two claim methods:
109+
- **Connect Wallet** (window.ethereum) — for users with browser wallets
110+
- **Paste address** — for anyone with a Base wallet address
111+
112+
### 4. Upload to agentupload.dev
113+
114+
```bash
115+
NODE_OPTIONS="--max-old-space-size=128" mcporter call x402 fetch \
116+
url="https://agentupload.dev/api/x402/upload" method=POST \
117+
body='{"filename":"tip.html","contentType":"text/html","tier":"10mb"}'
118+
# Returns uploadUrl and publicUrl
119+
curl -X PUT "$uploadUrl" -H "Content-Type: text/html" --data-binary @/tmp/tip.html
120+
```
121+
122+
### 5. Send the link to the recipient
123+
124+
Via x402email, Discord message, or any other channel.
125+
126+
## Key Constants
127+
128+
| Constant | Value |
129+
|----------|-------|
130+
| USDC on Base | `0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913` |
131+
| Base chain ID | `eip155:8453` |
132+
| x402scan send | `https://www.x402scan.com/api/send` |
133+
| Facilitator URL | `https://x402facilitator.dev/api/facilitator/v2/cddea943-c042-4546-9111-8900b4968319` |
134+
| Facilitator settle cost | $0.01 per claim |
135+
| x402scan send cost | equal to amount sent |
136+
137+
## Cost Breakdown Per Tip
138+
139+
| Item | Cost |
140+
|------|------|
141+
| Fund burner (x402scan send) | $TIP_AMOUNT (passed through) |
142+
| Facilitator settle | $0.01 |
143+
| agentupload hosting | $0.01 |
144+
| **Total overhead** | **$0.02 + tip amount** |
145+
146+
## Design Notes
147+
148+
- Follow the `frontend-design` skill for page styling — NO generic AI aesthetics
149+
- Each tip page should feel unique and contextual (music tips get music emoji, food tips get food, etc.)
150+
- Include confetti or celebration animation on successful claim
151+
- Always show a BaseScan link after claim so the recipient can verify on-chain
152+
- Include a "What is this?" explainer for non-crypto users pointing to Coinbase Wallet
153+
154+
## Testing
155+
156+
Test the flow from Node.js before deploying (simulates what the browser does):
157+
158+
```javascript
159+
// Same flow as above but in Node instead of browser
160+
// Verify: 402 challenge → sign → settle → success === true
161+
```
162+
163+
Always send a test claim to Craig's own wallet first (`0x6B173bf632a7Ee9151e94E10585BdecCd47bDAAf`) before giving the link to anyone.
164+
165+
## Facilitator Management
166+
167+
Craig's facilitator account was created with a $2.50 deposit. Each settle costs $0.01, so that's 250 claims before needing a top-up. Check balance:
168+
169+
```bash
170+
# SIWX-authenticated — use the siwx_poll.cjs pattern
171+
# Or just count: facilitator started with $2.50, each settle is $0.01
172+
```
173+
174+
To deposit more:
175+
```bash
176+
NODE_OPTIONS="--max-old-space-size=128" mcporter call x402 fetch \
177+
url="https://x402facilitator.dev/api/deposit?amount=5" method=POST \
178+
body='{"walletAddress":"0x6B173bf632a7Ee9151e94E10585BdecCd47bDAAf","notificationEmail":"craig@craig.x402email.com"}'
179+
```
180+
181+
## What NOT to Do
182+
183+
- ❌ Don't try direct on-chain USDC transfer (burner has no ETH for gas)
184+
- ❌ Don't use x402scan /api/send from the browser (CORS blocked, and adding CORS there is a security risk)
185+
- ❌ Don't expose Craig's main wallet PK in any page — only burner PKs
186+
- ❌ Don't embed the facilitator API key in any non-tip context

0 commit comments

Comments
 (0)