A modern, full-stack MVP web application designed to pair with a soft-robotic glove for hand injury recovery and rehabilitation.
- Resistive Mode: Strength training and injury prevention
- Assistive Mode: Rehabilitation and tendon support
- Performance Assist Mode: Real-time in-game support
Each plan includes detailed information about:
- Purpose and target muscles
- Use cases and training schedules
- Mock glove connection with signal output
- Beautiful card-based UI with smooth animations
- AI-powered chat interface using Gemini 2.0 Flash
- Natural language injury diagnosis
- Intelligent plan recommendations
- Real-time conversation with context awareness
- 3D hand preview placeholder for future enhancements
- Connection status indicator
- Mock signal output with JSON payload
- Signal console for debugging
- Auto-disconnect simulation
- Visual feedback and animations
- Node.js 18+
- npm or yarn
-
Clone the repository: ```bash git clone cd SkeletonApp ```
-
Install dependencies: ```bash npm install ```
-
Create a `.env.local` file (already configured): ```env NEXT_PUBLIC_GEMINI_API_KEY=your_api_key_here ```
-
Run the development server: ```bash npm run dev ```
-
Open http://localhost:3000 in your browser.
- Background:
#0f0f0fto#1a1a1a - Foreground:
#e5e5e5 - Accent Cyan:
#06b6d4 - Accent Blue:
#3b82f6 - Card:
#1f1f1f/#2a2a2a(hover) - Border:
#333333 - Muted Text:
#a3a3a3
- Font: Inter (Google Fonts)
- Weights: 300, 400, 500, 600, 700
- Smooth transitions (200-300ms)
- Framer Motion for complex animations
- Pulse effects for connections
- Fade-in effects for content
``` SkeletonApp/ ├── app/ # Next.js App Router pages │ ├── plans/ # Training plans page │ ├── skelly/ # AI chat interface │ ├── settings/ # Settings page │ ├── layout.tsx # Root layout │ └── globals.css # Global styles ├── components/ # React components │ ├── Navigation.tsx # Top navbar │ ├── GloveStatus.tsx # Connection indicator │ ├── PlanCard.tsx # Plan display cards │ ├── PlanDetail.tsx # Plan detail modal │ ├── ChatInterface.tsx # Chat UI │ ├── MessageBubble.tsx # Chat messages │ └── ConsolePanel.tsx # Signal output ├── lib/ # Utility functions │ ├── planData.ts # Hardcoded training data │ ├── mockGlove.ts # Mock glove signals │ └── skellyAI.ts # Gemini AI integration ├── types/ # TypeScript definitions │ └── index.ts └── public/ # Static assets ```
- Framework: Next.js 15 (App Router)
- Language: TypeScript 5.6
- Styling: TailwindCSS 3.4
- Animations: Framer Motion 11
- Icons: Lucide React
- AI: Google Gemini 2.0 Flash
- UI Components: Headless UI
Hardcoded plan data with three modes:
- Each plan has detailed descriptions
- Mock signal generation on connection
- Visual feedback and animations
- Deep linking support from chat
- Powered by Gemini 2.0 Flash API
- Context-aware conversations
- Keyword fallback system
- Plan recommendations with direct links
- Real-time typing indicators
- Simulated Bluetooth connection
- JSON signal output format
- Auto-disconnect after 5 seconds
- Console panel for debugging
- Plans (
/plans) - Main view with all training modes - Skelly (
/skelly) - AI chat assistant with 3D preview - Settings (
/settings) - Configuration placeholder
```env NEXT_PUBLIC_GEMINI_API_KEY=your_gemini_api_key ```
- Mobile: Single column layout, bottom navigation
- Tablet: Grid layout for plans, collapsible chat
- Desktop: Full multi-column experience
The design follows the modern, minimal aesthetic of Cursor and ChatGPT:
- Dark mode only
- Smooth, fluid animations
- High contrast for accessibility
- Professional futuristic look
- Rounded corners and soft shadows
- Real Bluetooth glove integration
- Interactive 3D hand model
- User authentication and profiles
- Training session history
- Progress tracking and analytics
- Real-time force feedback visualization
- Mobile app (React Native)
This project is part of an MVP for rehabilitation technology.
For questions or support, please contact the development team.
Built with ❤️ for hand rehabilitation