hjemmesidekongen/expo-native-ui
plugins/smedjen/skills/expo-native-ui/SKILL.md
Native UI patterns in Expo — platform-specific components, gestures, animations, and design system integration.
testing
Updated Apr 5, 2026
$ install --global
skillsauthnpx skillsauth add hjemmesidekongen/ai expo-native-uiInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 5, 2026, 5:28 PM15.9s3 files scanned
SKILL.md
- name:
- expo-native-ui
- description:
- >
- user_invocable:
- false
- interactive:
- false
- model_tier:
- senior
- depends_on:
- []
- reads:
- []
- writes:
- []
- type:
- data_validation
- - name:
- list_renderer_justified
- verify:
- FlashList is used for long scrollable lists; FlatList only for short or simple cases
- fail_action:
- Replace FlatList with FlashList if list length is unbounded or has performance issues
- on_fail:
- Native UI has structural issues — fix before shipping
- on_pass:
- Native UI patterns are sound
- origin:
- smedjen
- inspired_by:
- expo-skills-main
- ported_date:
- 2026-03-10
- iteration:
- 1
- changes:
- Adapted from expo skill catalog for smedjen knowledge base
expo-native-ui
Native UI in Expo is React Native with a curated layer on top. No DOM, no CSS — layout is Yoga flexbox and platform behavior diverges in ways that matter.
Platform Specificity
Platform.select for inline divergence. .ios.tsx / .android.tsx file extensions when implementations differ substantially — don't bury large platform branches in a single file.
Safe Area
Always use SafeAreaView from react-native-safe-area-context (not core RN). For programmatic insets use useSafeAreaInsets. Never hardcode top/bottom padding to compensate for notches.
Navigation
expo-router uses file-based routing on top of React Navigation. Screens live in app/. Layouts in _layout.tsx. Use useRouter and useLocalSearchParams — avoid direct React Navigation APIs unless expo-router doesn't expose what you need.
Gestures
react-native-gesture-handler for all touch interactions beyond TouchableOpacity. Wrap the app root in GestureHandlerRootView. Compose conflicting gestures with Gesture.Simultaneous / Gesture.Exclusive.
Animations
Reanimated for smooth 60fps animations on the UI thread — useSharedValue, useAnimatedStyle, withSpring / withTiming. Avoid JS-driven animations for anything continuous. LayoutAnimation works for simple one-off transitions; Reanimated's Layout prop is better.
Styling
StyleSheet.create is not optional — it registers styles natively and avoids object allocation on re-renders. Use useWindowDimensions (not Dimensions.get) for responsive sizing — it's reactive to orientation changes.
Design Tokens, Icons, Images
Keep a tokens.ts exporting spacing, color, typography, radius. No CSS variables in RN — import directly. Use expo-vector-icons for icons and expo-image over core Image — better caching, blurhash placeholder support.
Lists
FlashList (@shopify/flash-list) over FlatList for any unbounded or large list. Set estimatedItemSize accurately — wrong estimates degrade performance. For modals, use @gorhom/bottom-sheet over Modal for bottom sheets — integrates with gesture handler and Reanimated. Modal is fine for simple confirmations. Always wrap form modals in KeyboardAvoidingView.
See references/process.md for platform split patterns, navigation setup, gesture composition, animation recipes, list configuration, and anti-patterns.
Related Skills
hjemmesidekongen/brand-strategy
development
VerifiedTrustedCommunity
Creates a brand from scratch through market research and interactive sparring. Runs competitive research via Perplexity, then guides the user through positioning, audience, voice, values, and content pillars. Produces the full brand guideline set at .ai/brand/{name}/. Use when building a new brand, defining brand strategy for a product, or when /våbenskjold:create is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-loader
testing
VerifiedTrustedCommunity
Loads brand guidelines from .ai/brand/{name}/ and makes them available to the current context. Progressive disclosure: L1 confirms brand exists, L2 loads summary, L3 loads specific files on demand. Use when a downstream skill or user needs brand context, or when /våbenskjold:apply is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-evolve
documentation
VerifiedTrustedCommunity
Guided reinvention of an existing brand guideline. Loads current brand from .ai/brand/{name}/, identifies what to keep vs change, and walks the user through targeted evolution. Preserves brand equity while updating positioning, voice, or values. Use when refreshing a brand or when /våbenskjold:evolve is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-audit
development
VerifiedTrustedCommunity
Codifies an existing brand from materials, samples, and references. Analyzes provided content to extract voice patterns, values, and positioning. Produces the same guideline format as brand-strategy. Use when a brand already exists but isn't documented, or when /våbenskjold:audit is invoked.
SKILL.mdUpdated Apr 5, 2026