Run any Skill in Manus with one click

expo-react-native-coder

Stars163

Forks12

UpdatedMay 27, 2026 at 09:50

Comprehensive Expo React Native feature development guide. This skill should be used when building mobile app screens, navigation, data fetching, authentication, deep linking, or native UX patterns with Expo. Triggers on tasks involving Expo Router, React Native components, mobile forms, or app configuration.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

pproenca

pproenca/dot-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

63 files

SKILL.md

readonly

More from this repository

same repository

write-design-docs

pproenca/dot-skills

Write, revise, or review software design documents using Malte Ubl's "Design Docs at Google" guidance. Use when Codex needs to draft a design doc, technical design, RFC, engineering review doc, architecture proposal, mini design doc, or design-doc review focused on context, goals, non-goals, trade-offs, alternatives, cross-cutting concerns, review lifecycle, and deciding whether a design doc is warranted.

2026-06-12163

go-process-cli

pproenca/dot-skills

Write Go CLIs that manage processes and workloads — daemons, supervisors, job runners, deploy tools, anything that spawns or controls other processes. Use when writing, reviewing, or refactoring Go that handles OS signals, runs children via os/exec, fans out concurrent work, threads context for cancellation, returns exit codes, or builds a flag/cobra command surface. Covers the footguns the standard library makes easy to hit — SIGTERM vs Ctrl-C, SIGKILL-by-default children, orphaned process groups, pipe deadlocks, goroutine leaks, zombie reaping, and os.FindProcess lying about liveness. Triggers whenever the task touches process lifecycle, graceful shutdown, subprocess control, or concurrent workload supervision in Go — even if not named.

2026-05-31163

design-review

pproenca/dot-skills

Structured UI design review — existing code (React/JSX, CSS, Tailwind) and, when behaviour matters, the running app in a real browser — reported as a prioritised Before / After / Why table. Covers visual hierarchy, spacing, typography, colour & contrast, component states, motion, responsiveness, accessibility, multi-page flow & navigation, and interaction continuity — grounded in Refactoring UI and Emil Kowalski's principles. For animation/jank/FPS, focus order, and cross-page UX it can drive Chrome via chrome-devtools-mcp to capture what a screenshot can't. Trigger when the user asks to "review this UI", "design review", "critique this component/screen/page or multi-page flow", asks why something "looks off", "looks AI-generated", or "looks like a wireframe", or wants to raise visual polish. For building UI from scratch use web-taste; for the full animation set see emilkowal-animations.

2026-05-27163

deterministic-metric-design

pproenca/dot-skills

Inventing deterministic metrics — turning a fuzzy property like 'maintainability', 'risk', or 'how reducible this code is' into a deterministic, computable number an agent can trust and optimize. Covers the path from construct to adoption — operationalizing the construct, confronting computability limits (Kolmogorov, Rice) with sound proxies, picking the right measurement scale, proving properties (monotonicity, invariance, the Weyuker/Briand axioms), guaranteeing determinism, establishing construct validity (not just LOC in disguise), and hardening against Goodhart-style gaming when an agent optimizes the metric. Trigger when designing, reviewing, or validating a quantitative metric, score, measure, or index — and even when the user doesn't say 'metric' but wants to quantify, score, rank, or measure code/behavior, build a deterministic optimization target, or invent a measure for something previously unquantified (e.g., behavior-preserving codebase-size reduction).

2026-05-27163

implementation-design-patterns

pproenca/dot-skills

Implementation guide for the 22 Gang of Four design patterns in TypeScript, distilled from refactoring.guru. Use this skill when writing, refactoring, or reviewing TypeScript that exhibits a pattern-shaped problem — class-explosion from inheritance, conditionals switching on type, tight coupling to concrete classes, tree-shaped models, runtime algorithm selection, undo/redo, snapshot-and-restore, state-dependent behavior, subscriber notification, or hiding subsystem complexity. Each pattern entry includes intent, problem, solution, applicability (when to use AND when NOT to use), a runnable TypeScript example, implementation steps, pros/cons, and relations to sibling patterns. Trigger even when no pattern is named — cues like "class getting unwieldy," "giant switch," "swap implementations at runtime," "combinatorial subclasses," "need undo," or "traverse a tree" are pattern-shaped. Covers all 5 Creational, 7 Structural, and 10 Behavioral GoF patterns.

2026-05-27163

implementation-functional-patterns

pproenca/dot-skills

TypeScript's functional answers to the 22 Gang of Four classes — factory functions (Factory Method, Abstract Factory, Prototype, Memento), module-scope singletons, fluent immutable builders, wrapper functions (Adapter, Facade), native Proxy, WeakMap caches (Flyweight), discriminated unions with exhaustive match (State, Visitor, Composite), event emitters and signals (Mediator, Observer), pipelines and composition (CoR, Decorator), stream methods (Iterator), closures-as-commands, higher-order strategies, lambda placement. Use when reviewing TypeScript that has a class-shaped problem the GoF catalog solves with a hierarchy but where idiomatic TS reaches for a function, a tagged union, or a data structure. Each rule names the GoF pattern(s) it replaces and when the class form still wins. Trigger on "factory class", "singleton getInstance", "state machine class", "observer pattern", "AST visitor", "where do I put this lambda". Sibling to implementation-design-patterns.

2026-05-27163

name	expo-react-native-coder
description	Comprehensive Expo React Native feature development guide. This skill should be used when building mobile app screens, navigation, data fetching, authentication, deep linking, or native UX patterns with Expo. Triggers on tasks involving Expo Router, React Native components, mobile forms, or app configuration.

Expo React Native Coder Best Practices

Comprehensive feature development guide for Expo React Native applications. Contains 50 rules across 10 categories, covering everything from project setup to testing. Includes production-ready code templates for common features.

When to Apply

Reference these guidelines when:

Setting up a new Expo project with TypeScript
Building navigation with Expo Router (tabs, stacks, drawers, modals)
Creating screens (list, detail, form, settings)
Implementing authentication flows with protected routes
Configuring deep linking and universal links

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Project Setup & Configuration	CRITICAL	`setup-`
2	Routing & Navigation	CRITICAL	`route-`
3	Screen Patterns & Layouts	HIGH	`screen-`
4	Data Fetching & State	HIGH	`data-`
5	Authentication & Security	HIGH	`auth-`
6	Deep Linking & Universal Links	HIGH	`link-`
7	Native UX Patterns	MEDIUM-HIGH	`ux-`
8	Forms & User Input	MEDIUM	`form-`
9	Assets & Theming	MEDIUM	`asset-`
10	Error Handling & Testing	MEDIUM	`test-`

Quick Reference

1. Project Setup & Configuration (CRITICAL)

setup-typescript-config - Configure TypeScript with strict mode
setup-app-config-typescript - Use typed app.config.ts
setup-environment-variables - EXPO_PUBLIC_ prefix for client vars
setup-eas-build-profiles - EAS build profiles per environment
setup-development-build - Development builds vs Expo Go

2. Routing & Navigation (CRITICAL)

route-file-based-routing - File-based routing with Expo Router
route-tab-navigator - Tab navigator with route groups
route-dynamic-segments - Dynamic route segments [param]
route-stack-within-tabs - Nested stack in tabs
route-modal-presentation - Modal screen presentation
route-typed-routes - Enable typed routes
route-drawer-navigator - Drawer navigator setup

3. Screen Patterns & Layouts (HIGH)

screen-list-flashlist - FlashList for large lists
screen-detail-params - Pass minimal data via params
screen-loading-state - Loading and error states
screen-pull-to-refresh - Pull-to-refresh pattern
screen-header-options - Configure screen headers
screen-settings-list - Settings screen with SectionList

4. Data Fetching & State (HIGH)

data-api-routes - Server-side API routes
data-secure-store - SecureStore for sensitive data
data-sqlite-local - SQLite for complex local data
data-fetch-on-focus - Refetch on screen focus
data-async-storage-simple - AsyncStorage for preferences
data-abort-controller - Cancel fetch on unmount

5. Authentication & Security (HIGH)

auth-protected-routes - Stack.Protected guards
auth-context-provider - Auth context with session
auth-oauth-flow - OAuth with AuthSession
auth-login-form - Login form with validation
auth-splash-loading - Splash screen during auth check

6. Deep Linking & Universal Links (HIGH)

link-deep-linking-scheme - Custom URL scheme
link-universal-links-ios - iOS Universal Links
link-android-app-links - Android App Links
link-handle-incoming - Handle incoming URLs

7. Native UX Patterns (MEDIUM-HIGH)

ux-safe-area-insets - SafeAreaView for notches
ux-status-bar - Status bar styling
ux-haptic-feedback - Haptic feedback on actions
ux-gesture-handler - Gesture handler for swipes
ux-keyboard-avoiding - KeyboardAvoidingView

8. Forms & User Input (MEDIUM)

form-text-input-config - TextInput keyboard types
form-controlled-inputs - Controlled inputs with useState
form-submit-button-state - Disable button during submit
form-dismiss-keyboard - Dismiss keyboard on tap outside

9. Assets & Theming (MEDIUM)

asset-image-optimization - expo-image for caching
asset-font-loading - Load fonts with useFonts
asset-vector-icons - @expo/vector-icons
asset-splash-screen - Splash screen configuration

10. Error Handling & Testing (MEDIUM)

test-jest-setup - Jest with jest-expo preset
test-component-testing - Testing Library for components
test-error-boundary - Error boundaries
test-e2e-maestro - Maestro E2E testing

Code Templates

Production-ready templates are available in assets/templates/:

Template	Description
`layouts/tab-layout.tsx`	Bottom tab navigator with icons
`layouts/auth-layout.tsx`	Root layout with protected routes
`screens/list-screen.tsx`	List with FlashList, refresh, states
`screens/detail-screen.tsx`	Detail screen with param handling
`screens/form-screen.tsx`	Form with validation, keyboard handling
`hooks/use-auth.tsx`	Auth context with SecureStore
`components/error-boundary.tsx`	Error boundary component

How to Use

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules

Full Compiled Document

For a single comprehensive document with all rules, see AGENTS.md.

Reference Files

File	Description
AGENTS.md	Complete compiled guide with all rules
references/_sections.md	Category definitions and ordering
assets/templates/	Production-ready code templates
metadata.json	Version and reference information