arc-skill

# arc-skill

Architecture reference and AI agent skill for scaffolding production-ready React Native (Expo) projects.

## What This Is

A collection of architecture guidelines, code templates, and a mobile design system that any AI coding agent can use to scaffold and maintain React Native projects with consistent, battle-tested patterns.

## Agent Commands

The skill is split into focused agents that can be run independently:

| Command | What It Does |
|---------|-------------|
| `/arc-scaffold` | Project init, folder structure, deps, config, linting, navigation |
| `/arc-connect` | API client, storage, state management, auth, i18n |
| `/arc-ui` | Theme system, components, screen content, mobile UX |
| `/arc-feature` | Add a complete new domain (types + API + hooks + screens) |
| `/arc-audit` | Check for UX, performance, and architecture violations |
| `/arc-skill` | Full scaffolding (all-in-one) |

**Typical workflow:**
```
/arc-scaffold → /arc-connect → /arc-ui → /arc-feature (repeat) → /arc-audit
```

## How to Use

1. Clone or copy this repo into your project (or reference it)
2. Add the contents of `AGENTS.md` to your agent's instruction file:

| Agent | Instruction File |
|-------|-----------------|
| Claude Code | `CLAUDE.md` |
| Cursor | `.cursorrules` or `.cursor/rules` |
| Other | Add contents of `AGENTS.md` to your agent's instruction file |

The key line to add is: **"Read the skill files in `skills/arc-skill/` before generating code."**

## Architecture Stack

| Layer | Solution |
|-------|----------|
| Framework | React Native + Expo (TypeScript strict) |
| Navigation | React Navigation (native-stack + bottom-tabs) |
| Server State | TanStack React Query + MMKV persistence |
| HTTP | Axios with auth interceptors + automatic token refresh |
| Storage | react-native-mmkv |
| Styling | Custom theme system + `useStyles()` + `react-native-size-matters` |
| Images | expo-image (blurhash + disk cache) |
| Animations | react-native-reanimated (UI thread) |
|