frontend
Frontend Skill
CRITICAL RULES
- Read reference files FIRST. When the user's request involves any topic in the reference table below, read those files before doing anything else — before writing code, before making decisions. Briefly mention which files you are reading so the user can confirm the skill is active (e.g., "Reading frontend patterns reference...").
- Information priority for VeChain topics: (a) Reference files in this skill — always the primary source. (b) VeChain MCP tools — use
@vechain/mcp-serverfor on-chain data, transaction building, and live network queries; use Kapa AI MCP for VeChain documentation lookups. (c) Web search — only as a last resort, and only for topics NOT covered in the reference files. - Prefer working directly in the main conversation for VeChain tasks. Plan mode and subagents do not inherit skill context and may fall back to web search instead of using reference files.
- After compaction or context loss, re-read this SKILL.md to restore awareness of the reference table and operating procedure before continuing work.
Scope
Use this Skill for generic frontend development patterns in VeChain dApps:
- React Query (TanStack Query): query keys, cache invalidation, batch queries, loading states, anti-patterns
- Turborepo monorepo architecture and conventions
- State management (React Query for server state, Zustand for client state)
- Chakra UI integration and responsive design
- i18n with react-i18next
- Transaction UX: loading states, confirmation patterns, error handling
More from vechain/vechain-ai-skills
grill-me
Interview me relentlessly about every aspect of this plan until we reach a shared understanding. Walk down each branch of the design tree, resolving dependencies between decisions one-by-one.
65vebetterdao
VeBetterDAO and X2Earn app development — B3TR/VOT3 tokens, reward distribution, sustainability proofs, app submission, governance, VeVote, quadratic funding, B3MO Quests, and navigators.
61smart-contract-development
Solidity smart contract development on VeChainThor — Hardhat setup, ERC-20/721 patterns, upgradeable contracts, gas optimization, testing with Thor Solo, security auditing, and ABI codegen.
58vechain-kit
VeChain Kit and dapp-kit packages — installation, hooks, components, wallet connection, social login, smart accounts, theming, and Privy setup.
57translate
Manages translation files for react-i18next. Adds/removes keys across 15 languages, keeps files sorted, enforces fixed-word rules, and verifies sync with en.json.
55stargate
StarGate staking on VeChainThor — NFT-based staking, tiered rewards, validator delegation, node management, boosting, and Phase 2 changes.
54