Provides architectural structure and technology stack guidelines for the PetAdopt mobile application project.
Install
mkdir -p .claude/skills/skills-mercysperugachi && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/19315" && unzip -o skill.zip -d .claude/skills/skills-mercysperugachi && rm skill.zipInstalls to .claude/skills/skills-mercysperugachi
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
skills — an agent skill by mercysperugachi.Key capabilities
- →Organize code into domain, data, and presentation layers
- →Implement navigation using Expo Router
- →Integrate Supabase for authentication and storage
- →Utilize NativeWind for UI design
How it works
The skill enforces a three-layer architecture consisting of domain, data, and presentation folders. It separates business logic from implementation details to ensure technical decoupling.
Inputs & outputs
When to use skills
- →Scaffold a new feature in the PetAdopt repository
- →Understand the data flow across layers
- →Verify architectural consistency
About this skill
Plan de Desarrollo PetAdopt - Arquitectura Clean
1. Stack Tecnológico
- [cite_start]Framework Móvil: React Native con Expo[cite: 5].
- [cite_start]Backend: Supabase (Auth, PostgreSQL RLS, Storage)[cite: 6].
- [cite_start]Sitio Web Auxiliar: Vercel (Para confirmación de cuenta y reseteo de contraseña)[cite: 7].
- [cite_start]IA Conversacional: API de Gemini (Asistente virtual de salud y cuidado)[cite: 8].
- [cite_start]Mapas: Leaflet + OpenStreetMap (Geolocalización de refugios)[cite: 9].
- [cite_start]Diseño UI: NativeWind (Tailwind CSS) y librerías externas (Sin uso de stylesheets tradicionales).
- [cite_start]Animaciones: Lottie React Native (Uso de al menos 3 animaciones obligatorias).
- Estado Global: Zustand.
- Navegación: Expo Router.
2. Estructura de Carpetas (Arquitectura Clean)
[cite_start]El proyecto se dividirá en 3 capas principales para asegurar el desacoplamiento técnico y facilitar la defensa del código[cite: 53, 54]:
src/
├── domain/ # Capa de Reglas de Negocio (Independiente de librerías)
│ ├── entities/ # Modelos (Mascota, Usuario, Refugio, Solicitud)
│ ├── repositories/ # Interfaces de conexión
│ └── useCases/ # Lógica pura (RegistrarMascota, SolicitarAdopcion)
├── data/ # Capa de Implementación de Datos
│ ├── models/ # DTOs (Data Transfer Objects)
│ ├── repositories/ # Implementación de las interfaces del Domain
│ └── sources/ # APIs externas (Supabase, Gemini API, OSM API)
├── presentation/ # Capa de Interfaz de Usuario (React Native)
│ ├── components/ # Componentes UI reutilizables
│ ├── navigation/ # Configuración de rutas
│ ├── screens/ # Pantallas principales
│ └── store/ # Zustand para manejo de estado
└── core/ # Utilidades, hooks globales y constantes
How it compares
This approach mandates a specific directory structure and architectural pattern for React Native apps compared to standard file organization.
Compared to similar skills
skills side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| skills (this skill) | 0 | 2mo | No flags | Intermediate |
| react-native-architecture | 55 | 2mo | Review | Advanced |
| react-native-architecture | 0 | 3mo | No flags | Intermediate |
| app-specific-patterns | 4 | 1mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
react-native-architecture
wshobson
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.
react-native-architecture
Anhvu1107
ALWAYS use this when the request matches React Native Architecture: Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture.
app-specific-patterns
growilabs
GROWI main application (apps/app) specific patterns for Next.js, Jotai, SWR, and testing. Auto-invoked when working in apps/app.
javascript-typescript-typescript-scaffold
sickn33
You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, N
web-frameworks
mrgoonie
Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined/filled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.
open-notebook-lm-guidelines
RainLib
Core project guidelines, architecture, and UI styling instructions for the FerrisMind (openNotebookLm) AI workspace project. Use this whenever working on the frontend or backend of this project.