Expert guidance for developing and maintaining the PPTist Vue 3 presentation editor. Covers architecture, commands, state management, and development conventions.
Expert guidance for working with PPTist, a web-based PowerPoint-like presentation editor built with Vue 3, TypeScript, and Vite.
PPTist is a feature-rich presentation editor with desktop, mobile, and presentation modes. It uses ProseMirror for rich text editing, IndexedDB for data persistence, and supports multiple element types (text, images, shapes, charts, tables, media, LaTeX).
1. Install dependencies: `npm install`
2. Start development server: `npm run dev` (opens at `http://127.0.0.1:5173/`)
3. For production build: `npm run build` (includes type-check)
1. **Editor** (`src/views/Editor/`): Main desktop editing interface
2. **Screen** (`src/views/Screen/`): Presentation/slideshow mode
3. **Mobile** (`src/views/Mobile/`): Mobile-optimized editor and player
1. Mock data loaded from `src/services/` on init
2. Slides stored in Pinia + persisted to IndexedDB
3. Snapshot system for undo/redo
4. Export supports PPTX, PDF, images, JSON
1. Use Vue 3 Composition API patterns
2. Strict TypeScript with proper prop/emit typing
3. Follow existing naming conventions
4. Validate props and type emissions
1. Use Pinia stores for global state
2. Minimize component-local state
3. Use `storeToRefs()` for reactive store properties
4. Implement proper store actions for mutations
1. Use SCSS variables for consistent theming
2. Follow existing component patterns
3. Ensure mobile responsiveness
4. Use CSS Grid/Flexbox for layouts
1. Virtualize elements for large presentations
2. Use computed properties for expensive calculations
3. Optimize canvas rendering
4. Implement cleanup in unmount hooks
1. Define type in `src/types/slides.ts`
2. Create element component in `src/views/Editor/Canvas/`
3. Add toolbar panel in `src/views/Editor/Toolbar/`
4. Implement operations in hooks
5. Update serialization/export logic
1. Check `src/views/Editor/Canvas/` for rendering logic
2. Update hooks in `src/hooks/` for operations
3. Test drag/resize/rotate/align interactions
4. Verify mobile compatibility
1. Check Pinia stores in Vue DevTools
2. Inspect IndexedDB in browser DevTools
3. Review snapshot history in `useSnapshotStore`
4. Use console logging in store actions
```typescript
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
const slidesStore = useSlidesStore()
const { slides, currentSlide } = storeToRefs(slidesStore)
// Actions
slidesStore.addSlide(newSlide)
slidesStore.updateElement(elementId, changes)
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/pptist-development-guide/raw