feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
77
skills/vercel-react-native-skills/rules/ui-native-modals.md
Normal file
77
skills/vercel-react-native-skills/rules/ui-native-modals.md
Normal file
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: Use Native Modals Over JS-Based Bottom Sheets
|
||||
impact: HIGH
|
||||
impactDescription: native performance, gestures, accessibility
|
||||
tags: modals, bottom-sheet, native, react-navigation
|
||||
---
|
||||
|
||||
## Use Native Modals Over JS-Based Bottom Sheets
|
||||
|
||||
Use native `<Modal>` with `presentationStyle="formSheet"` or React Navigation
|
||||
v7's native form sheet instead of JS-based bottom sheet libraries. Native modals
|
||||
have built-in gestures, accessibility, and better performance. Rely on native UI
|
||||
for low-level primitives.
|
||||
|
||||
**Incorrect (JS-based bottom sheet):**
|
||||
|
||||
```tsx
|
||||
import BottomSheet from 'custom-js-bottom-sheet'
|
||||
|
||||
function MyScreen() {
|
||||
const sheetRef = useRef<BottomSheet>(null)
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<Button onPress={() => sheetRef.current?.expand()} title='Open' />
|
||||
<BottomSheet ref={sheetRef} snapPoints={['50%', '90%']}>
|
||||
<View>
|
||||
<Text>Sheet content</Text>
|
||||
</View>
|
||||
</BottomSheet>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
**Correct (native Modal with formSheet):**
|
||||
|
||||
```tsx
|
||||
import { Modal, View, Text, Button } from 'react-native'
|
||||
|
||||
function MyScreen() {
|
||||
const [visible, setVisible] = useState(false)
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<Button onPress={() => setVisible(true)} title='Open' />
|
||||
<Modal
|
||||
visible={visible}
|
||||
presentationStyle='formSheet'
|
||||
animationType='slide'
|
||||
onRequestClose={() => setVisible(false)}
|
||||
>
|
||||
<View>
|
||||
<Text>Sheet content</Text>
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
**Correct (React Navigation v7 native form sheet):**
|
||||
|
||||
```tsx
|
||||
// In your navigator
|
||||
<Stack.Screen
|
||||
name='Details'
|
||||
component={DetailsScreen}
|
||||
options={{
|
||||
presentation: 'formSheet',
|
||||
sheetAllowedDetents: 'fitToContents',
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
Native modals provide swipe-to-dismiss, proper keyboard avoidance, and
|
||||
accessibility out of the box.
|
||||
Reference in New Issue
Block a user