agy-superpowers 5.1.1 → 5.1.3

package/template/agent/.shared/mobile-uiux-promax/data/stacks/react-native.csv

@@ -0,0 +1,20 @@
+Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+Performance,Use FlatList instead of ScrollView for long lists,ScrollView renders all items upfront causing memory issues and slow initial render with 50+ items,"Use FlatList or SectionList; provide keyExtractor; set initialNumToRender=10; windowSize=5 for large lists","Use ScrollView.children=[...1000items]; render all items unconditionally","{<FlatList data={items} keyExtractor={i=>i.id} renderItem={({item})=><Row item={item}/>} initialNumToRender={10}/>}","<ScrollView>{items.map(i=><Row key={i.id} item={i}/>)}</ScrollView>",Critical,https://reactnative.dev/docs/flatlist
+Performance,Memoize expensive list row components,Every parent re-render re-creates child components in list; without memo rows re-render even when their data hasn't changed,"Wrap row component in React.memo(); use useCallback for callbacks; avoid passing new object references as props on each render","Pass inline arrow functions as event handlers directly from parent to list item without memoization","const Row = React.memo(({ item, onPress }) => <Pressable onPress={onPress}>{item.title}</Pressable>)","const Row = ({ item, onPress }) => <Pressable onPress={() => doSomething(item)}>{item.title}</Pressable>",High,https://react.dev/reference/react/memo
+Performance,Avoid complex computations in render path,Expensive calculations in component body or render function run on every re-render degrading animation and UI smoothness,"Use useMemo for expensive derived data; move static data outside component; useCallback for handlers; avoid creating Date/Objects inline in render","Filtering/sorting large arrays inline in JSX; creating new object literals as style props on every render","const sorted = useMemo(() => items.sort((a,b)=>b.date-a.date), [items])","const render = () => <List data={items.sort((a,b)=>b.date-a.date)} />",High,https://react.dev/reference/react/useMemo
+Navigation,React Navigation Stack: configure screen options correctly,Screen options misconfiguration causes visual glitches incorrect headers and broken transitions,"Set screenOptions on navigator for defaults; per-screen options.title; headerBackTitle for iOS back label; headerShown:false for screens with custom header","Mixing navigation v5 and v6 APIs; hardcoding screen dimensions for navigation bar height","<Stack.Navigator screenOptions={{headerStyle:{backgroundColor:'#fff'},headerTintColor:'#000'}}><Stack.Screen name='Home' options={{title:'Feed'}}/></Stack.Navigator>","<Stack.Navigator><Stack.Screen name='Home' component={Home} options={{headerBackTitle:'Back was here'}}/></Stack.Navigator>",High,https://reactnavigation.org/docs/stack-navigator
+Navigation,Use Linking API for deep links,Deep links require platform configuration plus React Navigation Linking setup for URL-to-screen routing,"Define linkingConfig with prefixes and screens map; test with adb shell am start -a android.intent.action.VIEW -d yourapp://path; test iOS with xcrun simctl openurl","Manually parse URL strings in useEffect; use navigation.navigate without link structure","const linking = { prefixes: ['myapp://'], screens: { Home: 'home', Profile: 'profile/:userId' } }; <NavigationContainer linking={linking}>","useEffect(()=>{ const url = Linking.getInitialURL(); navigate based on custom URL parser })",Medium,https://reactnavigation.org/docs/deep-linking
+Layout,Use SafeAreaView from react-native-safe-area-context,The built-in SafeAreaView from RN core is unreliable and doesn't handle all device notch variants; always use the context version,"Install react-native-safe-area-context; wrap app in SafeAreaProvider; use useSafeAreaInsets() or SafeAreaView","Use import {SafeAreaView} from 'react-native' (unreliable); hardcode padding values for notch","import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'; const {top} = useSafeAreaInsets();","import { SafeAreaView } from 'react-native'; // Don't - unreliable",Critical,https://github.com/th3rdwave/react-native-safe-area-context
+Layout,Use StyleSheet.create for styles,StyleSheet.create validates style fields and optimizes style objects by ID rather than object reference on each render,Define all styles in StyleSheet.create at module level; reference by name; combine with array style prop for conditional styles,"Define styles as plain objects or inline in JSX; use dynamic StyleSheet.create inside render function","const styles = StyleSheet.create({ container: { flex: 1, padding: 16, backgroundColor: '#fff' } })","const styles = { container: { flex: 1, padding: 16 } }; // No StyleSheet.create",Medium,https://reactnative.dev/docs/stylesheet
+Layout,Handle keyboard with KeyboardAvoidingView correctly,Text inputs behind the keyboard need the view to adjust; wrong behavior prop causes incorrect or no adjustment,"Use behavior='padding' on iOS; behavior='height' on Android; wrap only the screen portion below the nav bar","Wrap entire screen including navigation bar; use fixed bottom padding instead; forget to set behavior prop","<KeyboardAvoidingView behavior={Platform.OS==='ios'?'padding':'height'} style={{flex:1}}><ScrollView>{inputs}</ScrollView></KeyboardAvoidingView>","<KeyboardAvoidingView><View style={{paddingBottom:300}}>{inputs}</View></KeyboardAvoidingView>",High,https://reactnative.dev/docs/keyboardavoidingview
+Styling,Use Platform.OS for platform-specific styles,iOS and Android have different visual conventions; forcing one style on both looks wrong or broken,"Use Platform.select() or Platform.OS===ios check for elevation vs shadow; font weights; subtle color differences","Use identical styles everywhere ignoring platform visual conventions; use Platform.OS inside render on hot path","const shadowStyle = Platform.select({ ios: { shadowColor:'#000', shadowOffset:{width:0,height:2}, shadowOpacity:0.1, shadowRadius:4 }, android: { elevation: 4 } })","const shadowStyle = { shadowColor:'#000', shadowOffset:{width:0,height:2}, shadowOpacity:0.1, elevation:4 } // mixed won't work on Android",High,https://reactnative.dev/docs/platform
+Accessibility,Add accessibilityLabel to all touchable elements without text,Icon buttons and image-only Pressables have no accessible name without an explicit label,"Add accessibilityLabel to every Pressable TouchableOpacity Image without visible text; accessibilityHint for less obvious actions","Rely on image alt text or assume screen reader extracts label from children icons","<Pressable accessibilityLabel='Add to cart' accessibilityRole='button' onPress={handleAdd}><Icon name='cart'/></Pressable>","<TouchableOpacity onPress={handleAdd}><Icon name='cart'/></TouchableOpacity> // No label",Critical,https://reactnative.dev/docs/accessibility
+Accessibility,Use accessibilityRole correctly,Role determines how screen reader announces and interacts with element; wrong role confuses users,"Use: button link text header image checkbox radio combobox; mark headings as header role; check for interactive elements","Default role='none' on Pressable (reads as 'button' anyway in some RN versions but inconsistent)","<Text accessibilityRole='header' style={styles.title}>Today's Tasks</Text>","<Text style={styles.title}>Today's Tasks</Text> // No heading role announced",High,https://reactnative.dev/docs/accessibility#accessibilityrole
+Images,Use FastImage for performant network images,React Native's built-in Image component doesn't cache disk-to-memory efficiently; large lists with network images stutter,"Install react-native-fast-image; use priority system; resizeMode cover or contain; provide default placeholder","Use Image for large lists with network content; fetch same URL multiple times without caching","<FastImage style={styles.avatar} source={{ uri: avatarUrl, priority: FastImage.priority.normal }} resizeMode={FastImage.resizeMode.cover}/>","<Image source={{ uri: avatarUrl }} style={styles.avatar} />  // No caching",High,https://github.com/DylanVann/react-native-fast-image
+Animation,Use Reanimated 2+ for performant animations,JS-thread animations (Animated API) block during heavy JS work; Reanimated runs on UI thread for smooth 60fps during JS busy periods,"Use reanimated2 useSharedValue useAnimatedStyle; keep animated values on UI thread; avoid runOnJS unless necessary","Use Animated.Value for complex gesture-driven animations; setValue in animation callbacks causing JS bounce","const opacity = useSharedValue(0); const animStyle = useAnimatedStyle(()=>({ opacity: withSpring(opacity.value) })); useEffect(()=>{opacity.value=1},[])","Animated.timing(opacityValue,{toValue:1,duration:300,useNativeDriver:true}).start() // RN Animated on JS thread",High,https://docs.swmansion.com/react-native-reanimated/
+Animation,Always use useNativeDriver for Animated API,useNativeDriver:true moves animation to native UI thread; false (default) runs on JS thread and jank occurs during JS processing,"Add useNativeDriver:true to every Animated timing/spring/decay; cannot use with layout properties (width height)","Forget useNativeDriver; use native driver with width/height/padding animations","Animated.timing(val, { toValue: 1, duration: 300, useNativeDriver: true }).start()","Animated.timing(val, { toValue: 1, duration: 300 }).start() // defaults to JS thread",Critical,https://reactnative.dev/docs/animations#using-the-native-driver
+State Management,Avoid passing setState down more than 2 levels,Prop drilling setState through 3+ component levels creates coupling and makes refactoring painful,"Use React Context for 2-3 component depth state; use Zustand/Jotai for global state; colocate state close to where it's used","Thread setState through 5+ levels of props; use global state for local component state","const CartContext = createContext(); export const useCart = () => useContext(CartContext); // Then wrap with <CartContext.Provider>","<A addToCart={addToCart}><B addToCart={addToCart}><C addToCart={addToCart}/></B></A>  // Drilling",Medium,https://react.dev/learn/passing-data-deeply-with-context
+Testing,Use React Native Testing Library for component tests,Direct testing of RN component instances is brittle; RNTL provides semantic user-centric query methods,"Use screen.getByRole(); screen.getByLabelText(); fireEvent.press(); waitFor for async; test behavior not implementation","Query by component name or index; test internal state; mock entire children components when not necessary","render(<LoginForm/>); const button = screen.getByRole('button', {name:'Sign In'}); fireEvent.press(button); await waitFor(()=>expect(screen.getByText('Welcome')).toBeTruthy())","const wrapper = shallow(<LoginForm/>); expect(wrapper.state('loading')).toBe(true)  // Enzyme testing internals",High,https://callstack.github.io/react-native-testing-library/
+Gestures,Use Gesture Handler for complex touch interactions,RN built-in touch events can't be easily composed or cancelled; gesture collisions and priority require Gesture Handler,"Use GestureDetector with Gesture.Pan().Tap().Simultaneous(); define gestureHandlerRootHOC at app root","Use PanResponder for complex gestures (callback hell); rely on onPress for multi-gesture interactions","const pan = Gesture.Pan().onUpdate(e=>{translateX.value=e.translationX}).runOnJS(true);<GestureDetector gesture={pan}><Animated.View style={animStyle}/></GestureDetector>","const panResponder = PanResponder.create({ onMoveShouldSetPanResponder:()=>true, onPanResponderMove:(e,gs)=>{...} })",High,https://docs.swmansion.com/react-native-gesture-handler/
+Platform,Wrap app root with proper providers,Missing providers cause runtime errors hooks returning undefined or missing context; order matters,"GestureHandlerRootView → NavigationContainer → SafeAreaProvider → ThemeProvider → YourApp; GestureHandlerRootView must be outermost","Put NavigationContainer inside GestureHandlerRootView incorrectly; forget SafeAreaProvider; multiple NavigationContainers","<GestureHandlerRootView style={{flex:1}}><SafeAreaProvider><NavigationContainer><App/></NavigationContainer></SafeAreaProvider></GestureHandlerRootView>","<NavigationContainer><GestureHandlerRootView><App/></GestureHandlerRootView></NavigationContainer>  // Wrong order",Critical,https://reactnative.dev/docs/getting-started
+Error Handling,Handle network errors in data fetching gracefully,Unhandled promise rejections and network errors cause silent failures or crashes; user sees blank screen,"Show error state UI; retry mechanism; network status awareness; use react-query or SWR for automatic retry","Ignore catch blocks; show nothing on network failure; crash on undefined data from failed fetch","const {data,error,isLoading} = useQuery({queryKey:['posts'],queryFn:fetchPosts}); if(error) return <ErrorView retry={refetch}/>;","fetch(url).then(res=>res.json()).then(setData) // No error handling - silent failure on network error",High,https://tanstack.com/query/latest

package/template/agent/.shared/mobile-uiux-promax/data/stacks/swiftui.csv

@@ -0,0 +1,18 @@
+Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+Performance,Prefer LazyVStack over VStack for long lists,VStack renders all children immediately into memory; LazyVStack only renders visible items and deallocs off-screen rows,"Use LazyVStack inside ScrollView for lists with 20+ items; use List for standard list UX (selection swipe); set pinnedViews for sticky headers","Use VStack.children with 100+ items; use ForEach inside VStack for dynamic content lists","ScrollView { LazyVStack(alignment: .leading, spacing: 0) { ForEach(items) { item in ItemRow(item: item) } } }","ScrollView { VStack { ForEach(items) { item in ItemRow(item: item) } } }  // All items built at once",Critical,https://developer.apple.com/documentation/swiftui/lazyvstack
+Performance,Keep view body computation minimal,SwiftUI calls body frequently for any state change anywhere in the subtree; heavy body computation causes dropped frames,"Extract sub-views into separate structs (each has its own rendering cycle); use @State with minimal scope; avoid side effects in body","Fetch data compute arrays sort/filter inside body computed property; make network calls in onAppear without async task","struct ItemRow: View { let item: Item; var body: some View { HStack { Text(item.title); Spacer(); Text(item.price) } } }  // Extracted = own rendering cycle","struct ContentView: View { var body: some View { let sorted = items.sorted(); return List(sorted) { ... } }  // sorted() runs every body call",High,https://developer.apple.com/documentation/swiftui/view
+Navigation,Use NavigationStack for navigation (iOS 16+),NavigationView is deprecated in iOS 16; NavigationStack provides type-safe programmatic navigation with NavigationPath,"Use NavigationStack with path binding for programmatic navigation; .navigationDestination(for:) for type-safe routing; NavigationSplitView for iPad","Use NavigationView (deprecated); present screens by binding showDetail without navigation stack path","@State private var path = NavigationPath(); NavigationStack(path: $path) { ContentView().navigationDestination(for: Item.self) { item in DetailView(item: item) } }","NavigationView { ContentView().navigationLink(destination: DetailView(), isActive: $show) }  // Deprecated",Critical,https://developer.apple.com/documentation/swiftui/navigationstack
+Navigation,Handle deep links via onOpenURL and .navigationDestination,SwiftUI handles deep links via the scene phase and URL opening; properly map URL to navigation state,"Use .onOpenURL modifier on root view; update NavigationPath based on URL; decode path parameters; test with Simulator > Device > Open URL","Rely on AppDelegate for URL handling when using SwiftUI scene lifecycle; ignore back stack considerations for deep links","ContentView().onOpenURL { url in if let itemId = parseItemId(from: url) { path.append(Item(id: itemId)) } }","func application(_ app: UIApplication, open url: URL, ...) { ... }  // UIKit pattern in SwiftUI app",High,https://developer.apple.com/documentation/swiftui/environmentvalues/openurl
+State,Use @StateObject for mutable reference types — not @ObservedObject,@ObservedObject recreates the object on parent rebuild losing state; @StateObject creates once and retains through re-renders,"Use @StateObject for ViewModels owned by the view; @ObservedObject for ViewModels passed in; @EnvironmentObject for deeply shared state","Use @ObservedObject for a ViewModel created in the view (recreated on every parent rebuild losing work)","@StateObject private var viewModel = HomeViewModel()  // Created once retained for view lifetime","@ObservedObject var viewModel = HomeViewModel()  // Recreated every parent rebuild — data lost",Critical,https://developer.apple.com/documentation/swiftui/stateobject
+State,Use @AppStorage for simple persisted settings,UserDefaults persistence usually requires boilerplate wrapper; @AppStorage ties directly to UserDefaults key with automatic observation,"@AppStorage for user preferences small settings; never for large data (use Core Data or files)","Use @AppStorage for URLs Data binary Data arrays; use for megabytes of data (use file storage instead)","@AppStorage('isDarkMode') private var isDarkMode: Bool = false; Toggle('Dark Mode', isOn: $isDarkMode)","UserDefaults.standard.set(isDarkMode, forKey:'isDarkMode')  // Manual boilerplate sync",Medium,https://developer.apple.com/documentation/swiftui/appstorage
+Layout,Use safeAreaInset for content adjacent to safe area boundaries,safeAreaInset adds content in the safe area without obscuring main content — perfect for persistent overlay bars,"Use .safeAreaInset(edge:.bottom) for floating bottom bars search bars or mini-players; doesn't require manual padding calc","Add hardcoded bottom padding to accommodate overlapping views; use ZStack with manual safe area calculation","VStack { MainContent() }.safeAreaInset(edge: .bottom) { MiniPlayerBar() }","ZStack { MainContent().padding(.bottom, 80); VStack { Spacer(); MiniPlayerBar() } }  // Manual and fragile",High,https://developer.apple.com/documentation/swiftui/view/safeareainset(edge:alignment:spacing:content:)
+Layout,Use GeometryReader sparingly — extract to separate view,GeometryReader forces a size measurement pass and can cause layout ambiguity if overused; it passes available space,"Use only when truly needed (proportional sizing overlay placement); extract GeometryReader into leaf view not parent","Wrap large view trees in GeometryReader for minor size info; nest multiple GeometryReaders; use in List rows","struct AdaptiveRow: View { var body: some View { GeometryReader { geo in HStack { content.frame(width: geo.size.width * 0.7) } } } }","GeometryReader { geo in LazyVStack { ForEach(items) { item in Row(item:item, width:geo.size.width) } } }  // Redundant expensive",Medium,https://developer.apple.com/documentation/swiftui/geometryreader
+Accessibility,Use .accessibilityLabel and .accessibilityHint correctly,Unlabeled interactive elements are announced as 'button' or 'image' with no context by VoiceOver,"accessibilityLabel: what the element IS (noun phrase); accessibilityHint: what happens on activation (verb phrase); hide decorative with .accessibilityHidden(true)","Use label for instruction (put that in hint); use redundant labels that just repeat the button text","Image('heart.fill').accessibilityLabel('Like post').accessibilityHint('Double tap to toggle like')","Image('heart.fill').accessibilityLabel('Double tap to like')  // Instructions belong in hint not label",High,https://developer.apple.com/documentation/swiftui/view/accessibilitylabel(_:)-5f0zj
+Accessibility,Mark headings with .accessibilityAddTraits(.isHeader),VoiceOver Rotor allows navigation by headings; unmarked visual headings are not navigable via rotor,"Add .accessibilityAddTraits(.isHeader) to every section/screen heading; H1 equivalent for screen title; H2 for section headers","Apply header trait only to visually large text ignoring semantic hierarchy; mark every bold text as header","Text('Today').font(.title2.bold()).accessibilityAddTraits(.isHeader)","Text('Today').font(.title2.bold())  // VoiceOver cannot navigate to this by heading",High,https://developer.apple.com/documentation/swiftui/accessibilitytraits/isheader
+Animation,Use matchedGeometryEffect for shared element transitions,matchedGeometryEffect syncs position/size/shape of two views across a namespace enabling hero-style transitions within a view hierarchy,"Create @Namespace; apply .matchedGeometryEffect(id:,in:) to matching source and target; use with withAnimation","Use matchedGeometryEffect with different IDs on source/target (no effect); use across NavigationStack (use Hero in UIKit for that)","@Namespace private var ns; ForEach(items) { item in if selected == item { DetailCard().matchedGeometryEffect(id:item.id, in:ns) } else { GridCard().matchedGeometryEffect(id:item.id, in:ns) } }","Animation { show.toggle() }  // No shared element — just a crossfade not a hero",High,https://developer.apple.com/documentation/swiftui/view/matchedgeometryeffect(id:in:properties:anchor:issource:)
+Animation,Respect reduceMotion preference,Some users experience motion sickness or disorientation from animations; iOS provides Reduce Motion setting that apps must honor,"Check UIAccessibility.isReduceMotionEnabled; use .animation(.default) not spring for reduced; offer fade instead of slide; test with Reduce Motion on","Ignore Reduce Motion and play full animations always; only reduce animations for reduce motion but keep micro-interactions","@Environment(\.accessibilityReduceMotion) var reduceMotion; .animation(reduceMotion ? .none : .spring(response:0.4,dampingFraction:0.8), value: expanded)","withAnimation(.spring(response:0.4)) { expanded.toggle() }  // Always springs even if user disabled motion",Critical,https://developer.apple.com/documentation/swiftui/environmentvalues/accessibilityreducemotion
+Images,Use AsyncImage with placeholder for network images,SwiftUI's AsyncImage handles async loading but defaults to empty content during load; provide placeholder for good UX,"Provide placeholder and failure states in AsyncImage; cache loaded images via URLCache; use .resizable().scaledToFill() inside phase","Leave AsyncImage with no placeholder (blank space during load); load high-resolution originals for thumbnails (use CDN variants)","AsyncImage(url: URL(string: imageUrl)) { phase in switch phase { case .empty: ShimmerView(); case .success(let img): img.resizable().scaledToFill(); case .failure: Color.gray; @unknown default: EmptyView() } }","AsyncImage(url: URL(string: url)) { img in img.resizable() } placeholder: { EmptyView() }  // No loading state",High,https://developer.apple.com/documentation/swiftui/asyncimage
+Text,Use Dynamic Type font styles not fixed sizes,Fixed font sizes don't respond to user's text size preference in system settings; Dynamic Type styles automatically scale,"Use Font.headline Font.body Font.caption etc.; custom fonts: Font.custom('Brand',size:17,relativeTo:.body)","Hardcode font size in points; scale factor 1.0 clamping; ignore extraSmall and Accessibility sizes","Text(title).font(.headline)  // Scales with user's font size preference","Text(title).font(.system(size: 17))  // Fixed -- stays at 17 regardless of user font size",Critical,https://developer.apple.com/documentation/swiftui/font
+Color,Define adaptive colors for light and dark mode,Hardcoded colors look wrong in dark mode; SwiftUI Color assets with appearances handle both automatically,"Define colors in Asset Catalog with Any/Dark appearances; use Color('MyBrand') or .primary .secondary .background","Use Color(red:0.1,green:0.1,blue:0.1) in dark-mode app (looks invisible on dark background)","Color('BrandAccent')  // Asset catalog with light + dark appearance defined","Color(red: 0.12, green: 0.12, blue: 0.12)  // Static color -- invisible in dark mode if background is also dark",High,https://developer.apple.com/documentation/swiftui/color
+Testing,Write ViewInspector or XCTest UI tests for critical flows,SwiftUI views are harder to unit-test than UIKit; XCTest UI tests cover full integration; ViewInspector for unit-level,"Use XCUITest for critical user journeys (login search checkout); ViewInspector for unit-level view logic verification","Skip UI testing assuming logic tests are enough; write UI tests without proper waitsForExistence calls","let app = XCUIApplication(); app.launch(); app.buttons['Sign In'].tap(); XCTAssertTrue(app.staticTexts['Welcome'].waitForExistence(timeout:5))","app.buttons['Sign In'].tap(); XCTAssertTrue(app.staticTexts['Welcome'].exists)  // Race condition without wait",High,https://developer.apple.com/documentation/xctest
+Error Handling,Use Result type and Swift concurrency (async/await) for errors,Callback-based APIs with untyped errors produce uncaught exceptions; Result + async/await express errors in the type system,"Use async throws functions; catch specific Error types; display user-facing error messages; propagate via task result","Ignore returned Errors; use try! in production code; show technical error messages to users","func loadPosts() async throws -> [Post] { ... } Task { do { posts = try await loadPosts() } catch let error as NetworkError { showError(error.localizedDescription) } }","let posts = try! await loadPosts()  // Force try crashes production",Critical,https://developer.apple.com/documentation/swift/result

package/template/agent/.shared/mobile-uiux-promax/data/ux-laws.csv

@@ -0,0 +1,16 @@
+Law,Keywords,Core Principle,Mobile Application,Design Pattern,Do,Don't,Research Source
+Fitts's Law,fitts law touch target size distance placement,"Time to acquire a target is a function of its distance and size — smaller and farther = harder and slower","Place primary actions in thumb zone (bottom 60% screen); make CTAs larger than secondary buttons; group related actions together to reduce travel distance","Large primary CTA at bottom; secondary button above or inline; delete/destructive actions far from confirm to prevent mistaps","Make primary CTA button at least 44pt tall and full-width or dominant width; place in bottom thumb zone; destructive actions far from confirm","Small icon buttons without tap area expansion; placing primary action at top right (hardest to reach one-handed); equal size for primary/secondary buttons","Laws of UX / Fitts (1954) / MIT Touch Lab",
+Hick's Law,hicks law choices decision time navigation options menu,"Decision time increases with the number and complexity of choices — more options = slower decision","Limit bottom tab bar to 3-5 items; use progressive disclosure for settings; limit paywall plans to 2-3 tiers; don't show full action sheets as default state","Tab bar with max 5 items; paywall with 2-3 plans; onboarding with 2-3 answer options per question; collapsed settings with drill-down","Limit navigation to 5 items per level; highlight recommended option; use progressive onboarding not full feature reveal on day 1","Settings screen listing all 40 options in one flat list; paywall with 5 pricing tiers all equal weight; tab bar with 7 tabs","Laws of UX / Hick & Hyman (1952)",
+Jakob's Law,jakobs law mental model familiarity convention platform,"Users spend most time in other apps — they expect yours to work like those apps","Follow iOS HIG and Material Design 3 conventions for navigation patterns; don't reinvent tab bars hamburger icons or back gestures; use platform-standard icons (SF Symbols on iOS Icons on Android)","Bottom tab bar on iOS (not top); back button top-left iOS; FAB bottom-right Android; swipe-back on iOS; predictive-back on Android 13+","Use platform-standard navigation patterns; use system icons before custom ones; match share/edit/delete interactions to platform defaults","Custom swipe direction (horizontal vs vertical) inconsistent with platform; inverted back gesture; tab bar at top on iOS phone","Laws of UX / Jakob Nielsen (2000)",
+Goal-Gradient Effect,goal gradient progress bar completion steps motivation,"The tendency to approach a goal increases as users get closer to completing it — show progress to motivate completion","Show step indicators in onboarding (Step 2 of 4); progress bars in multi-step forms; completion percentage in profiles; highlight how close user is to next reward tier","Onboarding step indicator; profile completeness bar; loyalty points progress; 'You're 80% done – add one more thing' state","Show step X of Y in any multi-step flow; display progress bars that update in real time; show 'almost there' states near completion","Multi-step onboarding with no progress indicator; profile with no completion signal; checkout with unknown number of steps remaining","Laws of UX / Hull (1932) / Kivetz et al. (2006)",
+Peak-End Rule,peak end rule memorable experience aha moment delight,"People judge experiences by their peak moment and end moment — not the average of all steps","Design a memorable 'wow' moment (aha moment) in onboarding; make the completion/success state delightful (confetti sound haptic); don't let the app end on an error screen","Lottie confetti on first task completion; success haptic + microinteraction on account creation; celebratory empty state on goal achievement","Create a peak moment after first data creation or first value delivery; give the success/completion state visual delight; always end redirected flows on a positive state","Plain success toast notification with no delight; crash without recovery; ending checkout flow on a dry confirmation screen","Laws of UX / Kahneman et al. (1993)",
+Doherty Threshold,doherty threshold response time 400ms performance loading feedback,"Productivity soars when system responds in under 400ms — longer waits break flow and increase abandonment","Show feedback within 400ms of any tap; optimistic UI updates (update state before server confirms); skeleton screens instead of spinners for >300ms loads; perceive-fast strategies","Optimistic tap response (button state changes <16ms); skeleton shimmer for 300ms+ loads; progress bar for operations >2s; suppress spinner for <300ms operations","Respond to any tap within 400ms minimum with visual feedback; use optimistic UI for actions likely to succeed; show progress for operations >2s","No visual feedback on button tap; full-page loading spinner that blocks all content; no response to network retry after error","Laws of UX / Doherty & Thadani (1982)",
+Miller's Law,millers law 7 chunks cognitive load working memory,"Average person can hold 7±2 items in working memory — design for cognitive limits by chunking","Group bottom nav to max 5 items; limit list filter chips to 5-7 visible; break onboarding into max 4-5 questions; chunk settings into logical groups max 7 items per group","Section headers in long settings lists; grouped form fields; onboarding quiz with 3-5 questions not 15; stagger tips one at a time","Chunk navigation options into logical groups; limit visible choices to 5-7 at a time; group form fields with clear section labels","Settings with 30 ungrouped flat options; filter dropdown with 25 checkboxes all visible; coach mark showing 12 tips at once","Laws of UX / Miller (1956)",
+Aesthetic-Usability Effect,aesthetic usability effect beautiful design perceived easier trust,"Users perceive aesthetically pleasing designs as more usable and more trustworthy — beauty signals quality","Polished UI increases trust (critical for apps handling personal data); invest in premium visual design; small visual details (icon consistency corner radius shadows) increase perceived reliability","Premium onboarding with consistent illustration style; well-crafted empty state illustrations; consistent color usage across all screens","Use consistent visual language throughout (same icon style corner radius spacing system); invest in onboarding visual quality; polish error states not just success states","Mismatched icon styles (filled vs outline mixed); inconsistent border radius (some 4dp some 16dp same screen); cluttered low-contrast layouts","Laws of UX / Tractinsky et al. (2000)",
+Zeigarnik Effect,zeigarnik effect incomplete tasks progress streaks retention,"People remember uncompleted tasks better than completed ones — use to drive engagement and return visits","Streaks and daily goals leverage Zeigarnik Effect — incomplete streak is memorable and motivates return; partially completed profile drives completion; notifications about incomplete actions","Daily streak counter; 'You're 1 action away from your goal today'; unread badge on tab; incomplete profile percentage; push notification 'You haven't logged today'","Use streak mechanics for daily habits; show incomplete progress indicators; send contextual re-engagement at incomplete action moment","Reset streaks without warning; show 100% completion immediately on first open (nothing to complete); no persistence of in-progress states across sessions","Laws of UX / Zeigarnik (1927)",
+Von Restorff Effect,von restorff isolation effect highlight standout visual emphasis,"When multiple similar objects are present, the one that differs from the rest is most likely to be remembered","Highlight primary CTA with color when all others are outline/ghost; use accent color for single most important UI element; recommended plan in paywall should have distinct visual treatment","Filled primary button vs outline secondary; highlighted recommended paywall tier (badge 'Most Popular'); accent-colored notification badge on single tab","Use accent color on only ONE primary action per screen; visually distinguish the recommended option in any multi-choice UI; use badge/indicator selectively","All buttons same visual weight; paywall with identical card style for all 3 plans; every nav item with a badge (defeats the purpose)","Laws of UX / Von Restorff (1933)",
+Serial Position Effect,serial position effect first last middle recall navigation menu,"Users best remember the first and last items in a series — middle items are forgotten more often","Put most important navigation items first and last in tab bar; most important setting at top of list; critical action at bottom of action sheet (last = most remembered); hide promotional items in middle","Primary tab (Home) at position 1; secondary tab (Profile/Settings) at position last; most common action in action sheet at top and bottom; promotional item in middle of list","Place most accessed navigation destinations at first and last positions; put critical settings at top of section; most important action sheet option at top","Home at position 3 of 5; putting promotional tab first; burying most-used feature in the middle of list","Laws of UX / Murdock (1962)",
+Cognitive Load,cognitive load working memory reduce simplify screen,"Don't overload users' working memory — the less users have to remember, the more likely they are to complete the task","Reduce form fields to minimum required; show persistent visible labels on inputs (not placeholder-only); don't make users remember info across screens; autocomplete saves re-entry","Persistent text field labels; address autocomplete; remembered payment method; pre-fill known values from earlier onboarding answers; 1-2 primary actions per screen","Surface what users need at the moment they need it; don't make users remember from previous screen; reduce choices on any single action screen","Form with no visible field labels after focus; checkout requiring re-entry of known info; 6+ actions in bottom action sheet; cluttered dashboard with 30 cards","Laws of UX",
+Law of Proximity,law of proximity grouping related elements visual nearness,"Elements placed near each other are perceived as related — use spacing to communicate relationships","Group related form fields; price and 'Subscribe' CTA within same visual group; label directly adjacent to its input; destructive button spaced far from confirm","8pt gap within a group; 24pt gap between groups; price+CTA+terms in same card; delete button at bottom with extra margin from edit/save","Use consistent large gap between unrelated UI groups; small consistent gap within related groups; the label of a toggle should be directly adjacent","Delete button at same spacing as edit button; form groups with same gap as between groups; toggle with label 20pt away","Laws of UX / Gestalt",
+Law of Common Region,law of common region grouping card container background,"Elements within the same visual container are perceived as belonging together","Use cards to group related content (post = image+text+actions+author in one card); section headers define a region; modal sheets create a focused region","Card containing all post elements; settings grouped in visual container; bottom sheet as modal region; tab bar as own region separated by divider","Use explicit visual boundaries (cards dividers backgrounds) to group related elements; don't use implicit grouping alone for critical relationships","Flat list with no grouping where context matters; action buttons floating without clear association to their content; mixed unrelated elements in same card","Laws of UX / Gestalt",
+Paradox of Active User,paradox active user tutorial skip documentation learn,"Users start using software immediately without reading instructions — they learn by doing, not by reading","Don't rely on overlays or tutorials for core feature understanding — design should be self-explanatory; coach marks must be contextual and minimal (1 at a time); trigger tips at point-of-need not on launch","Single contextual coach mark at moment of first relevant action; tooltip on first long-press; empty state with action CTA instead of instructions","Make the primary action obvious without instructions; show only one coach mark at a time; trigger tips contextually not on launch; test without any tutorial","Full-screen tutorial on first launch requiring reading; 10-step coach mark sequence; long text instructions before any interaction","Laws of UX / Carroll & Rosson (1987)",

package/template/agent/.shared/mobile-uiux-promax/scripts/mobile-search.py

@@ -0,0 +1,157 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+Mobile UI/UX Pro Max - BM25 search for mobile design patterns.
+Reuses the BM25 engine from the sibling ui-ux-pro-max tool.
+"""
+
+import sys
+import argparse
+from pathlib import Path
+
+# Import the BM25 engine from the sibling web tool (no duplication)
+_CORE_PATH = Path(__file__).resolve().parent.parent.parent / "ui-ux-pro-max" / "scripts"
+sys.path.insert(0, str(_CORE_PATH))
+from core import _search_csv, _load_csv
+
+DATA_DIR = Path(__file__).resolve().parent.parent / "data"
+MAX_RESULTS = 3
+
+MOBILE_CONFIG = {
+    "navigation": {
+        "file": "navigation.csv",
+        "search_cols": ["Pattern Name", "Keywords", "Pattern Type", "When to Use", "iOS Convention", "Android Convention"],
+        "output_cols": ["Pattern Name", "Keywords", "Pattern Type", "When to Use", "When to Avoid", "iOS Convention", "Android Convention", "Cross-Platform Note", "Accessibility"]
+    },
+    "gestures": {
+        "file": "gestures.csv",
+        "search_cols": ["Gesture Name", "Keywords", "Platform", "Trigger", "Expected Response"],
+        "output_cols": ["Gesture Name", "Keywords", "Platform", "Trigger", "Expected Response", "Conflicts", "iOS Hint", "Android Hint", "Accessibility Alternative"]
+    },
+    "components": {
+        "file": "components.csv",
+        "search_cols": ["Component Name", "Keywords", "Platform Variants", "Purpose"],
+        "output_cols": ["Component Name", "Keywords", "Platform Variants", "Purpose", "Do", "Don't", "Haptic Feedback", "Animation Spec", "Accessibility"]
+    },
+    "layout": {
+        "file": "layout.csv",
+        "search_cols": ["Topic", "Keywords", "Platform", "Rule"],
+        "output_cols": ["Topic", "Keywords", "Platform", "Rule", "Value/Spec", "Do", "Don't", "Code Example"]
+    },
+    "onboarding": {
+        "file": "onboarding.csv",
+        "search_cols": ["Pattern Name", "Keywords", "Stage", "Purpose", "When to Use"],
+        "output_cols": ["Pattern Name", "Keywords", "Stage", "Purpose", "When to Use", "Conversion Impact", "iOS Convention", "Android Convention", "Anti-Pattern"]
+    },
+    "animation": {
+        "file": "animation.csv",
+        "search_cols": ["Animation Type", "Keywords", "Platform", "Do", "Don't"],
+        "output_cols": ["Animation Type", "Keywords", "Platform", "Duration (ms)", "Easing", "Do", "Don't", "Performance Impact", "Reduced Motion Handling"]
+    },
+    "platform": {
+        "file": "platform.csv",
+        "search_cols": ["Topic", "Keywords", "iOS Convention", "Android Convention"],
+        "output_cols": ["Topic", "Keywords", "iOS Convention", "Android Convention", "Cross-Platform Recommendation", "When to Deviate"]
+    },
+    "accessibility": {
+        "file": "accessibility.csv",
+        "search_cols": ["Category", "Issue", "Platform", "Description"],
+        "output_cols": ["Category", "Issue", "Platform", "iOS Tool", "Android Tool", "Minimum Spec", "Do", "Don't", "Code Example", "WCAG Level"]
+    },
+    "ux-laws": {
+        "file": "ux-laws.csv",
+        "search_cols": ["Law", "Keywords", "Core Principle", "Mobile Application", "Design Pattern", "Do", "Don't"],
+        "output_cols": ["Law", "Keywords", "Core Principle", "Mobile Application", "Design Pattern", "Do", "Don't", "Research Source"]
+    },
+}
+
+
+MOBILE_STACK_CONFIG = {
+    "react-native":    {"file": "stacks/react-native.csv"},
+    "flutter":         {"file": "stacks/flutter.csv"},
+    "swiftui":         {"file": "stacks/swiftui.csv"},
+    "jetpack-compose": {"file": "stacks/jetpack-compose.csv"},
+}
+
+_STACK_COLS = {
+    "search_cols": ["Category", "Guideline", "Description", "Do", "Don't"],
+    "output_cols": ["Category", "Guideline", "Description", "Do", "Don't", "Code Good", "Code Bad", "Severity", "Docs URL"]
+}
+
+AVAILABLE_DOMAINS = list(MOBILE_CONFIG.keys())
+AVAILABLE_STACKS = list(MOBILE_STACK_CONFIG.keys())
+
+
+def _format_result(result, index):
+    lines = [f"\n### Result {index + 1}"]
+    for key, value in result.items():
+        if value:
+            lines.append(f"- **{key}:** {value}")
+    return "\n".join(lines)
+
+
+def search(query, domain, max_results=MAX_RESULTS):
+    if domain not in MOBILE_CONFIG:
+        print(f"Error: Unknown domain '{domain}'. Available: {', '.join(AVAILABLE_DOMAINS)}")
+        sys.exit(1)
+
+    config = MOBILE_CONFIG[domain]
+    filepath = DATA_DIR / config["file"]
+
+    if not filepath.exists():
+        print(f"Error: Data file not found: {filepath}")
+        sys.exit(1)
+
+    results = _search_csv(filepath, config["search_cols"], config["output_cols"], query, max_results)
+
+    print(f"## Mobile UI Pro Max Search Results")
+    print(f"**Domain:** {domain} | **Query:** {query}")
+    print(f"**Source:** {config['file']} | **Found:** {len(results)} results")
+
+    for i, result in enumerate(results):
+        print(_format_result(result, i))
+
+    if not results:
+        print("\nNo results found. Try different keywords.")
+
+
+def search_stack(query, stack, max_results=MAX_RESULTS):
+    if stack not in MOBILE_STACK_CONFIG:
+        print(f"Error: Unknown stack '{stack}'. Available: {', '.join(AVAILABLE_STACKS)}")
+        sys.exit(1)
+
+    filepath = DATA_DIR / MOBILE_STACK_CONFIG[stack]["file"]
+
+    if not filepath.exists():
+        print(f"Error: Stack file not found: {filepath}")
+        sys.exit(1)
+
+    results = _search_csv(filepath, _STACK_COLS["search_cols"], _STACK_COLS["output_cols"], query, max_results)
+
+    print(f"## Mobile UI Pro Max Search Results")
+    print(f"**Stack:** {stack} | **Query:** {query}")
+    print(f"**Found:** {len(results)} results")
+
+    for i, result in enumerate(results):
+        print(_format_result(result, i))
+
+
+def main():
+    parser = argparse.ArgumentParser(description="Mobile UI/UX Pro Max - Search mobile design patterns")
+    parser.add_argument("query", help="Search query")
+    parser.add_argument("--domain", "-d", choices=AVAILABLE_DOMAINS, help="Domain to search")
+    parser.add_argument("--stack", "-s", choices=AVAILABLE_STACKS, help="Stack-specific guidelines")
+    parser.add_argument("-n", "--max-results", type=int, default=MAX_RESULTS, help="Max results (default: 3)")
+
+    args = parser.parse_args()
+
+    if args.stack:
+        search_stack(args.query, args.stack, args.max_results)
+    elif args.domain:
+        search(args.query, args.domain, args.max_results)
+    else:
+        parser.error("Provide either --domain or --stack")
+
+
+if __name__ == "__main__":
+    main()

package/template/agent/.shared/ui-ux-pro-max/data/charts.csv

@@ -0,0 +1,26 @@
+No,Data Type,Keywords,Best Chart Type,Secondary Options,Color Guidance,Performance Impact,Accessibility Notes,Library Recommendation,Interactive Level
+1,Trend Over Time,"trend, time-series, line, growth, timeline, progress",Line Chart,"Area Chart, Smooth Area",Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity,⚡ Excellent (optimized),✓ Clear line patterns for colorblind users. Add pattern overlays.,"Chart.js, Recharts, ApexCharts",Hover + Zoom
+2,Compare Categories,"compare, categories, bar, comparison, ranking",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar",Each bar: distinct color. Category: grouped same color. Sorted: descending order,⚡ Excellent,✓ Easy to compare. Add value labels on bars for clarity.,"Chart.js, Recharts, D3.js",Hover + Sort
+3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share",Pie Chart or Donut,"Stacked Bar, Treemap",Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.,⚡ Good (limit 6 slices),⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.,"Chart.js, Recharts, D3.js",Hover + Drill
+4,Correlation/Distribution,"correlation, distribution, scatter, relationship, pattern",Scatter Plot or Bubble Chart,"Heat Map, Matrix",Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density,⚠ Moderate (many points),⚠ Provide data table alternative. Use pattern + color distinction.,"D3.js, Plotly, Recharts",Hover + Brush
+5,Heatmap/Intensity,"heatmap, heat-map, intensity, density, matrix",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat",Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data,⚡ Excellent (color CSS),⚠ Colorblind: Use pattern overlay. Provide numerical legend.,"D3.js, Plotly, ApexCharts",Hover + Zoom
+6,Geographic Data,"geographic, map, location, region, geo, spatial","Choropleth Map, Bubble Map",Geographic Heat Map,Regional: single color gradient or categorized colors. Legend: clear scale,⚠ Moderate (rendering),⚠ Include text labels for regions. Provide data table alternative.,"D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
+7,Funnel/Flow,funnel/flow,"Funnel Chart, Sankey",Waterfall (for flows),Stages: gradient (starting color → ending color). Show conversion %,⚡ Good,✓ Clear stage labels + percentages. Good for accessibility if labeled.,"D3.js, Recharts, Custom SVG",Hover + Drill
+8,Performance vs Target,performance-vs-target,Gauge Chart or Bullet Chart,"Dial, Thermometer",Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors,⚡ Good,✓ Add numerical value + percentage label beside gauge.,"D3.js, ApexCharts, Custom SVG",Hover
+9,Time-Series Forecast,time-series-forecast,Line with Confidence Band,Ribbon Chart,Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading,⚡ Good,✓ Clearly distinguish actual vs forecast. Add legend.,"Chart.js, ApexCharts, Plotly",Hover + Toggle
+10,Anomaly Detection,anomaly-detection,Line Chart with Highlights,Scatter with Alert,Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert,⚡ Good,✓ Circle/marker for anomalies. Add text alert annotation.,"D3.js, Plotly, ApexCharts",Hover + Alert
+11,Hierarchical/Nested Data,hierarchical/nested-data,Treemap,"Sunburst, Nested Donut, Icicle",Parent: distinct hues. Children: lighter shades. White borders 2-3px.,⚠ Moderate,⚠ Poor - provide table alternative. Label large areas.,"D3.js, Recharts, ApexCharts",Hover + Drilldown
+12,Flow/Process Data,flow/process-data,Sankey Diagram,"Alluvial, Chord Diagram",Gradient from source to target. Opacity 0.4-0.6 for flows.,⚠ Moderate,⚠ Poor - provide flow table alternative.,"D3.js (d3-sankey), Plotly",Hover + Drilldown
+13,Cumulative Changes,cumulative-changes,Waterfall Chart,"Stacked Bar, Cascade",Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.,⚡ Good,✓ Good - clear directional colors with labels.,"ApexCharts, Highcharts, Plotly",Hover
+14,Multi-Variable Comparison,multi-variable-comparison,Radar/Spider Chart,"Parallel Coordinates, Grouped Bar",Single: #0080FF 20% fill. Multiple: distinct colors per dataset.,⚡ Good,⚠ Moderate - limit 5-8 axes. Add data table.,"Chart.js, Recharts, ApexCharts",Hover + Toggle
+15,Stock/Trading OHLC,stock/trading-ohlc,Candlestick Chart,"OHLC Bar, Heikin-Ashi",Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.,⚡ Good,⚠ Moderate - provide OHLC data table.,"Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
+16,Relationship/Connection Data,relationship/connection-data,Network Graph,"Hierarchical Tree, Adjacency Matrix",Node types: categorical colors. Edges: #90A4AE 60% opacity.,❌ Poor (500+ nodes struggles),❌ Very Poor - provide adjacency list alternative.,"D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
+17,Distribution/Statistical,distribution/statistical,Box Plot,"Violin Plot, Beeswarm",Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.,⚡ Excellent,"✓ Good - include stats table (min, Q1, median, Q3, max).","Plotly, D3.js, Chart.js (plugin)",Hover
+18,Performance vs Target (Compact),performance-vs-target-(compact),Bullet Chart,"Gauge, Progress Bar","Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.",⚡ Excellent,✓ Excellent - compact with clear values.,"D3.js, Plotly, Custom SVG",Hover
+19,Proportional/Percentage,proportional/percentage,Waffle Chart,"Pictogram, Stacked Bar 100%",10x10 grid. 3-5 categories max. 2-3px spacing between squares.,⚡ Good,✓ Good - better than pie for accessibility.,"D3.js, React-Waffle, Custom CSS Grid",Hover
+20,Hierarchical Proportional,hierarchical-proportional,Sunburst Chart,"Treemap, Icicle, Circle Packing",Center to outer: darker to lighter. 15-20% lighter per level.,⚠ Moderate,⚠ Poor - provide hierarchy table alternative.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
+21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split",Decomposition Tree,"Decision Tree, Flow Chart",Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.,⚠ Moderate (calculation heavy),✓ clear hierarchy. Allow keyboard navigation for nodes.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand
+22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric",3D Scatter/Surface Plot,"Volumetric Rendering, Point Cloud",Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).,❌ Heavy (WebGL required),❌ Poor - requires alternative 2D view or data table.,"Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
+23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse",Streaming Area Chart,"Ticker Tape, Moving Gauge",Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.,⚡ Optimized (canvas/webgl),⚠ Flashing elements - provide pause button. High contrast.,Smoothed D3.js, CanvasJS, SciChart,Real-time + Pause
+24,Sentiment/Emotion,"sentiment, emotion, nlp, opinion, feeling",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.,⚡ Good,⚠ Word clouds poor for screen readers. Use list view.,"D3-cloud, Highcharts, Nivo",Hover + Filter
+25,Process Mining,"process, mining, variants, path, bottleneck, log",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.,⚠ Moderate to Heavy,⚠ Complex graphs hard to navigate. Provide path summary.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click

package/template/agent/.shared/ui-ux-pro-max/data/colors.csv

@@ -0,0 +1,97 @@
+No,Product Type,Keywords,Primary (Hex),Secondary (Hex),CTA (Hex),Background (Hex),Text (Hex),Border (Hex),Notes
+1,SaaS (General),"saas, general",#2563EB,#3B82F6,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust blue + accent contrast
+2,Micro SaaS,"micro, saas",#2563EB,#3B82F6,#F97316,#F8FAFC,#1E293B,#E2E8F0,Vibrant primary + white space
+3,E-commerce,commerce,#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand primary + success green
+4,E-commerce Luxury,"commerce, luxury",#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Premium colors + minimal accent
+5,Service Landing Page,"service, landing, page",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand primary + trust colors
+6,B2B Service,"b2b, service",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional blue + neutral grey
+7,Financial Dashboard,"financial, dashboard",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark bg + red/green alerts + trust blue
+8,Analytics Dashboard,"analytics, dashboard",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Cool→Hot gradients + neutral grey
+9,Healthcare App,"healthcare, app",#0891B2,#22D3EE,#059669,#ECFEFF,#164E63,#A5F3FC,Calm blue + health green + trust
+10,Educational App,"educational, app",#4F46E5,#818CF8,#F97316,#EEF2FF,#1E1B4B,#C7D2FE,Playful colors + clear hierarchy
+11,Creative Agency,"creative, agency",#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold primaries + artistic freedom
+12,Portfolio/Personal,"portfolio, personal",#18181B,#3F3F46,#2563EB,#FAFAFA,#09090B,#E4E4E7,Brand primary + artistic interpretation
+13,Gaming,gaming,#7C3AED,#A78BFA,#F43F5E,#0F0F23,#E2E8F0,#4C1D95,Vibrant + neon + immersive colors
+14,Government/Public Service,"government, public, service",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional blue + high contrast
+15,Fintech/Crypto,"fintech, crypto",#F59E0B,#FBBF24,#8B5CF6,#0F172A,#F8FAFC,#334155,Dark tech colors + trust + vibrant accents
+16,Social Media App,"social, media, app",#2563EB,#60A5FA,#F43F5E,#F8FAFC,#1E293B,#DBEAFE,Vibrant + engagement colors
+17,Productivity Tool,"productivity, tool",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Clear hierarchy + functional colors
+18,Design System/Component Library,"design, system, component, library",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Clear hierarchy + code-like structure
+19,AI/Chatbot Platform,"chatbot, platform",#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,Neutral + AI Purple (#6366F1)
+20,NFT/Web3 Platform,"nft, web3, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Neon + Gold (#FFD700)
+21,Creator Economy Platform,"creator, economy, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Vibrant + Brand colors
+22,Sustainability/ESG Platform,"sustainability, esg, platform",#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,Green (#228B22) + Earth tones
+23,Remote Work/Collaboration Tool,"remote, work, collaboration, tool",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Calm Blue + Neutral grey
+24,Mental Health App,"mental, health, app",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Calm Pastels + Trust colors
+25,Pet Tech App,"pet, tech, app",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Playful + Warm colors
+26,Smart Home/IoT Dashboard,"smart, home, iot, dashboard",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Status indicator colors
+27,EV/Charging Ecosystem,"charging, ecosystem",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Electric Blue (#009CD1) + Green
+28,Subscription Box Service,"subscription, box, service",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand + Excitement colors
+29,Podcast Platform,"podcast, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Audio waveform accents
+30,Dating App,"dating, app",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Warm + Romantic (Pink/Red gradients)
+31,Micro-Credentials/Badges Platform,"micro, credentials, badges, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust Blue + Gold (#FFD700)
+32,Knowledge Base/Documentation,"knowledge, base, documentation",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Clean hierarchy + minimal color
+33,Hyperlocal Services,"hyperlocal, services",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Location markers + Trust colors
+34,Beauty/Spa/Wellness Service,"beauty, spa, wellness, service",#10B981,#34D399,#8B5CF6,#ECFDF5,#064E3B,#A7F3D0,Soft pastels (Pink #FFB6C1 Sage #90EE90) + Cream + Gold accents
+35,Luxury/Premium Brand,"luxury, premium, brand",#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Black + Gold (#FFD700) + White + Minimal accent
+36,Restaurant/Food Service,"restaurant, food, service",#DC2626,#F87171,#CA8A04,#FEF2F2,#450A0A,#FECACA,Warm colors (Orange Red Brown) + appetizing imagery
+37,Fitness/Gym App,"fitness, gym, app",#DC2626,#F87171,#16A34A,#FEF2F2,#1F2937,#FECACA,Energetic (Orange #FF6B35 Electric Blue) + Dark bg
+38,Real Estate/Property,"real, estate, property",#0F766E,#14B8A6,#0369A1,#F0FDFA,#134E4A,#99F6E4,Trust Blue (#0077B6) + Gold accents + White
+39,Travel/Tourism Agency,"travel, tourism, agency",#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Vibrant destination colors + Sky Blue + Warm accents
+40,Hotel/Hospitality,"hotel, hospitality",#1E3A8A,#3B82F6,#CA8A04,#F8FAFC,#1E40AF,#BFDBFE,Warm neutrals + Gold (#D4AF37) + Brand accent
+41,Wedding/Event Planning,"wedding, event, planning",#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Soft Pink (#FFD6E0) + Gold + Cream + Sage
+42,Legal Services,"legal, services",#1E3A8A,#1E40AF,#B45309,#F8FAFC,#0F172A,#CBD5E1,Navy Blue (#1E3A5F) + Gold + White
+43,Insurance Platform,"insurance, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust Blue (#0066CC) + Green (security) + Neutral
+44,Banking/Traditional Finance,"banking, traditional, finance",#0F766E,#14B8A6,#0369A1,#F0FDFA,#134E4A,#99F6E4,Navy (#0A1628) + Trust Blue + Gold accents
+45,Online Course/E-learning,"online, course, learning",#0D9488,#2DD4BF,#EA580C,#F0FDFA,#134E4A,#5EEAD4,Vibrant learning colors + Progress green
+46,Non-profit/Charity,"non, profit, charity",#0891B2,#22D3EE,#F97316,#ECFEFF,#164E63,#A5F3FC,Cause-related colors + Trust + Warm
+47,Music Streaming,"music, streaming",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark (#121212) + Vibrant accents + Album art colors
+48,Video Streaming/OTT,"video, streaming, ott",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark bg + Content poster colors + Brand accent
+49,Job Board/Recruitment,"job, board, recruitment",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional Blue + Success Green + Neutral
+50,Marketplace (P2P),"marketplace, p2p",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust colors + Category colors + Success green
+51,Logistics/Delivery,"logistics, delivery",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Blue (#2563EB) + Orange (tracking) + Green (delivered)
+52,Agriculture/Farm Tech,"agriculture, farm, tech",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Earth Green (#4A7C23) + Brown + Sky Blue
+53,Construction/Architecture,"construction, architecture",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Grey (#4A4A4A) + Orange (safety) + Blueprint Blue
+54,Automotive/Car Dealership,"automotive, car, dealership",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand colors + Metallic accents + Dark/Light
+55,Photography Studio,"photography, studio",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Black + White + Minimal accent
+56,Coworking Space,"coworking, space",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Energetic colors + Wood tones + Brand accent
+57,Cleaning Service,"cleaning, service",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Fresh Blue (#00B4D8) + Clean White + Green
+58,Home Services (Plumber/Electrician),"home, services, plumber, electrician",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Trust Blue + Safety Orange + Professional grey
+59,Childcare/Daycare,"childcare, daycare",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Playful pastels + Safe colors + Warm accents
+60,Senior Care/Elderly,"senior, care, elderly",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Calm Blue + Warm neutrals + Large text
+61,Medical Clinic,"medical, clinic",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Medical Blue (#0077B6) + Trust White + Calm Green
+62,Pharmacy/Drug Store,"pharmacy, drug, store",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Pharmacy Green + Trust Blue + Clean White
+63,Dental Practice,"dental, practice",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Fresh Blue + White + Smile Yellow accent
+64,Veterinary Clinic,"veterinary, clinic",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Caring Blue + Pet-friendly colors + Warm accents
+65,Florist/Plant Shop,"florist, plant, shop",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Natural Green + Floral pinks/purples + Earth tones
+66,Bakery/Cafe,"bakery, cafe",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Warm Brown + Cream + Appetizing accents
+67,Coffee Shop,"coffee, shop",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Coffee Brown (#6F4E37) + Cream + Warm accents
+68,Brewery/Winery,"brewery, winery",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Deep amber/burgundy + Gold + Craft aesthetic
+69,Airline,airline,#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,Sky Blue + Brand colors + Trust accents
+70,News/Media Platform,"news, media, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand colors + High contrast + Category colors
+71,Magazine/Blog,"magazine, blog",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Editorial colors + Brand primary + Clean white
+72,Freelancer Platform,"freelancer, platform",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional Blue + Success Green + Neutral
+73,Consulting Firm,"consulting, firm",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Navy + Gold + Professional grey
+74,Marketing Agency,"marketing, agency",#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold brand colors + Creative freedom
+75,Event Management,"event, management",#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Event theme colors + Excitement accents
+76,Conference/Webinar Platform,"conference, webinar, platform",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional Blue + Video accent + Brand
+77,Membership/Community,"membership, community",#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Community brand colors + Engagement accents
+78,Newsletter Platform,"newsletter, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand primary + Clean white + CTA accent
+79,Digital Products/Downloads,"digital, products, downloads",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Product category colors + Brand + Success green
+80,Church/Religious Organization,"church, religious, organization",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Warm Gold + Deep Purple/Blue + White
+81,Sports Team/Club,"sports, team, club",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Team colors + Energetic accents
+82,Museum/Gallery,"museum, gallery",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Art-appropriate neutrals + Exhibition accents
+83,Theater/Cinema,"theater, cinema",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Spotlight accents + Gold
+84,Language Learning App,"language, learning, app",#0D9488,#2DD4BF,#EA580C,#F0FDFA,#134E4A,#5EEAD4,Playful colors + Progress indicators + Country flags
+85,Coding Bootcamp,"coding, bootcamp",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Code editor colors + Brand + Success green
+86,Cybersecurity Platform,"cybersecurity, security, cyber, hacker",#00FF41,#0D0D0D,#00FF41,#000000,#E0E0E0,#1F1F1F,Matrix Green + Deep Black + Terminal feel
+87,Developer Tool / IDE,"developer, tool, ide, code, dev",#3B82F6,#1E293B,#2563EB,#0F172A,#F1F5F9,#334155,Dark syntax theme colors + Blue focus
+88,Biotech / Life Sciences,"biotech, science, biology, medical",#0EA5E9,#0284C7,#10B981,#F8FAFC,#0F172A,#E2E8F0,Sterile White + DNA Blue + Life Green
+89,Space Tech / Aerospace,"space, aerospace, tech, futuristic",#FFFFFF,#94A3B8,#3B82F6,#0B0B10,#F8FAFC,#1E293B,Deep Space Black + Star White + Metallic
+90,Architecture / Interior,"architecture, interior, design, luxury",#171717,#404040,#D4AF37,#FFFFFF,#171717,#E5E5E5,Monochrome + Gold Accent + High Imagery
+91,Quantum Computing,"quantum, qubit, tech",#00FFFF,#7B61FF,#FF00FF,#050510,#E0E0FF,#333344,Interference patterns + Neon + Deep Dark
+92,Biohacking / Longevity,"bio, health, science",#FF4D4D,#4D94FF,#00E676,#F5F5F7,#1C1C1E,#E5E5EA,Biological red/blue + Clinical white
+93,Autonomous Systems,"drone, robot, fleet",#00FF41,#008F11,#FF3333,#0D1117,#E6EDF3,#30363D,Terminal Green + Tactical Dark
+94,Generative AI Art,"art, gen-ai, creative",#111111,#333333,#FFFFFF,#FAFAFA,#000000,#E5E5E5,Canvas Neutral + High Contrast
+95,Spatial / Vision OS,"spatial, glass, vision",#FFFFFF,#E5E5E5,#007AFF,#888888,#000000,#FFFFFF,Glass opacity 20% + System Blue
+96,Climate Tech,"climate, green, energy",#2E8B57,#87CEEB,#FFD700,#F0FFF4,#1A3320,#C6E6C6,Nature Green + Solar Yellow + Air Blue

package/template/agent/.shared/ui-ux-pro-max/data/landing.csv

@@ -0,0 +1,31 @@
+No,Pattern Name,Keywords,Section Order,Primary CTA Placement,Color Strategy,Recommended Effects,Conversion Optimization
+1,Hero + Features + CTA,"hero, hero-centric, features, feature-rich, cta, call-to-action","1. Hero with headline/image, 2. Value prop, 3. Key features (3-5), 4. CTA section, 5. Footer",Hero (sticky) + Bottom,Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color,"Hero parallax, feature card hover lift, CTA glow on hover",Deep CTA placement. Use contrasting color (at least 7:1 contrast ratio). Sticky navbar CTA.
+2,Hero + Testimonials + CTA,"hero, testimonials, social-proof, trust, reviews, cta","1. Hero, 2. Problem statement, 3. Solution overview, 4. Testimonials carousel, 5. CTA",Hero (sticky) + Post-testimonials,"Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant","Testimonial carousel slide animations, quote marks animations, avatar fade-in",Social proof before CTA. Use 3-5 testimonials. Include photo + name + role. CTA after social proof.
+3,Product Demo + Features,"demo, product-demo, features, showcase, interactive","1. Hero, 2. Product video/mockup (center), 3. Feature breakdown per section, 4. Comparison (optional), 5. CTA",Video center + CTA right/bottom,Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222,"Video play button pulse, feature scroll reveals, demo interaction highlights",Embedded product demo increases engagement. Use interactive mockup if possible. Auto-play video muted.
+4,Minimal Single Column,"minimal, simple, direct, single-column, clean","1. Hero headline, 2. Short description, 3. Benefit bullets (3 max), 4. CTA, 5. Footer","Center, large CTA button",Minimalist: Brand + white #FFFFFF + accent. Buttons: High contrast 7:1+. Text: Black/Dark grey,Minimal hover effects. Smooth scroll. CTA scale on hover (subtle),Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.
+5,Funnel (3-Step Conversion),"funnel, conversion, steps, wizard, onboarding","1. Hero, 2. Step 1 (problem), 3. Step 2 (solution), 4. Step 3 (action), 5. CTA progression",Each step: mini-CTA. Final: main CTA,"Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color","Step number animations, progress bar fill, step transitions smooth scroll",Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.
+6,Comparison Table + CTA,"comparison, table, compare, versus, cta","1. Hero, 2. Problem intro, 3. Comparison table (product vs competitors), 4. Pricing (optional), 5. CTA",Table: Right column. CTA: Below table,Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark,"Table row hover highlight, price toggle animations, feature checkmark animations",Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.
+7,Lead Magnet + Form,"lead, form, signup, capture, email, magnet","1. Hero (benefit headline), 2. Lead magnet preview (ebook cover, checklist, etc), 3. Form (minimal fields), 4. CTA submit",Form CTA: Submit button,Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color,"Form focus state animations, input validation animations, success confirmation animation",Form fields ≤ 3 for best conversion. Offer valuable lead magnet preview. Show form submission progress.
+8,Pricing Page + CTA,"pricing, plans, tiers, comparison, cta","1. Hero (pricing headline), 2. Price comparison cards, 3. Feature comparison table, 4. FAQ section, 5. Final CTA",Each card: CTA button. Sticky CTA in nav,"Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow","Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close",Recommend starter plan (pre-select/highlight). Show annual discount (20-30%). Use FAQs to address concerns.
+9,Video-First Hero,"video, hero, media, visual, engaging","1. Hero with video background, 2. Key features overlay, 3. Benefits section, 4. CTA",Overlay on video (center/bottom) + Bottom section,Dark overlay 60% on video. Brand accent for CTA. White text on dark.,"Video autoplay muted, parallax scroll, text fade-in on scroll",86% higher engagement with video. Add captions for accessibility. Compress video for performance.
+10,Scroll-Triggered Storytelling,"storytelling, scroll, narrative, story, immersive","1. Intro hook, 2. Chapter 1 (problem), 3. Chapter 2 (journey), 4. Chapter 3 (solution), 5. Climax CTA",End of each chapter (mini) + Final climax CTA,Progressive reveal. Each chapter has distinct color. Building intensity.,"ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions",Narrative increases time-on-page 3x. Use progress indicator. Mobile: simplify animations.
+11,AI Personalization Landing,"ai, personalization, smart, recommendation, dynamic","1. Dynamic hero (personalized), 2. Relevant features, 3. Tailored testimonials, 4. Smart CTA",Context-aware placement based on user segment,Adaptive based on user data. A/B test color variations per segment.,"Dynamic content swap, fade transitions, personalized product recommendations",20%+ conversion with personalization. Requires analytics integration. Fallback for new users.
+12,Waitlist/Coming Soon,"waitlist, coming-soon, launch, early-access, notify","1. Hero with countdown, 2. Product teaser/preview, 3. Email capture form, 4. Social proof (waitlist count)",Email form prominent (above fold) + Sticky form on scroll,Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.,"Countdown timer animation, email validation feedback, success confetti, social share buttons",Scarcity + exclusivity. Show waitlist count. Early access benefits. Referral program.
+13,Comparison Table Focus,"comparison, table, versus, compare, features","1. Hero (problem statement), 2. Comparison matrix (you vs competitors), 3. Feature deep-dive, 4. Winner CTA",After comparison table (highlighted row) + Bottom,Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.,"Table row hover highlight, feature checkmark animations, sticky comparison header",Show value vs competitors. 35% higher conversion. Be factual. Include pricing if favorable.
+14,Pricing-Focused Landing,"pricing, price, cost, plans, subscription","1. Hero (value proposition), 2. Pricing cards (3 tiers), 3. Feature comparison, 4. FAQ, 5. Final CTA",Each pricing card + Sticky CTA in nav + Bottom,Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.,"Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open",Annual discount 20-30%. Recommend mid-tier (most popular badge). Address objections in FAQ.
+15,App Store Style Landing,"app, mobile, download, store, install","1. Hero with device mockup, 2. Screenshots carousel, 3. Features with icons, 4. Reviews/ratings, 5. Download CTAs",Download buttons prominent (App Store + Play Store) throughout,Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.,"Device mockup rotations, screenshot slider, star rating animations, download button pulse",Show real screenshots. Include ratings (4.5+ stars). QR code for mobile. Platform-specific CTAs.
+16,FAQ/Documentation Landing,"faq, documentation, help, support, questions","1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA",Search bar prominent + Contact CTA for unresolved questions,"Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.","Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons",Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.
+17,Immersive/Interactive Experience,"immersive, interactive, experience, 3d, animation","1. Full-screen interactive element, 2. Guided product tour, 3. Key benefits revealed, 4. CTA after completion",After interaction complete + Skip option for impatient users,Immersive experience colors. Dark background for focus. Highlight interactive elements.,"WebGL, 3D interactions, gamification elements, progress indicators, reward animations",40% higher engagement. Performance trade-off. Provide skip option. Mobile fallback essential.
+18,Event/Conference Landing,"event, conference, meetup, registration, schedule","1. Hero (date/location/countdown), 2. Speakers grid, 3. Agenda/schedule, 4. Sponsors, 5. Register CTA",Register CTA sticky + After speakers + Bottom,Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.,"Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown",Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts.
+19,Product Review/Ratings Focused,"reviews, ratings, testimonials, social-proof, stars","1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA",After reviews summary + Buy button alongside reviews,Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.,"Star fill animations, review filtering, helpful vote interactions, photo lightbox",User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.
+20,Community/Forum Landing,"community, forum, social, members, discussion","1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA",Join button prominent + After member showcase,"Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.","Member avatars animation, activity feed live updates, topic hover previews, join success celebration","Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding."
+21,Before-After Transformation,"before-after, transformation, results, comparison","1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA",After transformation reveal + Bottom,Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.,"Slider comparison interaction, before/after reveal animations, result counters, testimonial videos",Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer.
+22,Marketplace / Directory,"marketplace, directory, search, listing","1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)",Hero Search Bar + Navbar 'List your item',Search: High contrast. Categories: Visual icons. Trust: Blue/Green.,Search autocomplete animation, map hover pins, card carousel,Search bar is the CTA. Reduce friction to search. Popular searches suggestions.
+23,Newsletter / Content First,"newsletter, content, writer, blog, subscribe","1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author",Hero inline form + Sticky header form,Minimalist. Paper-like background. Text focus. Accent color for Subscribe.,Text highlight animations, typewriter effect, subtle fade-in,Single field form (Email only). Show 'Join X,000 readers'. Read sample link.
+24,Webinar Registration,"webinar, registration, event, training, live","1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)",Hero (Right side form) + Bottom anchor,Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.,Countdown timer, speaker avatar float, urgent ticker,Limited seats logic. 'Live' indicator. Auto-fill timezone.
+25,Enterprise Gateway,"enterprise, corporate, gateway, solutions, portal","1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales",Contact Sales (Primary) + Login (Secondary),Corporate: Navy/Grey. High integrity. Conservative accents.,Slow video background, logo carousel, tab switching for industries,Path selection (I am a...). Mega menu navigation. Trust signals prominent.
+26,Portfolio Grid,"portfolio, grid, showcase, gallery, masonry","1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact",Project Card Hover + Footer Contact,Neutral background (let work shine). Text: Black/White. Accent: Minimal.,Image lazy load reveal, hover overlay info, lightbox view,Visuals first. Filter by category. Fast loading essential.
+27,Horizontal Scroll Journey,"horizontal, scroll, journey, gallery, storytelling, panoramic","1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer","Floating Sticky CTA or End of Horizontal Track","Continuous palette transition. Chapter colors. Progress bar #000000.","Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator","Immersive product discovery. High engagement. Keep navigation visible.
+28,Bento Grid Showcase,"bento, grid, features, modular, apple-style, showcase","1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA","Floating Action Button or Bottom of Grid","Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.","Hover card scale (1.02), video inside cards, tilt effect, staggered reveal","Scannable value props. High information density without clutter. Mobile stack.
+29,Interactive 3D Configurator,"3d, configurator, customizer, interactive, product","1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase","Inside Configurator UI + Sticky Bottom Bar","Neutral studio background. Product: Realistic materials. UI: Minimal overlay.","Real-time rendering, material swap animation, camera rotate/zoom, light reflection","Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart.
+30,AI-Driven Dynamic Landing,"ai, dynamic, personalized, adaptive, generative","1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop","Input Field (Hero) + 'Try it' Buttons","Adaptive to user input. Dark mode for compute feel. Neon accents.","Typing text effects, shimmering generation loaders, morphing layouts","Immediate value demonstration. 'Show, don't tell'. Low friction start.