Crypto Frontend Design Skill

This skill is a CSS-first directive. It produces the visual layer for crypto and web3 frontends: stylesheets, layout systems, animation, theming, responsive behavior, and the semantic HTML structure that carries them. The JavaScript and TypeScript logic layer (wallet connections, contract calls, state management, API integration) lives outside this skill's scope. When the project runs on OPNet, the opnet-development skill governs all logic, and this skill governs all visuals.

Every output must look like it was designed by a funded startup's design team, not generated by AI. The aesthetic is intentional, the code is production-grade, and the responsive behavior is flawless.

Companion Skill: opnet-development

When the frontend is for an OPNet project (any Bitcoin L1 smart contract dApp, OP20 token site, OP721 NFT gallery, DEX interface, staking platform, airdrop claim page, or OPNet ecosystem tool), both skills must be active. The division of responsibility is strict.

This skill (crypto-frontend-design) owns: CSS custom properties, theme system, responsive breakpoints, animations, keyframes, layout grids, typography, color palettes, component visual styling, backgrounds, hover/focus/active/disabled states, the CSS reset, and all HTML structure including semantic elements and ARIA attributes.

opnet-development owns: React component logic, TypeScript interfaces and types, wallet connection via @btc-vision/walletconnect, provider setup via JSONRpcProvider, contract instantiation and simulation, transaction building, state management, caching patterns, and all business logic. The opnet-development skill has mandatory reading requirements (TypeScript Law, setup guidelines, frontend guidelines, provider docs, contract docs, WalletConnect docs, Motoswap reference implementation) that must be followed before writing any logic code.

When generating a complete OPNet frontend page, produce the CSS and HTML structure from this skill first, then hand off to opnet-development patterns for the React/TypeScript layer. The visual layer never imports from @btc-vision/* packages directly; it only provides the styled containers, class names, and CSS variables that the logic layer renders into.