# appllama/appllama-skills architecture

> Architecture diagram of the GitHub repository appllama/appllama-skills, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/appllama/appllama-skills
- Repository: https://github.com/appllama/appllama-skills

## Overview

This repository is a pair of agent skills for researching and building mobile apps, not an app runtime. The principal workflow is: an agent uses Appllama research guidance to study winning apps, then applies the app-design guidance to build and refine screens through a simulator-verified loop. The README documents these capabilities and their relationship; source excerpts were not provided, so the graph avoids claims about internal skill-file calls or reference loading.

Main entry points: [`skills/appllama-usage/SKILL.md`](https://github.com/appllama/appllama-skills/blob/main/skills/appllama-usage/SKILL.md) (Appllama usage), [`skills/appllama-app-design-skill/SKILL.md`](https://github.com/appllama/appllama-skills/blob/main/skills/appllama-app-design-skill/SKILL.md) (App design), [`skills/appllama-app-design-skill/references/simulator-loop.md`](https://github.com/appllama/appllama-skills/blob/main/skills/appllama-app-design-skill/references/simulator-loop.md) (Simulator loop)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_research["Research skill"]
  node_usage["Appllama usage<br/>[SKILL.md]"]
  node_research_methods["Research methods"]
  node_build_scratch["Build from scratch"]
  node_improve_screen["Improve a screen"]
end

subgraph group_design["Design skill"]
  node_app_design["App design<br/>[SKILL.md]"]
  node_native_controls["Native controls<br/>[native-controls.md]"]
  node_motion["Motion guidance<br/>[motion.md]"]
  node_image_assets["Image assets<br/>[image-assets.md]"]
  node_performance["Performance guidance<br/>[performance.md]"]
end

subgraph group_validation["Build validation"]
  node_simulator_loop["Simulator loop<br/>[simulator-loop.md]"]
end

node_user(("App builder"))
node_agent(("AI agent"))
node_mcp{{"Appllama MCP"}}

node_user -->|"requests app work"| node_agent
node_agent -->|"uses research"| node_usage
node_usage -->|"uses MCP"| node_mcp
node_agent -->|"builds with"| node_app_design
node_usage -->|"guides building"| node_app_design
node_app_design -->|"validates in"| node_simulator_loop

click node_usage "https://github.com/appllama/appllama-skills/blob/main/skills/appllama-usage/SKILL.md"
click node_research_methods "https://github.com/appllama/appllama-skills/blob/main/skills/appllama-usage/references/research-methods.md"
click node_build_scratch "https://github.com/appllama/appllama-skills/blob/main/skills/appllama-usage/references/build-from-scratch.md"
click node_improve_screen "https://github.com/appllama/appllama-skills/blob/main/skills/appllama-usage/references/improve-a-screen.md"
click node_app_design "https://github.com/appllama/appllama-skills/blob/main/skills/appllama-app-design-skill/SKILL.md"
click node_native_controls "https://github.com/appllama/appllama-skills/blob/main/skills/appllama-app-design-skill/references/native-controls.md"
click node_motion "https://github.com/appllama/appllama-skills/blob/main/skills/appllama-app-design-skill/references/motion.md"
click node_image_assets "https://github.com/appllama/appllama-skills/blob/main/skills/appllama-app-design-skill/references/image-assets.md"
click node_performance "https://github.com/appllama/appllama-skills/blob/main/skills/appllama-app-design-skill/references/performance.md"
click node_simulator_loop "https://github.com/appllama/appllama-skills/blob/main/skills/appllama-app-design-skill/references/simulator-loop.md"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_usage,node_research_methods,node_build_scratch,node_improve_screen toneBlue
class node_app_design,node_native_controls,node_motion,node_image_assets,node_performance toneAmber
class node_simulator_loop toneMint
class node_user,node_agent,node_mcp toneIndigo
```

## Components

### Research skill

- [Appllama usage](https://github.com/appllama/appllama-skills/blob/main/skills/appllama-usage/SKILL.md): `skills/appllama-usage/SKILL.md`
- [Research methods](https://github.com/appllama/appllama-skills/blob/main/skills/appllama-usage/references/research-methods.md): `skills/appllama-usage/references/research-methods.md`
- [Build from scratch](https://github.com/appllama/appllama-skills/blob/main/skills/appllama-usage/references/build-from-scratch.md): `skills/appllama-usage/references/build-from-scratch.md`
- [Improve a screen](https://github.com/appllama/appllama-skills/blob/main/skills/appllama-usage/references/improve-a-screen.md): `skills/appllama-usage/references/improve-a-screen.md`

### Design skill

- [App design](https://github.com/appllama/appllama-skills/blob/main/skills/appllama-app-design-skill/SKILL.md): `skills/appllama-app-design-skill/SKILL.md`
- [Native controls](https://github.com/appllama/appllama-skills/blob/main/skills/appllama-app-design-skill/references/native-controls.md): `skills/appllama-app-design-skill/references/native-controls.md`
- [Motion guidance](https://github.com/appllama/appllama-skills/blob/main/skills/appllama-app-design-skill/references/motion.md): `skills/appllama-app-design-skill/references/motion.md`
- [Image assets](https://github.com/appllama/appllama-skills/blob/main/skills/appllama-app-design-skill/references/image-assets.md): `skills/appllama-app-design-skill/references/image-assets.md`
- [Performance guidance](https://github.com/appllama/appllama-skills/blob/main/skills/appllama-app-design-skill/references/performance.md): `skills/appllama-app-design-skill/references/performance.md`

### Build validation

- [Simulator loop](https://github.com/appllama/appllama-skills/blob/main/skills/appllama-app-design-skill/references/simulator-loop.md): `skills/appllama-app-design-skill/references/simulator-loop.md`

### Other components

- **App builder**
- **AI agent**
- **Appllama MCP**

## Connections

- App builder → AI agent: requests app work (evidence: `README.md`)
- AI agent → Appllama usage: uses research (evidence: `README.md`)
- Appllama usage → Appllama MCP: uses MCP (evidence: `README.md`)
- AI agent → App design: builds with (evidence: `README.md`)
- Appllama usage → App design: guides building (evidence: `README.md`)
- App design → Simulator loop: validates in (evidence: `README.md`)