Full-Stack Development
Context for coordinating changes across contracts, frontend, and shared packages.
When This Skill Activates
- Changes spanning contracts AND frontend
- SDK or shared type updates
- Deployment artifact synchronization
- ABI changes affecting frontend
- End-to-end feature implementation
Scope
- Smart contracts (Solidity, Anchor)
- Frontend applications (React, Next.js)
- Shared SDKs and type packages
- Deployment configurations
Key Practices
- Coordinate changes across contracts and frontend
- Update SDK when contract interfaces change
- Run both contract tests AND frontend build
- Sync deployment artifacts after contract changes
Configuration Guidelines
- Use config files for all UI text and constants
- Never hardcode strings in components
- Validate configs before build
File Naming & Versioning
- Canonical Names Only: Use
Market.sol, NOT MarketV10.sol
- Single Active Version: Never keep
V1.ts and V2.ts side-by-side
- Archiving: Move old code to
archive/ or trust Git history
Common Workflows
After Contract Changes
# Build and test contracts
forge build && forge test
# Sync ABIs to frontend
./sync-deployments.sh # or equivalent
# Rebuild frontend
cd apps/web && npm run build
After Frontend Changes
cd apps/web
npm run build
npm run dev
Full Build
pnpm install
pnpm build
Key Integration Points
- SDK package - ABIs exported from contracts
- Deployment configs - Contract addresses per chain
- Shared types - TypeScript types matching contract structs
Sync Checklist
After contract changes:
Related Skills
solidity-dev - Contract development, gas optimization, security scanningfrontend-dev - UI implementation and styling
