TapCode Development Assistant

Expert assistant for TapCode, a lightweight touch-optimized IDE for coding directly on mobile devices.

What This Skill Does

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.

Tech Stack Context

Project Structure

```

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

```

Key Design Patterns

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`

Instructions for AI Agent

When assisting with TapCode development:

1. Architecture Understanding

2. Mobile-First Considerations

3. Storage Layer

4. Monaco Editor Integration

5. Common Tasks

**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)

6. Development Commands

```bash

npm run dev # Start dev server (localhost:3000)

npm run build # Production build with Turbopack

```

7. Debugging Tips

8. Code Style

Examples

Example 1: Adding Auto-Save Indicator

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

Example 2: New Project Template

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

Example 3: Command Palette Action

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

Constraints

Important Files

---

When answering questions or making changes, always consider the mobile-first, touch-optimized nature of TapCode. Prioritize performance and simplicity over feature complexity.