Caffeine apps are not limited to what ships with the default stack. The AI can pull in libraries from the wider npm and Motoko ecosystems, and a set of built-in skills tells it how to use specific capabilities well. This article explains what that means in practice.
npm packages
The frontend of every Caffeine app is built with React and TypeScript. The AI can install packages from npm — the JavaScript ecosystem that powers most of the web's frontend development — to give your app capabilities that are not in the core stack.
You do not need to know specific package names. Describe what you want and the AI will choose and install the right library:
- "Add a rich text editor where users can format posts with bold, italic, and bullet lists"
- "Build a dashboard with line charts and bar charts showing monthly sales"
- "Make the cards on the board page drag and drop so users can reorder them"
- "Add a PDF export button that lets users download the invoice as a PDF"
Some examples of what npm packages enable:
| Category | What you can build |
|---|---|
| Rich text editing | Document editors, blog post editors, comment boxes with formatting |
| Data visualization | Line charts, bar charts, pie charts, heatmaps, dashboards |
| Mapping | Interactive maps with pins, routes, and region overlays |
| Drag and drop | Kanban boards, sortable lists, reorderable galleries |
| 3D graphics | 3D product viewers, game environments, interactive visualizations |
| Audio playback | Music players, podcast apps, sound effect triggers |
| Date and time | Calendar pickers, scheduling tools, countdown timers |
| PDF generation | Invoice exporters, report generators, document builders |
Motoko packages (mops)
The backend of every Caffeine app is written in Motoko. The AI can install packages from mops — the Motoko package registry — to add backend functionality that goes beyond the core language library.
Again, you do not need to know package names. Describe the backend behavior you want:
- "The backend should call an external weather API every hour and store the results"
- "Add role-based access — admins can delete posts, regular users can only edit their own"
- "Accept Stripe payments and unlock premium content for paying users"
Caffeine maintains its own set of mops packages that power the platform's built-in integrations. These are used automatically when you ask for features like payments, file storage, or email. Community-published packages from the mops registry can also be pulled in for general Motoko utilities such as advanced data structures, date and time handling, and text processing.
Skills
A skill is an instruction file that teaches Caffeine's AI agents how to use a specific capability correctly. When the AI builds a feature that requires a particular library or integration, it loads the relevant skill — which tells it which packages to install, how to structure the code, what patterns to follow, and how to recover from common errors.
Skills are what allow new capabilities to scale cleanly. Adding a feature like payments or camera access does not require custom logic wired deep into the build pipeline — it is a skill file paired with a published package. The skill gives the AI the knowledge it needs to use the package well.
Extension skills
These skills add specific capabilities to your app. Ask for them by describing what you want to build.
Stripe payments — Accept credit and debit card payments in your app. The AI sets up checkout sessions, handles payment confirmation, and can gate content or features behind a completed payment. Requires a Stripe account and API keys.
Camera — Access the device camera to capture photos or video. Useful for profile photo uploads, document scanning, inspection tools, or any feature that needs an image taken in the moment.
QR code scanning — Scan QR codes using the device camera, and generate QR codes for display. Useful for event check-in, product lookups, ticketing, or sharing links.
Authorization — Role-based access control (RBAC) for your app. Define roles such as admin, moderator, and user, and control which actions each role can perform. The foundation for most access-controlled apps.
Invite links and RSVP — Let guests submit responses or fill out forms without creating an account, while admins can view and manage submissions after logging in. Good for event RSVPs, waitlists, and survey-style intake forms.
User approval — Admin-controlled access where new users are placed in a pending state and must be approved before they can use the app. Useful for private communities, internal tools, or beta programs.
Object storage — Store and serve large files — images, videos, documents — beyond the limits of the canister itself. The AI wires up upload, storage, and retrieval so users can manage files directly in your app.
HTTP outcalls — Make HTTP requests from your app's backend canister to external APIs and services. Used to connect your backend to webhooks, third-party data sources, and external platforms.
Email — Send transactional emails, run marketing newsletters, add email verification to your user flow, and send calendar invitations. See Email Sending for full details.
Build quality skills
These skills are used internally by the AI during the build process and are not something you invoke directly. They shape how the AI works across all projects.
2D games — Guidelines for building Canvas-based browser games: Snake, Tetris, Pong, puzzle games, and other arcade-style experiences using the Canvas API and requestAnimationFrame.
3D games and graphics — Guidelines for building WebGL experiences using React Three Fiber and Three.js, including physics simulation with @react-three/cannon and interaction through @react-three/drei.
Accessible UI — Standards and patterns for keyboard navigation, screen reader compatibility, focus management, and color contrast — applied automatically when the AI builds interface components.
UI quality and polish — Criteria the AI uses when reviewing and refining the interface: spacing consistency, visual hierarchy, interaction feedback, and overall finish.
Visual testing — Playwright-based visual QA that the AI runs during builds to catch blank screens, broken layouts, missing design tokens, and console errors before reporting the build as complete.