app-data-flowlisted

# App Data Flow ## Purpose Apps with 10 items feel fine. Apps with 500 items need search, filters, sort, and smart rendering. This skill adds all of it with ready-to-use code. ## Step 1: Search (instant, fuzzy, highlight) ```javascript /** * Instant search with debounce + result highlighting * Works on any array of objects */ function createSearch(items, searchFields, renderFn) { let timeout; return function onSearch(query) { clearTimeout(timeout); timeout = setTimeout(() => { if (!query.trim()) { renderFn(items); return; } const q = query.toLowerCase().trim(); const words = q.split(/\s+/); const results = items .map(item => { // Score: how many words match, and where let score = 0; for (const word of words) { for (const field of searchFields) { const val = String(item[field] || '').toLowerCase(); if (val === word) score += 10; // exact match else if (val.startsWith(word)) score += 5; // starts with else if (val.includes(word)) score += 2; // contains } } return { item, score }; }) .filter(r => r.score > 0) .sort((a, b) => b.score - a.score) .map(r => r.item); renderFn(results, query); }, 150); // debounce 150ms }; } /** * Highlight matching text in results */ function highlightMatch(text, query) { if (!query) return text; const rege