mcp-probe-kit 3.0.14 → 3.0.16

package/build/resources/ui-ux-data/stacks/react-native.json

@@ -0,0 +1,350 @@
+[
+  {
+    "No": "1",
+    "Category": "Components",
+    "Guideline": "Use functional components",
+    "Description": "Hooks-based components are standard",
+    "Do": "Functional components with hooks",
+    "Don't": "Class components",
+    "Code Good": "const App = () => { }",
+    "Code Bad": "class App extends Component",
+    "Severity": "Medium",
+    "Docs URL": "https://reactnative.dev/docs/intro-react"
+  },
+  {
+    "No": "2",
+    "Category": "Components",
+    "Guideline": "Keep components small",
+    "Description": "Single responsibility principle",
+    "Do": "Split into smaller components",
+    "Don't": "Large monolithic components",
+    "Code Good": "<Header /><Content /><Footer />",
+    "Code Bad": "500+ line component",
+    "Severity": "Medium",
+    "Docs URL": ""
+  },
+  {
+    "No": "3",
+    "Category": "Components",
+    "Guideline": "Use TypeScript",
+    "Description": "Type safety for props and state",
+    "Do": "TypeScript for new projects",
+    "Don't": "JavaScript without types",
+    "Code Good": "const Button: FC<Props> = () => { }",
+    "Code Bad": "const Button = (props) => { }",
+    "Severity": "Medium",
+    "Docs URL": ""
+  },
+  {
+    "No": "4",
+    "Category": "Components",
+    "Guideline": "Colocate component files",
+    "Description": "Keep related files together",
+    "Do": "Component folder with styles",
+    "Don't": "Flat structure",
+    "Code Good": "components/Button/index.tsx styles.ts",
+    "Code Bad": "components/Button.tsx styles/button.ts",
+    "Severity": "Low",
+    "Docs URL": ""
+  },
+  {
+    "No": "5",
+    "Category": "Styling",
+    "Guideline": "Use StyleSheet.create",
+    "Description": "Optimized style objects",
+    "Do": "StyleSheet for all styles",
+    "Don't": "Inline style objects",
+    "Code Good": "StyleSheet.create({ container: {} })",
+    "Code Bad": "style={{ margin: 10 }}",
+    "Severity": "High",
+    "Docs URL": "https://reactnative.dev/docs/stylesheet"
+  },
+  {
+    "No": "6",
+    "Category": "Styling",
+    "Guideline": "Avoid inline styles",
+    "Description": "Prevent object recreation",
+    "Do": "Styles in StyleSheet",
+    "Don't": "Inline style objects in render",
+    "Code Good": "style={styles.container}",
+    "Code Bad": "style={{ margin: 10, padding: 5 }}",
+    "Severity": "Medium",
+    "Docs URL": ""
+  },
+  {
+    "No": "7",
+    "Category": "Styling",
+    "Guideline": "Use flexbox for layout",
+    "Description": "React Native uses flexbox",
+    "Do": "flexDirection alignItems justifyContent",
+    "Don't": "Absolute positioning everywhere",
+    "Code Good": "flexDirection: 'row'",
+    "Code Bad": "position: 'absolute' everywhere",
+    "Severity": "Medium",
+    "Docs URL": "https://reactnative.dev/docs/flexbox"
+  },
+  {
+    "No": "8",
+    "Category": "Styling",
+    "Guideline": "Handle platform differences",
+    "Description": "Platform-specific styles",
+    "Do": "Platform.select or .ios/.android files",
+    "Don't": "Same styles for both platforms",
+    "Code Good": "Platform.select({ ios: {}, android: {} })",
+    "Code Bad": "Hardcoded iOS values",
+    "Severity": "Medium",
+    "Docs URL": "https://reactnative.dev/docs/platform-specific-code"
+  },
+  {
+    "No": "9",
+    "Category": "Styling",
+    "Guideline": "Use responsive dimensions",
+    "Description": "Scale for different screens",
+    "Do": "Dimensions or useWindowDimensions",
+    "Don't": "Fixed pixel values",
+    "Code Good": "useWindowDimensions()",
+    "Code Bad": "width: 375",
+    "Severity": "Medium",
+    "Docs URL": ""
+  },
+  {
+    "No": "10",
+    "Category": "Navigation",
+    "Guideline": "Use React Navigation",
+    "Description": "Standard navigation library",
+    "Do": "React Navigation for routing",
+    "Don't": "Manual navigation management",
+    "Code Good": "createStackNavigator()",
+    "Code Bad": "Custom navigation state",
+    "Severity": "Medium",
+    "Docs URL": "https://reactnavigation.org/"
+  },
+  {
+    "No": "11",
+    "Category": "Navigation",
+    "Guideline": "Type navigation params",
+    "Description": "Type-safe navigation",
+    "Do": "Typed navigation props",
+    "Don't": "Untyped navigation",
+    "Code Good": "navigation.navigate<RootStackParamList>('Home', { id })",
+    "Code Bad": "navigation.navigate('Home', { id })",
+    "Severity": "Medium",
+    "Docs URL": ""
+  },
+  {
+    "No": "12",
+    "Category": "Navigation",
+    "Guideline": "Use deep linking",
+    "Description": "Support URL-based navigation",
+    "Do": "Configure linking prop",
+    "Don't": "No deep link support",
+    "Code Good": "linking: { prefixes: [] }",
+    "Code Bad": "No linking configuration",
+    "Severity": "Medium",
+    "Docs URL": "https://reactnavigation.org/docs/deep-linking/"
+  },
+  {
+    "No": "13",
+    "Category": "Navigation",
+    "Guideline": "Handle back button",
+    "Description": "Android back button handling",
+    "Do": "useFocusEffect with BackHandler",
+    "Don't": "Ignore back button",
+    "Code Good": "BackHandler.addEventListener",
+    "Code Bad": "No back handler",
+    "Severity": "High",
+    "Docs URL": ""
+  },
+  {
+    "No": "14",
+    "Category": "State",
+    "Guideline": "Use useState for local state",
+    "Description": "Simple component state",
+    "Do": "useState for UI state",
+    "Don't": "Class component state",
+    "Code Good": "const [count, setCount] = useState(0)",
+    "Code Bad": "this.state = { count: 0 }",
+    "Severity": "Medium",
+    "Docs URL": ""
+  },
+  {
+    "No": "15",
+    "Category": "State",
+    "Guideline": "Use useReducer for complex state",
+    "Description": "Complex state logic",
+    "Do": "useReducer for related state",
+    "Don't": "Multiple useState for related values",
+    "Code Good": "useReducer(reducer initialState)",
+    "Code Bad": "5+ useState calls",
+    "Severity": "Medium",
+    "Docs URL": ""
+  },
+  {
+    "No": "16",
+    "Category": "State",
+    "Guideline": "Use context sparingly",
+    "Description": "Context for global state",
+    "Do": "Context for theme auth locale",
+    "Don't": "Context for frequently changing data",
+    "Code Good": "ThemeContext for app theme",
+    "Code Bad": "Context for list item data",
+    "Severity": "Medium",
+    "Docs URL": ""
+  },
+  {
+    "No": "17",
+    "Category": "State",
+    "Guideline": "Consider Zustand or Redux",
+    "Description": "External state management",
+    "Do": "Zustand for simple Redux for complex",
+    "Don't": "useState for global state",
+    "Code Good": "create((set) => ({ }))",
+    "Code Bad": "Prop drilling global state",
+    "Severity": "Medium",
+    "Docs URL": ""
+  },
+  {
+    "No": "18",
+    "Category": "Lists",
+    "Guideline": "Use FlatList for long lists",
+    "Description": "Virtualized list rendering",
+    "Do": "FlatList for 50+ items",
+    "Don't": "ScrollView with map",
+    "Code Good": "<FlatList data={items} />",
+    "Code Bad": "<ScrollView>{items.map()}</ScrollView>",
+    "Severity": "High",
+    "Docs URL": "https://reactnative.dev/docs/flatlist"
+  },
+  {
+    "No": "19",
+    "Category": "Lists",
+    "Guideline": "Provide keyExtractor",
+    "Description": "Unique keys for list items",
+    "Do": "keyExtractor with stable ID",
+    "Don't": "Index as key",
+    "Code Good": "keyExtractor={(item) => item.id}",
+    "Code Bad": "keyExtractor={(_, index) => index}",
+    "Severity": "High",
+    "Docs URL": ""
+  },
+  {
+    "No": "20",
+    "Category": "Lists",
+    "Guideline": "Optimize renderItem",
+    "Description": "Memoize list item components",
+    "Do": "React.memo for list items",
+    "Don't": "Inline render function",
+    "Code Good": "renderItem={({ item }) => <MemoizedItem item={item} />}",
+    "Code Bad": "renderItem={({ item }) => <View>...</View>}",
+    "Severity": "High",
+    "Docs URL": ""
+  },
+  {
+    "No": "21",
+    "Category": "Lists",
+    "Guideline": "Use getItemLayout for fixed height",
+    "Description": "Skip measurement for performance",
+    "Do": "getItemLayout when height known",
+    "Don't": "Dynamic measurement for fixed items",
+    "Code Good": "getItemLayout={(_, index) => ({ length: 50, offset: 50 * index, index })}",
+    "Code Bad": "No getItemLayout for fixed height",
+    "Severity": "Medium",
+    "Docs URL": ""
+  },
+  {
+    "No": "22",
+    "Category": "Lists",
+    "Guideline": "Implement windowSize",
+    "Description": "Control render window",
+    "Do": "Smaller windowSize for memory",
+    "Don't": "Default windowSize for large lists",
+    "Code Good": "windowSize={5}",
+    "Code Bad": "windowSize={21} for huge lists",
+    "Severity": "Medium",
+    "Docs URL": ""
+  },
+  {
+    "No": "23",
+    "Category": "Performance",
+    "Guideline": "Use React.memo",
+    "Description": "Prevent unnecessary re-renders",
+    "Do": "memo for pure components",
+    "Don't": "No memoization",
+    "Code Good": "export default memo(MyComponent)",
+    "Code Bad": "export default MyComponent",
+    "Severity": "Medium",
+    "Docs URL": ""
+  },
+  {
+    "No": "24",
+    "Category": "Performance",
+    "Guideline": "Use useCallback for handlers",
+    "Description": "Stable function references",
+    "Do": "useCallback for props",
+    "Don't": "New function on every render",
+    "Code Good": "useCallback(() => {}, [deps])",
+    "Code Bad": "() => handlePress()",
+    "Severity": "Medium",
+    "Docs URL": ""
+  },
+  {
+    "No": "25",
+    "Category": "Performance",
+    "Guideline": "Use useMemo for expensive ops",
+    "Description": "Cache expensive calculations",
+    "Do": "useMemo for heavy computations",
+    "Don't": "Recalculate every render",
+    "Code Good": "useMemo(() => expensive(), [deps])",
+    "Code Bad": "const result = expensive()",
+    "Severity": "Medium",
+    "Docs URL": ""
+  },
+  {
+    "No": "26",
+    "Category": "Performance",
+    "Guideline": "Avoid anonymous functions in JSX",
+    "Description": "Prevent re-renders",
+    "Do": "Named handlers or useCallback",
+    "Don't": "Inline arrow functions",
+    "Code Good": "onPress={handlePress}",
+    "Code Bad": "onPress={() => doSomething()}",
+    "Severity": "Medium",
+    "Docs URL": ""
+  },
+  {
+    "No": "27",
+    "Category": "Performance",
+    "Guideline": "Use Hermes engine",
+    "Description": "Improved startup and memory",
+    "Do": "Enable Hermes in build",
+    "Don't": "JavaScriptCore for new projects",
+    "Code Good": "hermes_enabled: true",
+    "Code Bad": "hermes_enabled: false",
+    "Severity": "Medium",
+    "Docs URL": "https://reactnative.dev/docs/hermes"
+  },
+  {
+    "No": "28",
+    "Category": "Images",
+    "Guideline": "Use expo-image",
+    "Description": "Modern performant image component for React Native",
+    "Do": "Use expo-image for caching, blurring, and performance",
+    "Don't": "Use default Image for heavy lists or unmaintained libraries",
+    "Code Good": "<Image source={url} cachePolicy='memory-disk' /> (expo-image)",
+    "Code Bad": "<FastImage source={url} />",
+    "Severity": "Medium",
+    "Docs URL": "https://docs.expo.dev/versions/latest/sdk/image/"
+  },
+  {
+    "No": "29",
+    "Category": "Images",
+    "Guideline": "Specify image dimensions",
+    "Description": "Prevent layout shifts",
+    "Do": "width and height for remote images",
+    "Don't": "No dimensions for network images",
+    "Code Good": "<Image style={{ width: 100 height: 100 }} />",
+    "Code Bad": "<Image source={{ uri }} /> no size",
+    "Severity": "High",
+    "Docs URL": ""
+  }
+]