arc-skill

skill
Security Audit
Warn
Health Warn
  • No license — Repository has no license file
  • Description — Repository has a description
  • Active repo — Last push 0 days ago
  • Low visibility — Only 7 GitHub stars
Code Warn
  • network request — Outbound network request in skills/arc-skill/mobile-design/scripts/mobile_audit.py
Permissions Pass
  • Permissions — No dangerous permissions requested
Purpose
This tool is a collection of architecture guidelines and code templates designed to help AI coding agents quickly scaffold and maintain production-ready React Native (Expo) applications.

Security Assessment
Overall risk: Low. The tool primarily consists of static markdown instructions and code templates for your AI agent to read. It does not request dangerous system permissions or execute hidden shell commands. There are no hardcoded secrets. The automated scan did flag a single outbound network request inside a mobile audit script (`mobile_audit.py`). Because this is a scaffolding utility, making live network calls is unexpected. You should manually review that specific script to ensure it isn't transmitting sensitive project data to an external server before running it.

Quality Assessment
The repository is actively maintained, with its most recent code push happening today. However, there are a few notable concerns regarding maturity and legal safety. It currently lacks an open-source license, which means technically no one has formal permission to use, modify, or distribute the code. Additionally, the project has very low community visibility with only 7 stars, indicating it has not been broadly tested or vetted by the wider developer community.

Verdict
Use with caution: the static rules and templates are generally safe for AI scaffolding, but the unlicensed status and an unexpected network request in the audit script warrant a quick manual code review before integrating into your workflow.
SUMMARY

AI agent skill for scaffolding production-ready React Native (Expo) projects. Architecture reference with navigation, theme system, API layer, state management, storage, i18n, linting, and mobile UX design system. Works with Claude Code, Cursor, Windsurf, GitHub Copilot.

README.md

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)
Forms Formik + Yup
i18n Lingui.js + expo-localization (optional)

Project Structure

skills/arc-skill/
├── project-structure.md          # Folder tree, naming, barrel exports
├── navigation.md                 # Navigation setup, typed hooks, deep linking
├── theme.md                      # Theme system, color schemes, OLED dark mode
├── components.md                 # Component architecture, touch targets, haptics
├── api-services.md               # HTTP client, API modules, error handling
├── storage.md                    # MMKV storage wrappers
├── state-management.md           # React Query setup, query/mutation patterns
├── performance.md                # FlatList, images, animations, startup
├── providers.md                  # Provider stack, AppInitialization
├── typescript.md                 # TSConfig, path aliases, conventions
├── linting.md                    # ESLint, Prettier, Husky, lint-staged
├── i18n.md                       # Internationalization with Lingui
├── mobile-design/                # Mobile UX design system
│   ├── GUIDE.md                  # Master checklist & anti-patterns
│   ├── touch-psychology.md       # Fitts' Law, thumb zones, haptics
│   ├── mobile-performance.md     # Deep optimization guide
│   ├── mobile-navigation.md      # Tab bar, stack, deep linking UX
│   ├── mobile-typography.md      # System fonts, Dynamic Type, scales
│   ├── mobile-color-system.md    # OLED, dark mode, contrast
│   ├── platform-ios.md           # iOS HIG specifics
│   ├── platform-android.md       # Material Design 3 specifics
│   ├── mobile-backend.md         # Offline sync, push, auth patterns
│   ├── decision-trees.md         # Framework & architecture decisions
│   ├── mobile-testing.md         # Testing pyramid & tools
│   ├── mobile-debugging.md       # Debugging tools & techniques
│   └── scripts/mobile_audit.py   # 50+ automated mobile UX checks
└── templates/
    ├── component.md              # Component scaffolding template
    ├── screen.md                 # Screen scaffolding template
    ├── hook.md                   # Custom hook template
    └── api-service.md            # API service + React Query template

Component Convention

component-name/
├── index.tsx                    # Component + barrel export
├── component-name.styles.ts     # Styles via useStyles callback
├── component-name.types.ts      # Props interface
├── component-name.constants.ts  # (optional) Variants, sizes
├── component-name.utils.ts      # (optional) Pure helpers
├── component-name.hooks.ts      # (optional) Component hooks
└── components/                  # (optional) Sub-components
    ├── index.ts
    └── sub-component/
        └── index.tsx

Mobile Audit Script

Run automated UX checks on any React Native project:

python skills/arc-skill/mobile-design/scripts/mobile_audit.py /path/to/project

Expo Skills (Optional)

Expo provides community skills for AI-assisted development covering native UI, deployment, CI/CD, and SDK upgrades. Check the latest available skills in the Expo documentation.

Context7 (Optional)

If using Claude Code, you can add Context7 MCP for latest library docs during scaffolding:

claude mcp add --scope user context7 -- npx -y @upstash/context7-mcp@latest

License

MIT

Reviews (0)

No results found