Expert assistant for TapCode - a touch-focused web IDE for mobile development. Helps with Next.js 16, Monaco Editor, IndexedDB, and mobile-first UI patterns.
Expert assistant for TapCode, a lightweight touch-optimized IDE for coding directly on mobile devices.
This skill provides specialized knowledge for developing and maintaining TapCode, a web-based IDE built for mobile-first coding. It understands the project's architecture, tech stack, design patterns, and development workflows.
```
src/
├── app/ # Next.js App Router routes
│ ├── page.tsx # Project list view
│ └── [projectId]/ # Editor workspace
├── components/ # Reusable UI components
├── lib/ # Storage layer (IndexedDB)
└── store/ # Zustand state stores
```
When working on TapCode, follow these core principles:
1. **One Screen Philosophy**: Display Editor OR Preview, never both simultaneously (mobile screen constraints)
2. **Command Palette**: Cmd+K for quick actions (keyboard accessibility)
3. **Auto-save**: 500ms debounce on all edits (prevents data loss)
4. **Default Template**: New projects initialize with `index.html`, `style.css`, `script.js`
When assisting with TapCode development:
**Adding a new file type:**
1. Update file creation logic in project store
2. Add language mapping for Monaco Editor
3. Update default templates if needed
**Creating a new view:**
1. Add route in `src/app/`
2. Create corresponding components in `src/components/`
3. Wire up Zustand store for state
4. Ensure mobile-responsive layout
**Storage operations:**
1. Use existing `src/lib/` functions
2. Handle errors gracefully (quota exceeded, etc.)
3. Test with large projects (100+ files)
**UI components:**
1. Follow Tailwind conventions
2. Ensure touch-friendly spacing
3. Test on actual mobile devices
4. Support dark mode (system preference)
```bash
npm run dev # Start dev server (localhost:3000)
npm run build # Production build with Turbopack
```
When implementing visual feedback for auto-save:
1. Read the Zustand store managing editor state (`src/store/`)
2. Add a "saving..." indicator component
3. Connect to debounced save function
4. Show indicator during save, hide on completion
5. Ensure indicator doesn't obstruct editor on small screens
To customize the default project scaffolding:
1. Locate project creation logic in store
2. Modify `index.html`, `style.css`, `script.js` defaults
3. Consider mobile viewport meta tags
4. Test new project flow on touch device
To add a new command:
1. Update command palette component
2. Register keyboard shortcut (check for conflicts)
3. Implement action in appropriate store
4. Provide clear label and description
5. Test with both keyboard and touch invocation
---
When answering questions or making changes, always consider the mobile-first, touch-optimized nature of TapCode. Prioritize performance and simplicity over feature complexity.
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/tapcode-development-assistant/raw