Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
starchild-ai-agent avatar

Surprise Templates

starchild-ai-agent/official-skills

  • 9 installs
  • 21 repo stars
  • Updated August 3, 2026
  • starchild-ai-agent/official-skills

Helps with ai & agent building tasks during AI-assisted development.

About

surprise-templates is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.

  • surprise-templates
  • AI & Agent Building
  • AI-coding skill

Surprise Templates by the numbers

  • 9 all-time installs (skills.sh)
  • Ranked #12,152 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/starchild-ai-agent/official-skills --skill surprise-templates

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs9
repo stars★ 21
Last updatedAugust 3, 2026
Repositorystarchild-ai-agent/official-skills ↗

What it does

Helps with ai & agent building tasks during AI-assisted development.

Files

SKILL.mdMarkdownGitHub ↗

Surprise Me — Template System

This skill provides 119 pre-built templates and 20 color themes.
The agent MUST use an existing template. Never write HTML/CSS/JS from scratch.

---

1. Template Selection Flow

Step 1 — Collect User Signals

From the user research phase you will have signals such as:

  • Connected data sources: wallet, twitter, github, email
  • Interests: defi, nft, trading, developer, productivity, etc.
  • Mentioned tokens, tools, or topics
  • User's display language (zh-CN, en, ja, ko, etc.)
  • User's avatar URL or brand color (if available)
  • Previously delivered template IDs (from conversation history or user profile)

Step 2 — Match & Randomly Select Template

Compare user signals against each template's matchSignals array (see §4 Template Catalog).

Step 2a — Build candidate list: 1. Score every template by counting how many of the user's signals appear in its matchSignals. 2. Keep all templates with score ≥ 2 (or ≥ 1 if fewer than 3 templates reach 2). 3. Remove any template the user has already received (see §1.1 Anti-Repeat).

Step 2b — Randomly select from candidates:

  • Do NOT pick the first match or the highest-scored match deterministically.
  • From the candidate list, randomly select one template. Use a mental coin-flip, current-second parity, or any non-deterministic method available to you.
  • If multiple templates share the same top score, they are equally valid — pick one at random.
  • The goal is: two users with identical signals should usually get different templates.

Step 2c — Data source preference (tie-breaking only):

  • If you must narrow candidates further: wallet → prefer Category A/E; twitter → prefer Category C/E; github → prefer Category B/E.
  • This is a soft preference, not a hard filter. Randomness takes priority over category preference.

Step 2d — No-signal fallback (no wallet, no GitHub, no Twitter):

  • When the user has NO connected data sources and NO specific interest signals:

1. Use the full Category D list (28 standalone tools) as the candidate pool. 2. Randomly select one from Category D. Do not default to the same template. 3. Additionally consider universally appealing templates: morning-briefing, pomodoro, kanban, quick-notes, fear-greed, market-overview, crypto-quiz. 4. If the user has mentioned any topic at all (even casually), use it to filter Category D by matchSignals before random selection.

Step 3 — Copy Template to Output

cp -r skills/surprise-templates/templates/{template-id}/ output/surprise-me/

Step 4 — Randomly Select Theme & Apply

Step 4a — Theme randomization: 1. Consult the Theme Selection Guidelines (§5) to identify 3–5 themes that fit the template's category. 2. Randomly pick one from those fitting themes. Do NOT always use the first suggested theme. 3. If no category guideline applies, randomly pick from all 20 themes. 4. Vary between dark/light themes across sessions for the same user.

Step 4b — Apply theme + placeholders: 1. In output/surprise-me/style.css, replace CSS variable values with the chosen theme's colors 2. In output/surprise-me/index.html, replace {{PLACEHOLDER}} tokens with personalized content (see §3 Placeholder Rules) 3. Add Google Fonts <link> for the theme's fonts.heading, fonts.body, and fonts.mono 4. Update chartColors in script.js if the template uses Chart.js

Step 5 — Personalize Beyond Placeholders

After basic placeholder replacement, apply these additional personalizations:

1. Creative APP_TITLE — Don't just use the template's default name. Craft a title that reflects the user's identity. Examples:

  • "DeFi Yield Optimizer" → "Alex 的 DeFi 收益雷达" or "Alex's Alpha Farm"
  • "Tech Radar" → "Alex 的技术风向标" or "Alex's Stack Compass"
  • Incorporate the user's name, interests, or style into the title.

2. Realistic mock data — Templates contain placeholder data (chart values, table rows, etc.). Adjust these to feel authentic:

  • If user tracks ETH/SOL, use realistic price ranges for those tokens (not $999 or $123).
  • If user is a developer, populate code snippets with languages from their tech stack.
  • Match numerical ranges to real-world values (gas fees in gwei, APY in reasonable %, etc.).

3. Language localization — Translate ALL visible UI text (headings, labels, buttons, tooltips, empty states) to the user's display language. This includes:

  • Navigation items, card titles, chart labels, footer text
  • Placeholder text in search bars and inputs
  • Error messages and empty state descriptions

4. Avatar & brand color injection (if available):

  • If user has an avatar URL, inject it as a profile image in the header/sidebar.
  • If user has a brand color, use it as --accent-1 override on top of the selected theme.

Step 6 — Preview Serve

cd output/surprise-me && python3 -m http.server 8080

Open http://localhost:8080 to verify, then deliver to user.

---

1.1 Anti-Repeat Mechanism

To prevent the same user from seeing the same template on repeated "Surprise Me" requests:

1. Check history — Before selecting, review the conversation history for any previously delivered template IDs. Also check if the user profile stores a surprise_history array. 2. Exclude seen templates — Remove all previously delivered template IDs from the candidate list. 3. Cycle through categories — If the user has exhausted all templates in their best-matching category, move to the next category (e.g., A → E → D). 4. Theme rotation — Even if forced to reuse a template (all candidates exhausted), apply a different theme than last time. 5. Full reset — If all 119 templates have been shown (unlikely), reset the history and start fresh.

---

2. Prohibited Actions

RuleDetail
No from-scratch HTML/CSS/JSYou MUST use an existing template. Do not create new pages from zero.
No placeholder guessingOnly replace placeholders defined in the template's manifest.json.
No theme color hardcodingAll colors must come from the selected theme JSON file.
No API-key endpointsTemplates only call public, CORS-enabled, key-free APIs.
No emoji iconsTemplates use Lucide inline SVGs, never emoji for structural UI elements.

---

3. Placeholder Replacement Rules

Each template's manifest.json lists its placeholders object. Common placeholders:

PlaceholderSourceExample Value
{{APP_TITLE}}Template name or personalized title"Alex's Trading Dashboard"
{{USER_NAME}}User's display name"Alex"
{{WALLET_ADDRESS}}User's connected wallet"0x1234...abcd"
{{TWITTER_HANDLE}}User's Twitter username"@alexcrypto"
{{GITHUB_USERNAME}}User's GitHub username"alexdev"
{{TRACKED_TOKENS}}User's tokens of interest (JSON array)["ETH","SOL","ARB"]
{{HERO_IMAGE_URL}}AI-generated hero image URL or local path"./hero-bg.png"
{{INTERESTS}}User's interest keywords"DeFi, NFT, Layer2"
{{CITY}}User's city for weather/time"Tokyo"
{{TECH_STACK}}User's tech stack"React, TypeScript, Solidity"
{{RESEARCH_AREAS}}User's research interests"LLM, Diffusion Models"
{{COMPETITORS}}Competitor accounts to track"@competitor1, @competitor2"

Rules:

  • Replace {{PLACEHOLDER}} literally in index.html (and script.js if referenced)
  • If a placeholder value is unavailable, use a sensible default (e.g., "Explorer" for USER_NAME)
  • TRACKED_TOKENS should be a JS array in script.js context, a comma-separated string in HTML context

---

4. Template Catalog (119 templates)

Templates are in skills/surprise-templates/templates/{id}/.

Each template directory contains: index.html, style.css, script.js, manifest.json, and optionally hero-bg.png.

Category A — Wallet & On-Chain Analytics (32 templates)

Require wallet signal. Dashboards for portfolio, trading, DeFi, NFT, and on-chain data.

IDNamematchSignalsPlaceholders
airdrop-checkerAirdrop Eligibility Checkerwallet, airdrop, eligibility, claimAPP_TITLE, USER_NAME, WALLET_ADDRESS, HERO_IMAGE_URL
competitor-analysisCompetitor Token Analysiswallet, competitor, analysis, comparison, tokenAPP_TITLE, USER_NAME, WALLET_ADDRESS, TRACKED_TOKENS, HERO_IMAGE_URL
correlation-matrixPortfolio Correlation Matrixwallet, portfolio, correlation, risk, diversificationAPP_TITLE, USER_NAME, TRACKED_TOKENS, HERO_IMAGE_URL
crosschain-advisorCross-Chain Migration Advisorwallet, bridge, crosschain, migration, advisorAPP_TITLE, USER_NAME, WALLET_ADDRESS, TRACKED_TOKENS, HERO_IMAGE_URL
crypto-eventsCrypto Events Calendarwallet, events, calendar, conference, upgradeAPP_TITLE, USER_NAME, WALLET_ADDRESS, TRACKED_TOKENS, HERO_IMAGE_URL
defi-yieldDeFi Yield Optimizerwallet, defi, yield, farming, stakingAPP_TITLE, USER_NAME, TRACKED_TOKENS, HERO_IMAGE_URL
dex-arbDEX vs CEX Arbitragewallet, dex, cex, arbitrage, price-spreadAPP_TITLE, USER_NAME, TRACKED_TOKENS, HERO_IMAGE_URL
ecosystem-dashboardEcosystem Dashboardwallet, ecosystem, chain, base, arbitrumAPP_TITLE, USER_NAME, WALLET_ADDRESS, TRACKED_TOKENS, HERO_IMAGE_URL
funding-rateFunding Rate Dashboardwallet, funding-rate, perpetual, futures, arbitrageAPP_TITLE, USER_NAME, TRACKED_TOKENS, HERO_IMAGE_URL
gas-trackerGas Fee Trackerwallet, gas, ethereum, transactionAPP_TITLE, USER_NAME, HERO_IMAGE_URL
impermanent-lossImpermanent Loss Calculatorwallet, defi, impermanent-loss, liquidity, calculatorAPP_TITLE, USER_NAME, TRACKED_TOKENS, HERO_IMAGE_URL
liquidation-heatmapLiquidation Heatmapwallet, liquidation, leverage, risk, futuresAPP_TITLE, USER_NAME, TRACKED_TOKENS, HERO_IMAGE_URL
market-cycleMarket Cycle Indicatorswallet, market-cycle, macro, indicator, phaseAPP_TITLE, USER_NAME, HERO_IMAGE_URL
meme-radarMeme Coin Radarwallet, meme, degen, trending, socialAPP_TITLE, USER_NAME, HERO_IMAGE_URL
nft-galleryNFT Collection Gallerywallet, nft, collection, gallery, artAPP_TITLE, USER_NAME, WALLET_ADDRESS, HERO_IMAGE_URL
nft-market-trendsNFT Market Trendswallet, nft, market, trends, analyticsAPP_TITLE, USER_NAME, HERO_IMAGE_URL
nft-rarityNFT Rarity Explorerwallet, nft, rarity, collection, traitsAPP_TITLE, USER_NAME, WALLET_ADDRESS, HERO_IMAGE_URL
onchain-timelineOn-Chain Activity Timelinewallet, onchain, history, timeline, activityAPP_TITLE, USER_NAME, WALLET_ADDRESS, HERO_IMAGE_URL
personalized-newsPersonalized Crypto News Feedwallet, news, personalized, crypto, feedAPP_TITLE, USER_NAME, WALLET_ADDRESS, TRACKED_TOKENS, HERO_IMAGE_URL
portfolio-radarPortfolio Risk Radarwallet, portfolio, investment, risk, allocation, diversificationAPP_TITLE, USER_NAME, TRACKED_TOKENS, HERO_IMAGE_URL
portfolio-timemachinePortfolio Time Machinewallet, portfolio, investment, historicalAPP_TITLE, USER_NAME, TRACKED_TOKENS, PORTFOLIO_VALUE, HERO_IMAGE_URL
protocol-riskProtocol Risk Exposure Mapwallet, defi, protocol, risk, exposureAPP_TITLE, USER_NAME, WALLET_ADDRESS, HERO_IMAGE_URL
regulation-trackerCrypto Regulation Trackerwallet, regulation, compliance, legal, newsAPP_TITLE, USER_NAME, WALLET_ADDRESS, TRACKED_TOKENS, HERO_IMAGE_URL
smart-moneySmart Money Trackerwallet, smart-money, whale, institutional, trackingAPP_TITLE, USER_NAME, TRACKED_TOKENS, WALLET_ADDRESS, HERO_IMAGE_URL
stablecoin-yieldStablecoin Yield Comparisonwallet, stablecoin, yield, apy, comparisonAPP_TITLE, USER_NAME, WALLET_ADDRESS, TRACKED_TOKENS, HERO_IMAGE_URL
token-momentumToken Momentum Scannerwallet, momentum, rsi, macd, technical-analysisAPP_TITLE, USER_NAME, TRACKED_TOKENS, HERO_IMAGE_URL
token-sentimentToken Sentiment Indicatorswallet, sentiment, fear-greed, token, moodAPP_TITLE, USER_NAME, WALLET_ADDRESS, TRACKED_TOKENS, HERO_IMAGE_URL
token-unlockToken Unlock Calendarwallet, token, unlock, vesting, calendarAPP_TITLE, USER_NAME, TRACKED_TOKENS, HERO_IMAGE_URL
trading-intelTrading Intelligence Dashboardwallet, defi, trading, crypto, tokenAPP_TITLE, USER_NAME, WALLET_ADDRESS, TRACKED_TOKENS, HERO_IMAGE_URL
whale-alertWhale Alert Monitorwallet, whale, alert, large-transfer, monitoringAPP_TITLE, USER_NAME, TRACKED_TOKENS, HERO_IMAGE_URL
whale-comparisonWhale Comparison Dashboardwallet, whale, defi, portfolioAPP_TITLE, USER_NAME, WALLET_ADDRESS, HERO_IMAGE_URL

Category B — Developer & GitHub Tools (23 templates)

Require github signal. Tools for developers, code references, and tech exploration.

IDNamematchSignalsPlaceholders
api-playgroundAPI Playgroundgithub, api, testing, playground, httpAPP_TITLE, BASE_URL, DEFAULT_HEADERS
blockchain-toolkitBlockchain Dev Toolkitgithub, blockchain, tools, development, referenceAPP_TITLE, PREFERRED_CHAIN, DEV_LEVEL
code-snippetsCode Snippet Librarygithub, code, snippets, patterns, referenceAPP_TITLE, USER_NAME, HERO_IMAGE_URL
color-schemeColor Scheme Generatorgithub, design, color, palette, cssAPP_TITLE, USER_NAME, HERO_IMAGE_URL
css-playgroundCSS Animation Playgroundgithub, css, animation, frontend, playgroundAPP_TITLE, USER_NAME, HERO_IMAGE_URL
dapp-ideasDApp Idea Generatorgithub, dapp, ideas, web3, creativeAPP_TITLE, PREFERRED_CHAIN, INTEREST_AREA
dependency-monitorDependency Update Monitorgithub, dependencies, security, updates, npmAPP_TITLE, USER_NAME, GITHUB_USERNAME, HERO_IMAGE_URL
framework-migrationFramework Migration Guidegithub, framework, migration, upgrade, guideAPP_TITLE, SOURCE_FRAMEWORK, TARGET_FRAMEWORK, PROJECT_NAME
gas-optimizationGas Optimization Cheatsheetgithub, solidity, gas, optimization, referenceAPP_TITLE, SOLIDITY_VERSION, TARGET_CHAIN
github-starsGitHub Stars Explorergithub, stars, repositories, analysis, interestsAPP_TITLE, USER_NAME, GITHUB_USERNAME, HERO_IMAGE_URL
hackathon-matcherHackathon Matchergithub, hackathon, competition, team, eventsAPP_TITLE, USER_NAME, TECH_STACK, HERO_IMAGE_URL
indie-devIndie Developer Dashboardgithub, indie, startup, saas, solo-developerAPP_TITLE, USER_NAME, TECH_STACK, HERO_IMAGE_URL
interview-prepTechnical Interview Prepgithub, interview, preparation, coding, algorithmsAPP_TITLE, USER_NAME, TECH_STACK, HERO_IMAGE_URL
learning-pathLearning Path Generatorgithub, learning, path, skills, educationAPP_TITLE, TECH_STACK, USER_LEVEL
opensource-finderOpen Source Opportunity Findergithub, opensource, contribution, good-first-issue, communityAPP_TITLE, USER_NAME, GITHUB_USERNAME, TECH_STACK, HERO_IMAGE_URL
opensource-monetizeOpen Source Monetization Guidegithub, opensource, monetization, revenue, businessAPP_TITLE, PROJECT_NAME, GITHUB_STARS
producthunt-trackerProduct Hunt Trackergithub, producthunt, launches, products, trendingAPP_TITLE, FOCUS_CATEGORIES, USER_NAME
regex-testerRegex Pattern Testergithub, regex, pattern, testing, developerAPP_TITLE, USER_NAME, HERO_IMAGE_URL
side-project-ideasSide Project Idea Generatorgithub, ideas, project, creative, generatorAPP_TITLE, TECH_PREFERENCES, DIFFICULTY
smart-contract-scannerSmart Contract Security Scannergithub, solidity, smart-contract, security, auditAPP_TITLE, USER_NAME, CONTRACT_ADDRESS, HERO_IMAGE_URL
tech-blogsTech Blog Aggregatorgithub, blog, articles, reading, techAPP_TITLE, FEED_TOPICS, USER_NAME
tech-conferencesTech Conference Findergithub, conference, events, tech, meetupAPP_TITLE, FOCUS_TOPICS, REGION
tech-radarTech Stack Trend Radargithub, developer, programming, code, tech, stack, frameworkAPP_TITLE, USER_NAME, TECH_STACK, GITHUB_USERNAME, HERO_IMAGE_URL
web3-jobsWeb3 Job Boardgithub, web3, jobs, remote, hiringAPP_TITLE, PREFERRED_CHAINS, USER_SKILLS

Category C — Twitter & Social Intelligence (18 templates)

Require twitter signal. Social analytics, content strategy, and trend tracking.

IDNamematchSignalsPlaceholders
ai-researchAI Research Digesttwitter, ai, research, papers, modelsAPP_TITLE, USER_NAME, RESEARCH_AREAS
airdrop-intelAirdrop Intel Feedtwitter, airdrop, intel, alpha, opportunitiesAPP_TITLE, USER_NAME
competitor-monitorCompetitor Monitortwitter, competitor, monitoring, social, trackingAPP_TITLE, USER_NAME, COMPETITORS
content-calendarContent Calendar — Posting Strategytwitter, content, calendar, schedule, postingAPP_TITLE, USER_NAME, TWITTER_HANDLE, HERO_IMAGE_URL
ct-alphaCT Alpha Feedtwitter, crypto-twitter, alpha, signals, defiAPP_TITLE, USER_NAME, TWITTER_HANDLE, TRACKED_TOKENS, HERO_IMAGE_URL
devtools-radarDeveloper Tools Radartwitter, devtools, releases, updates, radarAPP_TITLE, USER_NAME
event-trackerEvent Trackertwitter, events, tracking, upcoming, calendarAPP_TITLE, USER_NAME, EVENT_TYPES
industry-newsIndustry News Radartwitter, news, industry, realtime, feedAPP_TITLE, USER_NAME, INDUSTRIES
interest-radarInterest Radar — Topic Analysistwitter, interests, topics, content, radarAPP_TITLE, USER_NAME, TWITTER_HANDLE, HERO_IMAGE_URL
kol-trackerKOL Trackertwitter, kol, influencer, opinion-leader, trackingAPP_TITLE, USER_NAME, TWITTER_HANDLE, HERO_IMAGE_URL
narrative-trackerNarrative Trackertwitter, narrative, trend, crypto, macroAPP_TITLE, USER_NAME, TWITTER_HANDLE, HERO_IMAGE_URL
remote-jobsRemote Job Boardtwitter, remote, jobs, work, hiringAPP_TITLE, USER_NAME, SKILLS
social-graphSocial Graph — Network Analysistwitter, social, network, connections, graphAPP_TITLE, USER_NAME, TWITTER_HANDLE, HERO_IMAGE_URL
startup-fundingStartup Funding Trackertwitter, startup, funding, investment, ventureAPP_TITLE, USER_NAME
tech-launchesTech Product Launch Feedtwitter, producthunt, hackernews, launches, techAPP_TITLE, USER_NAME
thread-ideasThread Ideas Generatortwitter, thread, ideas, content, writingAPP_TITLE, USER_NAME, NICHE
token-launchesToken Launch Trackertwitter, launch, ido, token-sale, upcomingAPP_TITLE, USER_NAME
token-mentionsToken Mentions Trackertwitter, token, mentions, kol, trackingAPP_TITLE, USER_NAME, TRACKED_TOKENS
topic-dashboardTrending Topics Dashboardtwitter, trending, topics, news, dashboardAPP_TITLE, USER_NAME, TWITTER_HANDLE, HERO_IMAGE_URL
viral-analyzerViral Tweet Analyzertwitter, viral, engagement, analytics, growthAPP_TITLE, USER_NAME, TWITTER_HANDLE, HERO_IMAGE_URL

Category D — Standalone Tools & Utilities (28 templates)

No specific data source required. General-purpose tools, calculators, and utilities.

IDNamematchSignalsPlaceholders
ascii-artASCII Art Generatortool, ascii, art, text, generatorAPP_TITLE, HERO_IMAGE_URL
block-explorer-liteBlock Explorer Liteblockchain, explorer, address, transaction, searchAPP_TITLE, DEFAULT_CHAIN, HERO_IMAGE_URL
bookmark-managerBookmark Managerproductivity, bookmarks, organize, links, readingAPP_TITLE, USER_NAME, HERO_IMAGE_URL
contract-readerSmart Contract Readerblockchain, contract, abi, reader, toolAPP_TITLE, HERO_IMAGE_URL
cron-builderCron Expression Builderdeveloper, cron, scheduler, expression, toolAPP_TITLE, USER_NAME, HERO_IMAGE_URL
crypto-quizCrypto Knowledge Quizeducation, quiz, crypto, knowledge, gameAPP_TITLE, HERO_IMAGE_URL
dca-calculatorDCA Calculatorcalculator, dca, investment, strategy, cryptoAPP_TITLE, USER_NAME, TRACKED_TOKENS, HERO_IMAGE_URL
defi-compareDeFi Protocol Comparisondefi, compare, protocol, tvl, apyAPP_TITLE, HERO_IMAGE_URL
fear-greedCrypto Fear & Greed Indexcrypto, market, sentiment, fear, greed, bitcoinAPP_TITLE, USER_NAME, HERO_IMAGE_URL
habit-trackerHabit Trackerproductivity, habits, tracking, streak, dailyAPP_TITLE, USER_NAME, HERO_IMAGE_URL
ico-calendarICO/IDO Calendarcalendar, ico, ido, token-sale, upcomingAPP_TITLE, HERO_IMAGE_URL
json-formatterJSON Formatter & Validatorproductivity, json, formatter, validator, developerAPP_TITLE, USER_NAME, HERO_IMAGE_URL
kanbanKanban Boardproductivity, kanban, tasks, project, boardAPP_TITLE, USER_NAME, HERO_IMAGE_URL
markdown-editorMarkdown Editorproductivity, markdown, editor, writing, documentationAPP_TITLE, USER_NAME, HERO_IMAGE_URL
market-overviewMarket Overview Dashboardmarket, overview, crypto, stocks, forexAPP_TITLE, USER_NAME, HERO_IMAGE_URL
meme-generatorMeme Generatortool, meme, generator, image, funAPP_TITLE, HERO_IMAGE_URL
morning-briefingMorning Intelligence Briefingnews, briefing, morning, daily, summary, update, digestAPP_TITLE, USER_NAME, INTERESTS, CITY, HERO_IMAGE_URL
password-genPassword Generatorproductivity, password, security, generator, toolAPP_TITLE, USER_NAME, HERO_IMAGE_URL
pixel-editorPixel Art Editortool, pixel, art, editor, creativeAPP_TITLE, HERO_IMAGE_URL
pnl-calculatorP&L Calculatorcalculator, pnl, profit-loss, trading, cryptoAPP_TITLE, USER_NAME, HERO_IMAGE_URL
pomodoroPomodoro Timerproductivity, timer, pomodoro, focus, taskAPP_TITLE, USER_NAME, HERO_IMAGE_URL
qrcode-genQR Code Generatorproductivity, qrcode, generator, tool, shareAPP_TITLE, USER_NAME, HERO_IMAGE_URL
quick-notesQuick Notesproductivity, notes, markdown, quick, writingAPP_TITLE, USER_NAME, HERO_IMAGE_URL
staking-yieldStaking Yield Calculatorcalculator, staking, yield, apy, comparisonAPP_TITLE, DEFAULT_TOKEN, HERO_IMAGE_URL
tax-estimatorCrypto Tax Estimatorcalculator, tax, crypto, estimation, toolAPP_TITLE, DEFAULT_COUNTRY, HERO_IMAGE_URL
timezone-converterTimezone Converterproductivity, timezone, converter, remote, globalAPP_TITLE, USER_NAME, HERO_IMAGE_URL
token-compareToken Compare Toolcompare, token, analysis, market-cap, tvlAPP_TITLE, USER_NAME, TRACKED_TOKENS, HERO_IMAGE_URL
typing-testTyping Speed Testproductivity, typing, speed, test, keyboardAPP_TITLE, USER_NAME, HERO_IMAGE_URL
unit-converterUnit Converterproductivity, converter, units, currency, toolAPP_TITLE, DEFAULT_CATEGORY, HERO_IMAGE_URL
web3-glossaryWeb3 Glossaryweb3, glossary, terms, education, referenceAPP_TITLE, USER_NAME, HERO_IMAGE_URL

Category E — Multi-Source & Cross-Platform (16 templates)

Require 2+ data sources (e.g., wallet + twitter, github + twitter). Rich, multi-dimensional dashboards.

IDNamematchSignalsPlaceholders
ai-builderAI Builder Toolkittwitter, github, ai, machine-learning, developerAPP_TITLE, USER_NAME, GITHUB_USERNAME, HERO_IMAGE_URL
alpha-signalAlpha Signal Boardtwitter, wallet, alpha, signal, tradingAPP_TITLE, USER_NAME, TWITTER_HANDLE, WALLET_ADDRESS, HERO_IMAGE_URL
creator-analyticsCreator Analytics Dashboardtwitter, github, creator, analytics, contentAPP_TITLE, USER_NAME, TWITTER_HANDLE, GITHUB_USERNAME, HERO_IMAGE_URL
crosschain-bridgeCross-Chain Bridge Optimizerwallet, bridge, crosschain, multichain, transferAPP_TITLE, USER_NAME, WALLET_ADDRESS, HERO_IMAGE_URL
defi-dev-consoleDeFi Developer Consolegithub, wallet, defi, solidity, developerAPP_TITLE, USER_NAME, GITHUB_USERNAME, WALLET_ADDRESS, HERO_IMAGE_URL
dev-brandDeveloper Brand Pagegithub, twitter, brand, portfolio, developerAPP_TITLE, USER_NAME, GITHUB_USERNAME, TWITTER_HANDLE, HERO_IMAGE_URL
efficiency-hubEfficiency & Finance Hubwallet, email, calendar, portfolio, productivityAPP_TITLE, USER_NAME, WALLET_ADDRESS, TRACKED_TOKENS, HERO_IMAGE_URL
enterprise-intelEnterprise Intelligence Dashboardemail, twitter, enterprise, competitor, intelligenceAPP_TITLE, USER_NAME, COMPANY_NAME, HERO_IMAGE_URL
ml-trackerML Experiment Trackergithub, twitter, ml, experiment, pythonAPP_TITLE, USER_NAME, GITHUB_USERNAME, HERO_IMAGE_URL
nft-communityNFT Community Radarwallet, twitter, nft, community, socialAPP_TITLE, USER_NAME, WALLET_ADDRESS, TWITTER_HANDLE, HERO_IMAGE_URL
solana-radarSolana Ecosystem Radarwallet, twitter, solana, ecosystem, defiAPP_TITLE, USER_NAME, WALLET_ADDRESS, HERO_IMAGE_URL
starchild-demoStarchild Capabilities Showcasestarchild, demo, showcase, capabilities, featuresAPP_TITLE, USER_NAME, HERO_IMAGE_URL
ui-componentsUI Components Gallerygithub, frontend, ui, components, designAPP_TITLE, USER_NAME, HERO_IMAGE_URL
web3-builderWeb3 Builder Dashboardgithub, wallet, web3, builder, developerAPP_TITLE, USER_NAME, GITHUB_USERNAME, WALLET_ADDRESS, HERO_IMAGE_URL

---

5. Theme Catalog (20 themes)

Theme files are in skills/surprise-templates/themes/{id}.json.

Each theme JSON contains:

  • colors — CSS variable values (--bg-primary, --bg-secondary, --bg-card, --text-primary, --text-secondary, --accent-1, --accent-2, --accent-3, --border, --glow, --gradient-hero)
  • fonts — heading, body, mono font families
  • chartColors — array of 6 hex colors for Chart.js

Dark Themes (13)

IDNameVibe
cyber-neonCyber NeonCyberpunk — deep black + neon green/purple
ocean-depthOcean DepthDeep sea — dark blue + cyan/coral
midnight-goldMidnight GoldLuxury finance — midnight blue + gold/amber
aurora-borealisAurora BorealisNorthern lights — deep purple + aurora green/pink
forest-canopyForest CanopyForest — dark green + moss/amber
volcanic-emberVolcanic EmberVolcanic — dark gray + lava red/orange
neon-tokyoNeon TokyoTokyo neon — pure black + neon pink/cyan
deep-spaceDeep SpaceSpace — space black + nebula purple/blue
coral-reefCoral ReefCoral reef — dark teal + coral/gold
industrial-steelIndustrial SteelIndustrial — steel gray + orange/white
electric-blueElectric BlueElectric — dark blue + electric blue/white
rose-goldRose GoldRose gold — dark rose + rose gold/white
matrix-greenMatrix GreenMatrix — pure black + matrix green/dark green

Light Themes (5)

IDNameVibe
arctic-frostArctic FrostArctic — ice white + ice blue/silver
lavender-dreamLavender DreamLavender — light purple + lavender/rose
desert-sandDesert SandDesert — sand + ochre/sky blue
paper-inkPaper & InkPaper — paper white + ink black/red
candy-popCandy PopCandy — pink white + candy colors/bright

Monochrome (2)

IDNameVibe
monochrome-noirMonochrome NoirBlack & white + single accent color
sunset-gradientSunset GradientWarm orange + pink-purple/gold

Theme Selection Guidelines

  • Crypto/trading dashboards → cyber-neon, neon-tokyo, midnight-gold, deep-space
  • Developer tools → matrix-green, industrial-steel, paper-ink
  • Productivity/utilities → arctic-frost, lavender-dream, desert-sand
  • NFT/creative → aurora-borealis, coral-reef, sunset-gradient
  • Finance/enterprise → midnight-gold, monochrome-noir, rose-gold
  • Fun/casual → candy-pop, volcanic-ember, ocean-depth

---

6. How to Apply a Theme

Read the theme JSON file and replace CSS variables in style.css:

# Example: applying cyber-neon theme
THEME=$(cat skills/surprise-templates/themes/cyber-neon.json)

In style.css, find the :root { ... } block and replace each CSS variable value:

:root {
  --bg-primary: #0a0a0f;       /* from theme.colors.--bg-primary */
  --bg-secondary: #12121a;     /* from theme.colors.--bg-secondary */
  --bg-card: rgba(18,18,26,0.85);
  --text-primary: #e0e0e8;
  --text-secondary: #8888a0;
  --accent-1: #39ff14;
  --accent-2: #bf00ff;
  --accent-3: #00e5ff;
  --border: rgba(57,255,20,0.15);
  --glow: 0 0 20px rgba(57,255,20,0.3), 0 0 60px rgba(57,255,20,0.1);
  --gradient-hero: linear-gradient(135deg, #0a0a0f 0%, #1a0a2e 50%, #0a0a0f 100%);
}

Also update the font <link> in index.html:

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

And update chartColors in script.js where Chart.js datasets reference colors.

---

7. Quick Reference — End-to-End Example

Example A — User with signals

User signals: wallet connected, interests = ["defi", "yield"], tokens = ["ETH", "AAVE"]
Language: zh-CN, Avatar: https://example.com/alex.png
History: previously received "trading-intel"

1. Build candidates → score all templates against ["wallet", "defi", "yield"]
   Candidates (score ≥ 2): defi-yield(3), stablecoin-yield(2), impermanent-loss(2),
   funding-rate(2), dex-arb(2), portfolio-radar(2)
   Exclude history: trading-intel (already seen)
2. Random select → impermanent-loss (randomly picked from 6 candidates)
3. Copy  → cp -r templates/impermanent-loss/ output/surprise-me/
4. Random theme → from [midnight-gold, cyber-neon, deep-space, neon-tokyo],
   randomly pick → deep-space
5. Replace placeholders:
   - {{APP_TITLE}} → "Alex 的无常损失计算器" (creative, localized title)
   - {{USER_NAME}} → "Alex"
   - {{TRACKED_TOKENS}} → ["ETH", "AAVE"]
   - {{HERO_IMAGE_URL}} → "./hero-bg.png"
6. Personalize beyond placeholders:
   - Translate all UI labels to zh-CN (按钮、标题、图表标签)
   - Inject avatar as profile image in header
   - Adjust mock data: use realistic ETH/AAVE price ranges
7. Apply theme colors to style.css :root block
8. Add Google Fonts link for theme fonts
9. Serve → cd output/surprise-me && python3 -m http.server 8080

Example B — User with no signals (fallback)

User signals: none (no wallet, no GitHub, no Twitter, no specific interests)
Language: en

1. No matching signals → use Category D (28 standalone tools) as candidate pool
2. Random select → pomodoro (randomly picked from 28 candidates)
3. Copy  → cp -r templates/pomodoro/ output/surprise-me/
4. Random theme → from all 20 themes, randomly pick → lavender-dream
5. Replace placeholders:
   - {{APP_TITLE}} → "Your Focus Timer" (creative title)
   - {{USER_NAME}} → "Explorer"
   - {{HERO_IMAGE_URL}} → "./hero-bg.png"
6. Personalize: adjust default session durations, translate if needed
7. Apply theme + fonts
8. Serve → cd output/surprise-me && python3 -m http.server 8080

Related skills

mattpocockSetup Matt Pocock SkillsScaffold the per-repo configuration that Matt Pocock’s engineering agent skills rely on so they understand the issue tracker, triage labels, and domain documentation la495k196kopen.feishu.cnLark AppsConnect Claude, Cursor or custom agents directly to Lark (Feishu) for messaging, document automation, approval workflows and enterprise data access.402kjuliusbrusseeCavemanSlash token usage by roughly 75% while keeping every technical detail intact when working with Claude Code, Cursor or similar agents.391k94.7klarksuiteLark Skill MakerQuickly turn any Lark/Feishu OpenAPI call or multi-step workflow into a reusable agent skill with its own SKILL.md.386k16kxixu-meRunning Claude Code Via Litellm CopilotRun Claude Code at a fraction of the cost by routing requests through LiteLLM to the GitHub Copilot Chat API.270k72runcomfy-comCodex PetGenerate a complete Codex Pet spritesheet and metadata from one reference image without needing an OpenAI key or Codex Pro.246k10
AI & Agent Buildingagents
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.