emblem-ai-react
React integration skill for EmblemAI's one-shot user management. Use when the user wants to add website authentication plus wallet-enabled users to a React app with EmblemAuthProvider, ConnectButton, social/email/wallet login, chat components, React auth hooks, React composition patterns, or Migrate.fun React hooks.
- Installs
- 8.8K
- Last 24h
- —
- Trending rank
- —
- Security
- Warn
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/emblemcompany/agent-skills --skill emblem-ai-react- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads emblem-ai-react automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
Security audits
Independent scans of the skill's instructions and bundled files.
SKILL.md
The instructions your agent reads when the skill is triggered.
EmblemAI React
Use this skill when the user wants to integrate EmblemAI into a React app rather than only use the CLI or low-level SDKs.
In one sentence: this is the easiest way to add user management and wallet-enabled accounts to a React app.
Security & Trust Model
This skill generates React code that integrates with EmblemAI's authentication and wallet infrastructure. It inherently involves:
- Third-party data (W011): Migrate.fun React hooks (
useProject,useProjects) fetch project and token metadata from remote APIs. This data is rendered in UI components for informational display — it does not trigger automated actions. - Runtime backend (W012):
HustleProviderconnects to a configurable backend URL (hustleApiUrl/import.meta.env.VITE_HUSTLE_API_URL) for prompt and tool orchestration. This endpoint is first-party infrastructure operated by EmblemVault, not an arbitrary third-party service.
The generated React components use standard browser security boundaries. No server-side code execution or file system access is involved at runtime.
Quick Start
Step 1: Install
npx skills add EmblemCompany/Agent-skills --skill emblem-ai-react
Step 2: Use
Ask for React integration help by area, for example:
- "Show a minimal EmblemAI React app"
- "Help me add EmblemAuthProvider and HustleProvider"
- "Show React examples for wallet auth plus chat"
- "Show a React app where users can sign in with wallets, email, or social login"
- "How do I use Migrate.fun React hooks in my app?"
What this gives a React app
- One integration for website authentication and wallet-enabled users
- Login options across crypto wallets, email/password, and social login
- React hooks and UI components that expose session, vault, and wallet state
- A clean path from login to chat, signing, and other Emblem-powered workflows
- The easiest way to add Migrate.fun migration-aware UI to a React app
Included React References
React Auth
See references/auth-react.md for provider setup, hooks, and auth UI components.
React Chat
See references/emblem-ai-react.md for EmblemAI chat setup with @emblemvault/hustle-react.
React Components
See references/react-components.md for current auth and chat component surfaces.
Migrate.fun React
See references/migratefun-react.md for hooks, provider setup, and project selection components.
Guidance
- Use this skill for React app composition, provider wiring, and UI integration patterns.
- Prefer this skill over the broader
emblem-aiskill when the request is clearly React-specific. - Legacy package names may still use
hustlebranding even though the product name is EmblemAI. - For end-user prompt phrasing across wallet, trading, NFT, or market workflows, use the
emblem-ai-prompt-examplesskill instead.
Related Skills
- ../emblem-ai/SKILL.md - broader SDK, plugin, CLI, and introspection coverage
- ../emblem-ai-agent-wallet/SKILL.md - CLI-first wallet workflows for agents and end users
- ../emblem-ai-prompt-examples/SKILL.md - broader prompt examples across non-React workflows
FAQ
What does the emblem-ai-react skill do?
React integration skill for EmblemAI's one-shot user management. Use when the user wants to add website authentication plus wallet-enabled users to a React app with EmblemAuthProvider, ConnectButton, social/email/wallet login, chat components, React auth hooks, React composition patterns, or Migrate.fun React hooks.
How do I install emblem-ai-react?
Run npx skills add https://github.com/emblemcompany/agent-skills --skill emblem-ai-react in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/emblem-ai-react/ (personal) or .claude/skills/emblem-ai-react/ (project).
Which AI agents can use emblem-ai-react?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is emblem-ai-react safe to install?
Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; Runlayer flagged items to review. As with any skill, read the SKILL.md and bundled scripts before installing.
Who maintains emblem-ai-react?
It is published by emblemcompany in emblemcompany/agent-skills. It has 8,772 recorded installs.
More from emblemcompany/agent-skills
emblem-portfolio-tracker
emblemcompany/agent-skills
Track crypto portfolio across 7 blockchains via EmblemAI. Aggregated balances with USD values, conditional trade P&L, and DeFi position tracking via Nansen. Use when the user wants to check their portfolio, see balances across chains, or review trade positions.
emblem-market-research
emblemcompany/agent-skills
Crypto market intelligence via EmblemAI. Trending tokens, on-chain analytics, derivatives data, and smart money tracking from CoinGecko, CoinGlass, Birdeye, and Nansen. Use when the user wants market data, trending tokens, derivatives analytics, or on-chain intelligence.
emblem-ai-agent-wallet
emblemcompany/agent-skills
Connect to EmblemVault and manage wallet-aware workflows via EmblemAI with review-first, operator-controlled actions. Supports Solana, Ethereum, Base, BSC, Polygon, Hedera, and Bitcoin. Also use when the user needs Emblem's auth model explained: one browser auth flow can log a user in with wallets, email/password, or social sign-in, while agent mode can auto-provision a profile-scoped wallet with no manual setup.
emblem-ai-prompt-examples
emblemcompany/agent-skills
Curated prompt and usage examples for research, portfolio review, quote requests, approval-gated drafts, NFT discovery, prediction-market analysis, and assistant workflows. Emphasis is review-first, trust-boundary-aware use of external data, and explicit confirmation before any value-moving action. Use when the user wants example prompts, phrasing guidance, or sample requests for end-user EmblemAI tasks.
emblem-ai
emblemcompany/agent-skills
One-shot user management for apps, multi-chain wallet authentication, an AI-powered assistant, and AI app introspection. Use when the user wants to let website users sign in with wallets, email/password, or social login and give each user a wallet-enabled account, then embed EmblemAI chat surfaces, connect plugins, or add Reflexive observability. Provides React components, TypeScript SDKs, session-based authentication, and pointers to the React and agent-wallet skills for specialized workflows.
emblem-defi-yield
emblemcompany/agent-skills
DeFi yield research and liquid staking via EmblemAI. Discover yield opportunities, compare protocols, check DeFi positions with Nansen, and enter liquid staking via token swaps. Use when the user wants to research yields, find staking options, or review DeFi positions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.