fix agent
This commit is contained in:
johba
parent
cbf5ce0733
commit
f3fb0f142a
9 changed files with 173 additions and 432 deletions
|
|
@ -1,118 +1,43 @@
|
|||
# Landing Interface - CLAUDE.md
|
||||
# Landing Interface - Agent Guide
|
||||
|
||||
Vue 3 + Vite application serving as the main interface for KRAIKEN protocol.
|
||||
Vue 3 + Vite application that delivers the public marketing site and forthcoming staking UI.
|
||||
|
||||
## Technology Stack
|
||||
## Technology Snapshot
|
||||
- Vue 3 (Composition API) with TypeScript and Vite toolchain
|
||||
- Vue Router for multi-view navigation
|
||||
- Sass-based design system with custom typography
|
||||
|
||||
- **Vue 3** (Composition API)
|
||||
- **TypeScript** - Type-safe development
|
||||
- **Vite** - Fast build tooling
|
||||
- **Vue Router** - Client-side routing
|
||||
- **Sass** - Advanced styling
|
||||
## Key Views & Components
|
||||
- `HomeView.vue` - Launch countdown, feature overview, and staking CTA
|
||||
- `DocsView.vue` - Documentation portal with responsive navigation and generated table of contents
|
||||
- Layout components (`KNavbar.vue`, `KFooter.vue`, `LeftRightComponent.vue`) manage shared chrome
|
||||
- UI components (`KButton.vue`, `Countdown.vue`, `SocialButton.vue`, icon set) supply reusable primitives
|
||||
|
||||
## Architecture
|
||||
## Design Notes
|
||||
- Dark theme palette: primary `#07111B`, accent `#9667BE`
|
||||
- Mobile-first breakpoints at 768px drive layout shifts and slide-out navigation
|
||||
- Motion relies on CSS transitions to keep runtime costs low
|
||||
|
||||
### Views
|
||||
## Development Workflow
|
||||
- Boot the full stack with `nohup ./scripts/local_env.sh start &`; the script handles landing dev server wiring.
|
||||
- Use local package scripts for targeted tasks:
|
||||
- `npm install`
|
||||
- `npm run build`
|
||||
- `npm run preview`
|
||||
- `npm run type-check`
|
||||
- Deployments assume hash-based routing and the Vite `base` setting configured for static hosting.
|
||||
|
||||
**HomeView.vue** - Landing page
|
||||
- Launch countdown timer
|
||||
- Project introduction
|
||||
- Feature highlights
|
||||
- Call-to-action for staking
|
||||
## Upcoming Integrations
|
||||
- Wallet connection with Base network switching
|
||||
- Staking dashboard that reuses shared helpers from `kraiken-lib`
|
||||
- Data visualisations sourced from the Ponder GraphQL API
|
||||
|
||||
**DocsView.vue** - Documentation portal
|
||||
- Comprehensive protocol documentation
|
||||
- Auto-generated table of contents
|
||||
- Mobile-responsive navigation
|
||||
- Sections: Introduction, Liquidity, AI Agent, Tokenomics, Staking, FAQ
|
||||
|
||||
### Key Components
|
||||
|
||||
**Layout Components**:
|
||||
- `KNavbar.vue` - Main navigation with scroll effects
|
||||
- `KFooter.vue` - Site footer
|
||||
- `LeftRightComponent.vue` - Content layout helper
|
||||
|
||||
**UI Components**:
|
||||
- `KButton.vue` - Reusable button with hover states
|
||||
- `Countdown.vue` - Launch countdown display
|
||||
- `SocialButton.vue` - Social media links
|
||||
- `NavItem.vue` - Navigation menu items
|
||||
|
||||
**Icons** (`components/icons/`):
|
||||
- Custom SVG icons for UI elements
|
||||
- Social media icons (Twitter, Discord, Telegram)
|
||||
|
||||
## Styling
|
||||
|
||||
### Design System
|
||||
- **Primary Color**: #07111B (deep ocean)
|
||||
- **Accent**: #9667BE (purple)
|
||||
- **Background**: Dark theme throughout
|
||||
- **Typography**: Custom fonts (Audiowide, DM Sans, Orbitron)
|
||||
|
||||
### Responsive Design
|
||||
- Mobile-first approach
|
||||
- Breakpoint: 768px
|
||||
- Slide-out mobile navigation
|
||||
- Optimized images for different screen sizes
|
||||
|
||||
## Development Commands
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Start development server
|
||||
npm run dev
|
||||
|
||||
# Build for production
|
||||
npm run build
|
||||
|
||||
# Preview production build
|
||||
npm run preview
|
||||
|
||||
# Type checking
|
||||
npm run type-check
|
||||
```
|
||||
|
||||
## Deployment
|
||||
|
||||
Configured for GitHub Pages:
|
||||
- Hash-based routing for compatibility
|
||||
- Base URL configuration in vite.config.ts
|
||||
- Assets optimized for CDN delivery
|
||||
|
||||
## Future Integrations
|
||||
|
||||
### Wallet Connection (Planned)
|
||||
- Web3 wallet integration
|
||||
- Network switching to Base
|
||||
- Transaction signing
|
||||
|
||||
### Staking Interface (Planned)
|
||||
- Position management
|
||||
- Tax rate adjustment
|
||||
- Real-time position monitoring
|
||||
- Snatching interface
|
||||
|
||||
### Data Visualization (Planned)
|
||||
- Protocol metrics dashboard
|
||||
- Liquidity depth charts
|
||||
- Staking statistics
|
||||
|
||||
## Code Quality Guidelines
|
||||
|
||||
- Use Composition API for all components
|
||||
- Leverage TypeScript for type safety
|
||||
- Keep components small and focused
|
||||
- Use Sass variables for consistent theming
|
||||
- Follow Vue 3 best practices
|
||||
|
||||
## Performance Optimization
|
||||
## Quality Guidelines
|
||||
- Favour Composition API and strongly typed props/emit definitions
|
||||
- Keep components focused; push shared logic into composables when possible
|
||||
- Use Sass variables and mixins from the design system for consistent styling
|
||||
|
||||
## Performance Tips
|
||||
- Lazy load route components
|
||||
- Optimize images (WebP format)
|
||||
- Minimize bundle size
|
||||
- Use CSS animations over JavaScript
|
||||
- Implement proper caching strategies
|
||||
- Optimise imagery (WebP) and leverage Vite asset handling
|
||||
- Prefer CSS animations to JavaScript when animating UI elements
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue