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/vibe-coder/tree/main/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.
mvp-help
Help and documentation for Idea to MVP plugin. Use when: user asks about building MVPs, vibe coding, or available commands. Triggers: "help", "what can you do", "mvp help", "how to build".
verification-gate
Hidden quality gate that runs before showing "Done!" to user - ensures all tests pass, build succeeds, and requirements met before claiming completion
brainstorming
Refine ideas into detailed designs through Socratic dialogue. Use when: user has rough idea, needs to clarify requirements, explore approaches. Triggers: "brainstorm", "discuss idea", "I'm thinking about", "what if", "help me think through", "explore options", "/brainstorm".
subagent-creator
Guide for creating effective subagents (custom agents). Use when users want to create a new subagent that can be dispatched via Task tool for autonomous work. Covers frontmatter fields (name, description, tools, model, permissionMode, skills), prompt design, and when to use subagents vs skills.
backend-rust
Modern Rust backend with Axum, SQLx, tokio + CI/CD automation. Use when: building Rust APIs, high-performance services, or needing build/test/lint/audit automation. Triggers: "axum", "rust backend", "rust api", "sqlx", "tokio", "cargo build", "cargo test", "clippy", "rustfmt", "cargo-audit", "cross-compile", "rust ci", "release build", "rust security", "shuttle", "actix".
test-driven-development
Write failing test first, then minimal code to pass. Red-Green-Refactor cycle. Use when: implementing features, fixing bugs, refactoring code. Triggers: "implement", "add feature", "fix bug", "tdd", "test first", "write tests", "test-driven".
Didn't find tool you were looking for?