New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Web3 Fullstack Systematic Build

by HKUDS in HKUDS/OpenSpace

Systematic approach to building full-stack Web3 applications layer by layer

MITAuto-check: notesBusiness, Finance & HR

Install Web3 Fullstack Systematic Build

skills CLI
$ npx skills add HKUDS/OpenSpace --skill web3-fullstack-systematic-build -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install HKUDS/OpenSpace web3-fullstack-systematic-build --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/HKUDS/OpenSpace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/benchmarks/gdpval/skills/web3-fullstack-systematic-build .claude/skills/web3-fullstack-systematic-build && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
web3-fullstack-systematic-build
GitHub stars
7.7k
Token cost
~1.8k tokens
SKILL.md length
485 words
Files
2
Skills in repo
199
Repo updated
First seen
Licence
MIT

At a glance

Systematic approach to building full-stack Web3 applications layer by layer

  • Works in 6 steps: Project Structure → Interface Contracts First → Core Contract Implementation → …
  • Tasks that involve Crypto and DeFi analysis
  • SKILL.md covers Phase 1: Project Structure, Phase 2: Interface Contracts…, Phase 3: Core Contract… and Phase 4: Frontend Configuration, plus 4 more sections
  • Reaches etherscan.io and goerli.etherscan.io

What it does

Web3 Fullstack Systematic Build is an agent skill from HKUDS/OpenSpace. Systematic approach to building full-stack Web3 applications layer by layer

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file.

It sits in Business, Finance & HR, covering Crypto and DeFi analysis. The repository describes itself as: "OpenSpace: The Skill Management Layer for AI Agents" -- https://open-space.cloud/. The licence is MIT.

When your agent uses it

  • Tasks that involve Crypto and DeFi analysis

Example prompts

  • “/web3-fullstack-systematic-build”

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Project Structure
  2. Interface Contracts First
  3. Core Contract Implementation
  4. Frontend Configuration
  5. Component Development
  6. Deployment Scripts

What it can do on your machine

Read from SKILL.md and the folder at commit 3827781. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript, solidity and bash).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • etherscan.io
    • goerli.etherscan.io

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Web3 Fullstack Systematic Build loads about 1.8k tokens when it runs. Until then it costs about 27 tokens; SKILL.md has 485 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~27
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:213
    'frontend/.env',

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from HKUDS/OpenSpace at commit 3827781, republished under its MIT licence (© HKUDS). 485 words, ~1,779 tokens.

Download SKILL.mdSave it as .claude/skills/web3-fullstack-systematic-build/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
web3-fullstack-systematic-build
description
Systematic approach to building full-stack Web3 applications layer by layer

Web3 Full-Stack Systematic Build

This skill provides a structured, layer-by-layer approach to building complex full-stack Web3 applications. Follow this sequence to maintain clarity, reduce coupling, and enable incremental testing even when tool failures occur.

Phase 1: Project Structure

First, establish the complete directory structure before writing any code:

project-name/
├── contracts/
│   ├── interfaces/
│   ├── core/
│   ├── libraries/
│   └── deployment/
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── config/
│   │   └── utils/
│   └── public/
├── scripts/
│   ├── deploy/
│   └── test/
├── zk-circuits/
└── docs/

Action: Create all directories upfront using:

bash
mkdir -p contracts/{interfaces,core,libraries,deployment}
mkdir -p frontend/src/{components,hooks,config,utils}
mkdir -p frontend/public
mkdir -p scripts/{deploy,test}
mkdir -p zk-circuits docs

Phase 2: Interface Contracts First

Define all interface contracts before implementing logic. This establishes clear API boundaries.

Example interface structure:

solidity
// contracts/interfaces/IToken.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

interface IToken {
    function transfer(address to, uint256 amount) external returns (bool);
    function balanceOf(address account) external view returns (uint256);
    function approve(address spender, uint256 amount) external returns (bool);
}

Actions:

  1. List all external protocols you'll integrate (e.g., Aave, Connext, Uniswap)
  2. Create interface files for each protocol's required functions
  3. Create interfaces for your own contracts' public APIs
  4. Validate interface completeness before proceeding

Phase 3: Core Contract Implementation

Implement contracts in dependency order, starting with libraries, then core logic.

Order of implementation:

  1. Libraries - Utility functions with no state dependencies
  2. Base contracts - Abstract contracts with shared logic
  3. Core contracts - Main business logic implementing interfaces
  4. Integration contracts - Contracts that bridge multiple protocols

Example:

solidity
// contracts/core/PrivatePool.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "../interfaces/IToken.sol";
import "../libraries/SafeMath.sol";

contract PrivatePool {
    using SafeMath for uint256;
    
    IToken public token;
    mapping(address => uint256) private balances;
    
    constructor(address _token) {
        token = IToken(_token);
    }
    
    function deposit(uint256 amount) external {
        token.transferFrom(msg.sender, address(this), amount);
        balances[msg.sender] = balances[msg.sender].add(amount);
    }
}

Actions:

  1. Implement one contract at a time
  2. Compile and test each contract before moving to the next
  3. Keep contracts focused on single responsibilities
  4. Document all state variables and functions

Phase 4: Frontend Configuration

Set up frontend infrastructure before building components.

Create these config files first:

  1. Network configuration (frontend/src/config/networks.js):
javascript
export const networks = {
  mainnet: {
    chainId: 1,
    rpcUrl: process.env.REACT_APP_MAINNET_RPC,
    explorer: 'https://etherscan.io'
  },
  testnet: {
    chainId: 5,
    rpcUrl: process.env.REACT_APP_TESTNET_RPC,
    explorer: 'https://goerli.etherscan.io'
  }
};
  1. Contract addresses (frontend/src/config/contracts.js):
javascript
export const contractAddresses = {
  PrivatePool: process.env.REACT_APP_PRIVATE_POOL_ADDRESS,
  Token: process.env.REACT_APP_TOKEN_ADDRESS
};
  1. ABI imports (frontend/src/config/abis/):
javascript
// Import compiled contract ABIs here
import PrivatePoolABI from './PrivatePool.json';
export { PrivatePoolABI };

Actions:

  1. Create environment variable templates (.env.example)
  2. Set up Web3 provider configuration (ethers.js, web3.js, or wagmi)
  3. Configure wallet connection logic
  4. Create utility functions for common operations
Show full SKILL.md (233 more words)Show less

Phase 5: Component Development

Build frontend components in this order:

  1. Utility components - Buttons, inputs, modals (no Web3 logic)
  2. Web3 wrapper components - Wallet connection, network switcher
  3. Contract interaction components - Forms that call contract functions
  4. Data display components - Components showing on-chain data
  5. Page components - Assembling everything into pages

Example component:

jsx
// frontend/src/components/DepositForm.jsx
import { useState } from 'react';
import { useContractWrite } from 'wagmi';
import { PrivatePoolABI } from '../config/abis';

export function DepositForm({ contractAddress, tokenAddress }) {
  const [amount, setAmount] = useState('');
  
  const { write: deposit } = useContractWrite({
    address: contractAddress,
    abi: PrivatePoolABI,
    functionName: 'deposit',
    args: [BigInt(amount)]
  });

  return (
    <form onSubmit={(e) => { e.preventDefault(); deposit(); }}>
      <input 
        value={amount} 
        onChange={(e) => setAmount(e.target.value)}
        placeholder="Amount"
      />
      <button type="submit">Deposit</button>
    </form>
  );
}

Actions:

  1. Create components with clear prop interfaces
  2. Implement error handling for all Web3 interactions
  3. Add loading states for pending transactions
  4. Test each component in isolation

Phase 6: Deployment Scripts

Create deployment scripts last, after all contracts are complete and tested.

Structure:

javascript
// scripts/deploy/01_deploy_token.js
async function main() {
  const Token = await ethers.getContractFactory("Token");
  const token = await Token.deploy();
  await token.deployed();
  console.log("Token deployed to:", token.address);
  
  // Save address for frontend config
  fs.writeFileSync(
    'frontend/.env',
    `REACT_APP_TOKEN_ADDRESS=${token.address}\n`,
    { flag: 'a' }
  );
}

Actions:

  1. Create deployment scripts for each contract in dependency order
  2. Include address saving mechanism for frontend integration
  3. Create verification scripts for block explorers
  4. Document deployment parameters and expected outputs

Key Principles

  1. Interface-first design - Define contracts before implementing
  2. Layer-by-layer progression - Complete each phase before next
  3. Incremental testing - Test at each layer, not just at the end
  4. Configuration before components - Set up infrastructure first
  5. Documentation at each step - Update docs as you progress

Recovery from Failures

If a tool failure occurs:

  1. Note which phase completed successfully
  2. Resume from the last completed phase
  3. Re-validate interfaces and contracts before continuing
  4. Use the directory structure as a progress checklist

This systematic approach ensures partial progress is preserved and the overall architecture remains coherent even when interruptions occur.

© HKUDS, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in benchmarks/gdpval/skills/web3-fullstack-systematic-build of HKUDS/OpenSpace.

  • SKILL.md
  • .skill_id

Open the folder on GitHubat commit 3827781

Compare with similar skills

Web3 Fullstack Systematic Build next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Web3 Fullstack Systematic Build compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Web3 Fullstack Systematic Build this skillHKUDS/OpenSpace7.7k—~1.8kAutomated safety check: NotesMIT
Technical Analysttradermonty/claude-trading-skills3k5 repos~4.6kAutomated safety check: PassMIT
Polyclawchainstacklabs/polyclaw3601 repos~2kAutomated safety check: PassApache-2.0
Longbridge Researchhelsome/folio2693 repos~2.1kAutomated safety check: PassMIT
Stock Analysis24mlight/StockClaw1012 repos~2kAutomated safety check: NotesMIT
Swapper Depositswapperfinance/swapper-toolkit852—~1.8kAutomated safety check: PassMIT

Similar skills

  • Technical Analyst

    tradermonty/claude-trading-skills

    This skill should be used when analyzing weekly price charts for stocks, stock indices, cryptocurrencies, or forex pairs.

    3k GitHub starsUsed in 5 repos~4.6k tokens
    Business, Finance & HRAuto-check passed

  • Polyclaw

    chainstacklabs/polyclaw

    Trade on Polymarket via split + CLOB execution. An agent skill from chainstacklabs/polyclaw.

    360 GitHub starsUsed in 1 repo~2k tokens
    Business, Finance & HRAuto-check passed

  • Longbridge Research

    helsome/folio

    Institution ratings, consensus price targets, EPS/revenue forecasts, finance calendar, shareholder data, fund holders, insider trades (SEC Form 4), short interest, industry rankings, peer group…

    269 GitHub starsUsed in 3 repos~2.1k tokens
    Business, Finance & HRAuto-check passed

  • Stock Analysis

    24mlight/StockClaw

    Analyze stocks and cryptocurrencies using Yahoo Finance data.

    101 GitHub starsUsed in 2 repos~2k tokens
    Business, Finance & HRAuto-check: notes

  • Swapper Deposit

    swapperfinance/swapper-toolkit

    Deposit and bridge funds into a wallet or protocol using Swapper Finance.

    852 GitHub stars~1.8k tokensUpdated 6 mo ago
    Business, Finance & HRAuto-check passed

  • Okx Cex Earn

    okx/agent-skills

    Manages OKX Simple Earn (flexible savings/lending), Flash Earn, On-chain Earn (staking/DeFi), Dual Investment (DCD/双币赢), and AutoEarn (自动赚币) via the okx CLI.

    185 GitHub starsUsed in 2 repos~3.3k tokens
    Business, Finance & HRAuto-check passed

More from HKUDS/OpenSpace

All 199 skills in this repo

  • Audio Track Production Workflow

    HKUDS/OpenSpace

    Walks through producing a master audio track plus stems in Python, from checking a reference file and timing sections by BPM to effects, a zip archive and final verification.

    7.7k GitHub stars~2.9k tokensUpdated 1 mo ago
    Auto-check passed

  • Cascade Failure Recovery

    HKUDS/OpenSpace

    Handle cascading data retrieval tool failures by falling back to embedded knowledge generation

    7.7k GitHub stars~765 tokensUpdated 1 mo ago
    Auto-check passed

  • Sandbox Code Execution Fallback

    HKUDS/OpenSpace

    Gives an agent a workaround when its code-execution sandbox keeps failing: save the Python script to a file and run it through the shell instead.

    7.7k GitHub stars~588 tokensUpdated 1 mo ago
    Auto-check passed

  • Code Execution Fallback

    HKUDS/OpenSpace

    A recovery routine for agents whose sandboxed code runner keeps failing: save the Python script to disk, then run it through the shell and read the output.

    7.7k GitHub stars~652 tokensUpdated 1 mo ago
    Auto-check passed

  • Code Execution Fallback and Path Anchoring

    HKUDS/OpenSpace

    Fallback ladder for failed sandboxed code runs, plus the habit of fixing the working directory first so generated files land in the right place.

    7.7k GitHub stars~1.1k tokensUpdated 1 mo ago
    Auto-check passed

  • Code Execution Fallback E81068

    HKUDS/OpenSpace

    Fallback workflow for executing Python code when executecodesandbox fails repeatedly

    7.7k GitHub stars~1.1k tokensUpdated 1 mo ago
    Auto-check passed

Categories

Questions about Web3 Fullstack Systematic Build

What does Web3 Fullstack Systematic Build do?

Systematic approach to building full-stack Web3 applications layer by layer. Web3 Fullstack Systematic Build is an agent skill from HKUDS/OpenSpace.

When should I use Web3 Fullstack Systematic Build?

Web3 Fullstack Systematic Build fits situations like: tasks that involve Crypto and DeFi analysis.

How do I install Web3 Fullstack Systematic Build in Claude Code?

Run `npx skills add HKUDS/OpenSpace --skill web3-fullstack-systematic-build -a claude-code`. Or copy the skill folder (benchmarks/gdpval/skills/web3-fullstack-systematic-build in HKUDS/OpenSpace) into .claude/skills/web3-fullstack-systematic-build in your project. Claude Code loads it when a task matches its description.

How do I install Web3 Fullstack Systematic Build in Codex?

Run `npx skills add HKUDS/OpenSpace --skill web3-fullstack-systematic-build -a codex`. Or copy the skill folder (benchmarks/gdpval/skills/web3-fullstack-systematic-build in HKUDS/OpenSpace) into .agents/skills/web3-fullstack-systematic-build in your project. Codex loads it when a task matches its description.

Can I use Web3 Fullstack Systematic Build in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add HKUDS/OpenSpace --skill web3-fullstack-systematic-build -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web3-fullstack-systematic-build, .gemini/skills/web3-fullstack-systematic-build, .github/skills/web3-fullstack-systematic-build and .opencode/skills/web3-fullstack-systematic-build in your project.

What does Web3 Fullstack Systematic Build need to run?

SKILL.md names no scripts, command-line tools or credentials: Web3 Fullstack Systematic Build is instructions for the agent only.

Does Web3 Fullstack Systematic Build access the network?

SKILL.md names 2 domains. In commands or code: etherscan.io and goerli.etherscan.io; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.

Is Web3 Fullstack Systematic Build safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Web3 Fullstack Systematic Build use?

Web3 Fullstack Systematic Build is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Web3 Fullstack Systematic Build use?

About 1.8k tokens (SKILL.md is roughly 7.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Web3 Fullstack Systematic Build?

Skills that share tags, products or a category with Web3 Fullstack Systematic Build: Technical Analyst (tradermonty/claude-trading-skills, 3k stars), Polyclaw (chainstacklabs/polyclaw, 360 stars), Longbridge Research (helsome/folio, 269 stars) and Stock Analysis (24mlight/StockClaw, 101 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Web3 Fullstack Systematic Build?

HKUDS (a GitHub organization) maintains it in HKUDS/OpenSpace, which has 7,743 GitHub stars. The repository holds 199 skills in this directory. The repository was last updated on August 12, 2026.

Source: HKUDS/OpenSpace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.