メニュー
Advanced React Native component patterns with TypeScript including compound components, headless components, HOCs, polymorphic pressables, animated patterns, and platform-adaptive components
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Production-grade Expo and React Native best practices covering performance, navigation, state management, native APIs, platform-specific code, OTA updates, testing, and accessibility
Opinionated Expo + React Native + TypeScript project structure and screen-splitting guidance. Use this whenever the user asks how to organize a mobile codebase, where files should live, how to split large screens or components, how to structure components, hooks, services, store, constants, types, or navigation, or when an Expo app feels messy and needs a consistent architecture.
REST and GraphQL API design patterns for NestJS covering DTOs, versioning, pagination, filtering, sorting, caching, rate limiting, file uploads, and OpenAPI documentation. Use when building NestJS APIs, designing endpoints, implementing query patterns, or optimizing API performance.
Authentication and authorization deep-dive for NestJS covering JWT, sessions, refresh tokens, RBAC, permissions, guards, decorators, OAuth2, multi-tenancy, and security hardening. Use when implementing auth flows, role-based access control, permission systems, or securing NestJS APIs.
Deep Drizzle ORM patterns for NestJS applications covering schema design, migrations, relations, transactions, query builder, repositories, and testing. Use when integrating Drizzle with NestJS, designing database schemas, writing complex queries, or managing migrations.
Opinionated NestJS + TypeScript project structure covering module organization, layer-first architecture, monorepo patterns, and domain-driven folder conventions. Use when organizing a NestJS codebase, deciding where files should live, splitting large modules, or structuring services, controllers, repositories, DTOs, and guards.
| name | expo-component-patterns |
| description | Advanced React Native component patterns with TypeScript including compound components, headless components, HOCs, polymorphic pressables, animated patterns, and platform-adaptive components |
| version | 1.0.0 |
| type | skill |
| tags | ["expo","react-native","typescript","patterns","components","architecture"] |
| category | Mobile |
| author | agent-skills |
A comprehensive guide to advanced React Native component patterns using TypeScript, Expo SDK 52+, and React Native 0.76+. Each pattern includes production-ready code examples with full type safety.
Reference these patterns when:
| Priority | Category | Complexity | Prefix |
|---|---|---|---|
| 1 | Compound Components | MEDIUM | compound- |
| 2 | Headless/Renderless | LOW-MEDIUM | headless- |
| 3 | Higher-Order Components | MEDIUM | hoc- |
| 4 | Polymorphic Components | HIGH | polymorphic- |
| 5 | Controlled/Uncontrolled | MEDIUM | controlled- |
| 6 | Ref & Imperative Handle | MEDIUM | ref- |
| 7 | Slot Pattern | LOW | slot- |
| 8 | Provider Pattern | MEDIUM | provider- |
| 9 | Animated Patterns | HIGH | animated- |
| 10 | Platform-Adaptive | MEDIUM | platform- |
compound-bottom-sheet - Bottom sheet with compound API using @gorhom/bottom-sheetcompound-action-menu - Context-driven action menu with shared statecompound-form-group - Form group with shared validation contextheadless-list - Headless list controller for pagination, refresh, empty stateheadless-swipeable - Swipeable row with render callbackhoc-auth-gate - Authentication gate wrapping screenshoc-keyboard-aware - KeyboardAvoidingView + scroll behavior wrapperpolymorphic-pressable - Pressable that renders as TouchableOpacity or Linkpolymorphic-text - Text with variant-based typographycontrolled-input - Native TextInput with dual-mode statecontrolled-toggle - Switch with controllable stateref-imperative-scroll - ScrollView with imperative scrollToref-native-handle - Custom input with focus/blur handleslot-card-native - Card with native slots (header, media, footer)slot-screen-layout - Screen layout with header, content, footer, FAB slotsprovider-theme - Theme provider with system preference detectionprovider-toast - Toast notification provider with queueanimated-shared-element - Shared element transitions with Reanimatedanimated-layout-transition - Layout animations with entering/exitingplatform-adaptive-component - iOS/Android adaptive renderingplatform-responsive-grid - Responsive grid using useWindowDimensionsRead individual guide files for detailed pattern explanations and code:
guides/compound-bottom-sheet.md
guides/animated-shared-element.md
For the complete guide with all patterns expanded: AGENTS.md