near-dapp
Build NEAR Protocol dApps. Use for: (1) creating new NEAR dApps with `create-near-app` (Vite+React, Next.js), (2) adding NEAR wallet connection to existing apps with `@hot-labs/near-connect` and `near-connect-hooks`, (3) building frontend UI for NEAR smart contracts, (4) integrating wallet sign-in/sign-out, contract calls, and transaction signing into web applications.
How do I install this agent skill?
npx skills add https://github.com/near/agent-skills --skill near-dappIs this agent skill safe to install?
- Gen Agent Trust Hubpass
The skill provides legitimate instructions for building NEAR Protocol decentralized applications using standard tools like create-near-app and official/community-maintained wallet connection libraries. No security risks were detected.
- Socketpass
No alerts
- Snykwarn
Risk: MEDIUM · 1 issue
- Runlayerwarn
4/4 files flagged
What does this agent skill do?
NEAR dApp
Upstream Documentation
- Web3 App Quickstart — official first-dApp guide
- Wallet Connector — official docs for the
@hot-labs/near-connectconnector used here - Wallet Login tutorial
- create-near-app repo — scaffolding tool source (templates verified:
auction,auction-adv;--helpis authoritative)
Decision Router
Determine which path to follow:
Path A: New Project
User wants to create a new NEAR dApp from scratch.
- Read references/create-near-app.md
- Run scaffolding:
npx create-near-app@latest
Or with arguments:
npx create-near-app my-app --frontend vite-react --contract rs --install
Framework options: vite-react | next-app | next-page
Contract options: rs (Rust) | ts (TypeScript)
- If user needs wallet connection in the scaffolded app, also follow Path B.
Path B: Existing Project
User wants to add NEAR wallet connection to an existing React app.
- Read references/near-connect-hooks.md — React hooks API and patterns
- If user needs low-level wallet API or non-React integration, also read references/near-connect.md
Quick setup:
npm install near-connect-hooks @hot-labs/near-connect near-api-js
// 1. Wrap app root with NearProvider
import { NearProvider } from 'near-connect-hooks';
<NearProvider config={{ network: 'mainnet' }}>
<App />
</NearProvider>
// 2. Use hook in components
import { useNearWallet } from 'near-connect-hooks';
const { signedAccountId, signIn, signOut, viewFunction, callFunction } = useNearWallet();
Path C: Non-React or Vanilla JS
Use @hot-labs/near-connect directly without React hooks.
npm install @hot-labs/near-connect
import { NearConnector } from "@hot-labs/near-connect";
const connector = new NearConnector({ network: "mainnet" });
connector.on("wallet:signIn", async (t) => {
const wallet = await connector.wallet();
const address = t.accounts[0].accountId;
});
await connector.connect();
Key Patterns
- Read contract state (no wallet):
viewFunction({ contractId, method, args }) - Write to contract (wallet required):
callFunction({ contractId, method, args, deposit }) - Transfer NEAR:
transfer({ receiverId, amount }) - NEAR ↔ yoctoNEAR: Use
nearToYocto()/yoctoToNear()fromnear-api-js - 1 NEAR =
"1000000000000000000000000"yoctoNEAR - Default gas:
"30000000000000"(30 TGas)
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/near/agent-skills/near-dapp">View near-dapp on skillZs</a>