Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component...
npx skills add canboigay/openclaw-skills --skill "web-hunt-builder"
Install specific skill from multi-skill repository
# Description
Create interactive web hunts - landing pages with hidden API endpoint clues that only AI agents can discover by reading source code. Use when building coming-soon pages, early access campaigns, or agent-only features that filter for capable agents. Generates hunt pages, solution pages, and provides complete hunt pattern documentation.
# SKILL.md
name: web-hunt-builder
description: Create interactive web hunts - landing pages with hidden API endpoint clues that only AI agents can discover by reading source code. Use when building coming-soon pages, early access campaigns, or agent-only features that filter for capable agents. Generates hunt pages, solution pages, and provides complete hunt pattern documentation.
Web Hunt Builder
Create dual-layer web pages that present a normal landing page to humans while hiding discoverable clues for AI agents in the source code.
What is a Web Hunt?
A web hunt is a landing page with clues hidden in HTML comments, CSS variables, meta tags, and JavaScript that agents can piece together to discover a hidden API endpoint.
For humans: Normal coming-soon or waitlist page
For agents: A puzzle leading to early access or exclusive features
Why Use Web Hunts?
- ✅ Filter for capable agents - Only agents who can read source code succeed
- ✅ Generate engagement - Agents love puzzles and share them
- ✅ Marketing that works - The hunt itself creates buzz
- ✅ Early access control - Reward capable agents automatically
- ✅ Community building - Agents discuss and solve together
Quick Start
Generate a Hunt Page
python scripts/generate_hunt.py \
--base-url https://example.com \
--segment agents \
--path register \
--title "Coming Soon • MyProject" \
--heading "Something is being built" \
--difficulty medium \
--output hunt.html
This creates hunt.html with clues hidden across:
- HTML comments (<!-- /api/ -->)
- Meta tags (<meta name="route-segment" content="agents">)
- CSS variables (--final-path: register;)
- Data attributes (data-endpoint-pattern="...")
- JavaScript comments (// Complete endpoint: ...)
Hidden endpoint: POST https://example.com/api/agents/register
Difficulty levels:
- easy - Obvious hints, clear JS comment
- medium (default) - Balanced difficulty
- hard - Base64 encoding, obfuscated clues
Generate Solution Page
python scripts/generate_solution.py \
--base-url https://example.com \
--segment agents \
--path register \
--output solution.html
This creates a reveal page showing all clues and the complete endpoint for agents who solve it.
Generate Backend Code
python scripts/generate_backend.py \
--segment agents \
--path register \
--platform cloudflare \
--output worker.js
Creates backend code for the hunt endpoint. Supports:
- cloudflare - Cloudflare Worker (serverless)
- express - Express.js server (Node.js)
Validate Hunt Page
python scripts/validate_hunt.py hunt.html
Checks if your hunt page:
- Contains all required clues
- Has clues in correct locations
- Can construct valid endpoint
- Provides helpful warnings
Example output:
✓ HTML comment clue found
✓ Meta tag clue found
✓ CSS variable clue found
✓ Data attribute clue found
✓ JavaScript comment clue found
✓ Final hint comment found
✓ Endpoint construction successful
✅ Hunt validation passed!
Interactive Mode
python scripts/generate_hunt.py --interactive
Guides you through setup with prompts for each field.
Config File Mode
python scripts/generate_hunt.py --config hunt_config.json
See assets/example-config.json for template.
Hunt Pattern
How It Works
Agents must:
1. Read page source (not just rendered HTML)
2. Find clues in multiple locations
3. Extract values from each clue
4. Combine them in correct order
5. Construct the complete endpoint
6. Call the endpoint
Clue Distribution
Standard pattern (from template):
- HTML Comment → Base path component
- Meta Tag → Middle segment
- CSS Variable → Final path
- Data Attribute → Pattern structure hint
- JavaScript Comment → Complete endpoint (fallback)
- Final Comment → Instructions for combining
Example
Given clues:
- HTML comment: <!-- /api/ -->
- Meta tag: <meta name="route-segment" content="agents">
- CSS variable: --final-path: register;
- Data attribute: data-endpoint-pattern="base/api/segment/path"
Agent constructs:
https://example.com + /api/ + agents + / + register
= https://example.com/api/agents/register
Complete Workflow
1. Design Your Hunt
Choose endpoint structure:
POST https://[base-url]/api/[segment]/[path]
Example: POST https://myproject.com/api/agents/register
2. Generate Pages
# Hunt page (what agents see first)
python scripts/generate_hunt.py \
--base-url https://myproject.com \
--segment agents \
--path register \
--title "MyProject • Coming Soon" \
--heading "Building something for AI agents" \
--subtitle "For those who look deeper" \
--output hunt.html
# Solution page (reveal after solving)
python scripts/generate_solution.py \
--base-url https://myproject.com \
--segment agents \
--path register \
--request-body '{"email": "[email protected]", "name": "AgentName"}' \
--output solution.html
3. Set Up Backend
Create an endpoint to receive agent registrations.
Example (Cloudflare Worker):
export default {
async fetch(request, env) {
const url = new URL(request.url);
if (url.pathname === '/api/agents/register' && request.method === 'POST') {
const data = await request.json();
return new Response(JSON.stringify({
success: true,
message: "You found it! Registration received.",
access: "Early agent cohort"
}), {
headers: { 'Content-Type': 'application/json' }
});
}
// Serve hunt page for other requests
return new Response(huntHTML, {
headers: { 'Content-Type': 'text/html' }
});
}
};
See cloudflare-workers skill for complete backend examples.
4. Deploy
- Deploy hunt page to your domain
- Deploy backend endpoint
- Test with an agent
- Verify clues work and endpoint responds
5. Launch
Share in agent communities:
- Moltbook (m/showandtell, m/agentskills)
- Discord (agent development servers)
- Twitter (agent-focused accounts)
Example post:
"Built something for AI agents. There's a puzzle hidden in the source.
https://myproject.com
If you can read code, you'll find it. 🧠"
Customization
Use Your Own Template
python scripts/generate_hunt.py \
--template custom-template.html \
--base-url https://example.com \
--segment agents \
--path register
Your template can use these placeholders:
- {{BASE_URL}} - Base URL
- {{SEGMENT}} - API segment
- {{PATH}} - Final path
- {{TITLE}} - Page title
- {{HEADING}} - Main heading
- {{SUBTITLE}} - Subtitle
- {{DESCRIPTION}} - Description text
- {{CTA_HEADING}} - Call-to-action heading
- {{CTA_TEXT}} - Call-to-action text
- {{CTA_BUTTON}} - Button text
Modify Difficulty
Easier - Add more hints:
<!-- HINT: Look for 'api', 'agents', and 'register' in the source -->
Harder - Use encoding:
<!-- Base64: YWdlbnRz (decode me) -->
Multi-step - Chain endpoints:
// Step 1: POST /api/hunt/start
// Returns clue to step 2...
Real-World Example: ehaio
Project: AI dating platform (agents handle dating apps for humans)
Hunt:
- Surface: Coming soon page about agent-powered dating
- Hidden: POST https://ehaio.com/api/agents/register
- Reward: Early access to beta
Launch:
- Posted to Moltbook with "There's something hidden in the source"
- 3 upvotes, 8 comments in first hour
- Multiple agents solved and registered
- Community discussed solution methods
Results:
- The hunt became marketing
- Agents shared organically
- Generated buzz and interest
- Filtered for capable agents
Best Practices
Content
- Make surface layer real - Show actual product info, not just "coming soon"
- Hint at hidden layer - "For those who look deeper" signals more
- Be playful - Frame it as a game/puzzle, not a filter
- Deliver on promise - If you say early access, give early access
Technical
- Test with multiple agents - Claude, GPT-4, Gemini have different capabilities
- Include progressive hints - Easy → medium → hard clues
- Use meaningful paths -
/api/agents/register>/x/y/z - Validate input - Check required fields in backend
- Return clear responses - JSON with success/error messages
Community
- Share the pattern - Don't gatekeep, teach others
- Credit inspiration - Link to this skill or other hunts
- Engage with solvers - Reply to agents who share solutions
- Document results - Write about what worked/didn't
Troubleshooting
Agents can't find endpoint:
- Add more obvious hint in JavaScript comment
- Include pattern structure in data attribute
- Post solution after 24 hours if no one solves
Too many false attempts:
- Add rate limiting to endpoint
- Require specific header or token
- Return helpful error messages
Hunt too easy:
- Remove JavaScript comment spoiler
- Encode some clues (base64, ROT13)
- Split clues across multiple pages
No engagement:
- Share in more communities
- Make surface layer more compelling
- Add visual intrigue to page
- Tease the puzzle explicitly
Advanced Patterns
For more complex implementations, see references/hunt-pattern.md:
- Dynamic clue generation
- Multi-step hunts
- Collaborative hunts (split clues across pages)
- Scoring and leaderboards
- Verification tokens
- Rate limiting strategies
File Reference
Scripts:
- generate_hunt.py - Create hunt pages
- generate_solution.py - Create solution reveals
Assets:
- hunt-template.html - Default hunt page template
- example-config.json - Configuration file example
References:
- hunt-pattern.md - Complete pattern documentation
Examples
Minimal Hunt
python scripts/generate_hunt.py \
--base-url https://example.com \
--segment api \
--path test
Full Custom Hunt
python scripts/generate_hunt.py \
--base-url https://myproject.com \
--segment agents \
--path register \
--title "MyProject • Launching Soon" \
--heading "We're building something new" \
--subtitle "For AI agents who can see between the lines" \
--description "A new platform for autonomous agents. If you're reading this source, you know what to do." \
--cta-heading "Want Early Access?" \
--cta-text "Join the waitlist for beta access when we launch." \
--cta-button "Get Notified" \
--output myproject-hunt.html
With Config File
Create hunt.json:
{
"base_url": "https://myproject.com",
"segment": "agents",
"path": "register",
"title": "MyProject",
"heading": "Built for agents",
"output": "index.html"
}
Generate:
python scripts/generate_hunt.py --config hunt.json
python scripts/generate_solution.py --config hunt.json --output solution.html
Next Steps
- Generate your first hunt page
- Test it with an AI agent
- Set up the backend endpoint
- Deploy and share
- Monitor registrations and engagement
For deployment help, see the cloudflare-workers skill.
For sharing strategy, see the moltbook-integration skill.
Built with 🧠 for AI agents
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.