Agent skill
offline-first
Local storage, data sync, and conflict resolution for offline-capable apps.
Install this agent skill to your Project
npx add-skill https://github.com/timequity/plugins/tree/main/vibe-coder/skills/mobile/offline-first
SKILL.md
Offline-First
Storage Options
| Option | Use Case |
|---|---|
| AsyncStorage | Simple key-value |
| MMKV | Fast key-value |
| SQLite | Complex queries |
| WatermelonDB | Large datasets, sync |
MMKV (Recommended)
import { MMKV } from 'react-native-mmkv';
const storage = new MMKV();
// Store
storage.set('user', JSON.stringify(user));
storage.set('token', 'abc123');
// Retrieve
const user = JSON.parse(storage.getString('user') || '{}');
const token = storage.getString('token');
// Delete
storage.delete('token');
Sync Strategy
Optimistic Updates
async function updateItem(id: string, data: Partial<Item>) {
// 1. Update local immediately
await localDb.update(id, { ...data, _synced: false });
// 2. Update UI
queryClient.setQueryData(['item', id], (old) => ({
...old,
...data,
}));
// 3. Sync to server
try {
await api.updateItem(id, data);
await localDb.update(id, { _synced: true });
} catch (error) {
// Queue for retry
await syncQueue.add({ type: 'update', id, data });
}
}
Background Sync
import NetInfo from '@react-native-community/netinfo';
NetInfo.addEventListener((state) => {
if (state.isConnected) {
syncQueue.processAll();
}
});
Conflict Resolution
// Last-write-wins
if (serverItem.updatedAt > localItem.updatedAt) {
await localDb.update(id, serverItem);
} else {
await api.updateItem(id, localItem);
}
// Or: Manual resolution
if (hasConflict) {
showConflictResolver(serverItem, localItem);
}
Network Status
function useNetworkStatus() {
const [isOnline, setIsOnline] = useState(true);
useEffect(() => {
return NetInfo.addEventListener((state) => {
setIsOnline(state.isConnected ?? false);
});
}, []);
return isOnline;
}
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
claude-code-course
Learn Claude Code in 5 hands-on lessons. From basics to building applications. Use when: user wants to learn Claude Code, asks "how do I...", or is new. Triggers: "learn", "teach me", "how does this work", "I'm new", "course".
foundations
Claude Code basics for new users. Covers essential concepts and commands. Use when: user is new to Claude Code or routed here by learning-path assessment.
advanced
Claude Code mastery for power users. Build agents, MCP servers, publish plugins. Use when: user wants to create agents, build integrations, or publish plugins.
lessons
Lesson content for Claude Code Course. Use when: loading lesson content. Internal skill - contains lesson files.
intermediate
Claude Code customization for comfortable users. Covers skills, commands, MCP, hooks. Use when: user knows basics and wants to customize Claude Code.
course-help
Help and navigation for Claude Code Course. Use when: user asks about the course, lessons, or progress. Triggers: "help", "course help", "what lessons", "my progress".
Didn't find tool you were looking for?