가장 일반적인 AI 에이전트 UI 버그를 방지하는 Ethereum dApp용 프런트엔드 UX 규칙입니다. 온체인 버튼, 토큰 승인 흐름, 주소 표시, USD 값, RPC 구성 및 사전 게시 메타데이터에 대한 필수 패턴입니다. Scaffold-ETH 2를 기반으로 구축되었지만 패턴은 모든 Ethereum 프런트엔드에 적용됩니다. dApp 프런트엔드를 구축할 때 사용하세요.
명령줄에서 frontend-ux AI 스킬을 개발 환경에 빠르게 설치
출처: austintgriffith/ethskills.
"The button works." Working is not the standard. Does it disable during the transaction? Does it show a spinner? Does it stay disabled until the chain confirms? Does it show an error if the user rejects? AI agents skip all of this, every time.
"I used wagmi hooks." Wrong hooks. Scaffold-ETH 2 wraps wagmi with useTransactor which waits for transaction confirmation — not just wallet signing. Raw wagmi's writeContractAsync resolves the moment the user clicks Confirm in MetaMask, BEFORE the tx is mined. Your button re-enables while the transaction is still pending.
"I showed the address." As raw hex? That's not showing it. gives you ENS resolution, blockie avatars, copy-to-clipboard, and block explorer links. Raw 0x1234...5678 is unacceptable.
가장 일반적인 AI 에이전트 UI 버그를 방지하는 Ethereum dApp용 프런트엔드 UX 규칙입니다. 온체인 버튼, 토큰 승인 흐름, 주소 표시, USD 값, RPC 구성 및 사전 게시 메타데이터에 대한 필수 패턴입니다. Scaffold-ETH 2를 기반으로 구축되었지만 패턴은 모든 Ethereum 프런트엔드에 적용됩니다. dApp 프런트엔드를 구축할 때 사용하세요. 출처: austintgriffith/ethskills.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/austintgriffith/ethskills --skill frontend-ux가장 일반적인 AI 에이전트 UI 버그를 방지하는 Ethereum dApp용 프런트엔드 UX 규칙입니다. 온체인 버튼, 토큰 승인 흐름, 주소 표시, USD 값, RPC 구성 및 사전 게시 메타데이터에 대한 필수 패턴입니다. Scaffold-ETH 2를 기반으로 구축되었지만 패턴은 모든 Ethereum 프런트엔드에 적용됩니다. dApp 프런트엔드를 구축할 때 사용하세요. 출처: austintgriffith/ethskills.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/austintgriffith/ethskills --skill frontend-ux 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/austintgriffith/ethskills