{"id":50772187,"url":"https://github.com/lukas-hinterleitner/visual-app-skills","last_synced_at":"2026-06-11T20:01:38.285Z","repository":{"id":361381360,"uuid":"1254252190","full_name":"lukas-hinterleitner/visual-app-skills","owner":"lukas-hinterleitner","description":"Agent skills for visually testing mobile apps on Android — run a Flutter, React Native, or native Android app on an emulator/device, capture real screenshots via adb, read logs, optionally diff against a Figma design, and verify the UI rendered correctly. Works with Claude Code and other coding agents.","archived":false,"fork":false,"pushed_at":"2026-05-30T10:45:19.000Z","size":49,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-30T12:15:38.568Z","etag":null,"topics":["adb","agent-skills","android","claude-code","claude-skills","emulator","figma","flutter","mobile","react-native","screenshot-testing","skill","ui-testing","visual-regression","visual-testing"],"latest_commit_sha":null,"homepage":null,"language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukas-hinterleitner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":"NOTICE","maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-30T10:33:41.000Z","updated_at":"2026-05-30T10:45:23.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/lukas-hinterleitner/visual-app-skills","commit_stats":null,"previous_names":["lukas-hinterleitner/visual-app-skills"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/lukas-hinterleitner/visual-app-skills","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukas-hinterleitner%2Fvisual-app-skills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukas-hinterleitner%2Fvisual-app-skills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukas-hinterleitner%2Fvisual-app-skills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukas-hinterleitner%2Fvisual-app-skills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukas-hinterleitner","download_url":"https://codeload.github.com/lukas-hinterleitner/visual-app-skills/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukas-hinterleitner%2Fvisual-app-skills/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34215254,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adb","agent-skills","android","claude-code","claude-skills","emulator","figma","flutter","mobile","react-native","screenshot-testing","skill","ui-testing","visual-regression","visual-testing"],"created_at":"2026-06-11T20:01:37.373Z","updated_at":"2026-06-11T20:01:38.279Z","avatar_url":"https://github.com/lukas-hinterleitner.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"# visual-app-skills\n\n\u003e Agent skills that give a coding agent **eyes on your running app**. Run a\n\u003e Flutter, React Native, or native Android app on an emulator or device, capture\n\u003e real screenshots via `adb`, read the logs, and verify that a code change\n\u003e rendered correctly. Works with Claude Code and other agents that support the\n\u003e [Agent Skills](https://agentskills.io) format.\n\n[![License: Apache 2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](./LICENSE)\n[![Agent Skills](https://img.shields.io/badge/format-Agent_Skills-6E56CF.svg)](https://agentskills.io)\n\nThis is the open, generalized version of a skill that started life inside a\nsingle Flutter app. It answers the question you'd otherwise answer by squinting\nat an emulator: **did my last change actually render correctly?** — on a real\ndevice, with screenshot and log evidence, not guesswork.\n\nEach skill drives the same loop: launch the app → wait for the first real frame\n→ screenshot via `adb` → read the logs → compare against what the change\nintended → report a concrete verdict. Optionally, diff the screen against a\nFigma design.\n\n\u003e **Scope:** Android only — these skills drive `adb` against a device or\n\u003e emulator. iOS verification needs a Mac and `xcrun simctl`, which is out of\n\u003e scope (the repo is laid out to accept an iOS skill later).\n\n## The skills\n\n| Skill | For | Fires on prompts like |\n|-------|-----|-----------------------|\n| [`flutter-test-android-visually`](skills/flutter-test-android-visually) | Flutter apps (incl. multi-entry / `--target`) | \"test my Flutter app on Android\", \"see the visual changes\" |\n| [`react-native-test-android-visually`](skills/react-native-test-android-visually) | React Native **and** Expo | \"run my RN/Expo app and check this screen\" |\n| [`native-android-test-visually`](skills/native-android-test-visually) | Native Android — Kotlin/Java, Jetpack Compose or Views, Gradle | \"build and run my Android app\", \"verify the Compose screen\" |\n\nAnything else that produces an Android APK — Kotlin/Compose Multiplatform,\nCapacitor/Ionic, Cordova, NativeScript, .NET MAUI, Unity — is covered by the\ngeneric recipe in [`other-frameworks.md`](shared/references/other-frameworks.md):\nif it installs and runs on a device, the `adb` capture core works; you just\nsupply the run command, the application id, and where it logs.\n\n## Requirements\n\n- **Android SDK Platform-Tools** (`adb`) on `PATH`, and a connected device or a\n  running emulator.\n- The **toolchain for your app**: the Flutter SDK, or Node + your package\n  manager (React Native/Expo), or the Gradle wrapper (native Android).\n- A coding agent that supports the **Agent Skills** format (e.g. Claude Code).\n- *(Optional)* a **Figma MCP server**, only if you want the Figma-diff step.\n\nNone of these are bundled — they're prerequisites you already have for building\nyour app.\n\n## Install\n\n### Option A — `skills` CLI (recommended; works across 18+ agents)\n\nCross-agent install via Vercel's [`skills`](https://skills.sh) CLI — Claude\nCode, Cursor, Codex, Copilot, Gemini, Windsurf, Cline, and more:\n\n```bash\nnpx skills add lukas-hinterleitner/visual-app-skills            # all three skills\nnpx skills add lukas-hinterleitner/visual-app-skills \\\n  --skill flutter-test-android-visually                         # just one\n```\n\nIt git-clones the repo (so the shared core resolves) and installs each skill\ninto your agent's skills directory, dereferencing the symlinks. Installs also\nsurface the collection on the [skills.sh](https://skills.sh) leaderboard.\n\n### Option B — Claude Code plugin\n\n```text\n/plugin marketplace add lukas-hinterleitner/visual-app-skills\n/plugin install visual-app-skills@visual-app-skills\n```\n\nThis clones the whole repo, so the shared core resolves automatically. The\nthree skills become available as `visual-app-skills:\u003cskill-name\u003e`.\n\n### Option C — drop-in via the installer (any agent)\n\n```bash\ngit clone https://github.com/lukas-hinterleitner/visual-app-skills.git\ncd visual-app-skills\n./install.sh flutter-test-android-visually   # or: ./install.sh all\n# custom destination (e.g. project scope):\n./install.sh flutter-test-android-visually .claude/skills\n```\n\n`install.sh` **dereferences** the shared symlinks, so each installed skill\nfolder is fully self-contained and works with no dependency on this repo.\n\n### Option D — manual copy\n\n```bash\ncp -RL visual-app-skills/skills/flutter-test-android-visually ~/.claude/skills/\n```\n\n\u003e ⚠️ Use `cp -R**L**` (capital L — dereference symlinks). A plain `cp -r` would\n\u003e copy the shared files as dangling symlinks, because the skills share their\n\u003e common core via symlinks (see below). Options A–C handle this for you.\n\n## How it works\n\nThe bulk of each skill is identical — the `adb` capture loop, UI driving, and\ntroubleshooting are framework-agnostic. Only the **run command** and **where the\napp logs** differ per framework. So each skill's `SKILL.md` is a thin,\nframework-specific shell that points to:\n\n- `references/capture-loop.md` — the universal procedure (shared)\n- `references/\u003cframework\u003e.md` — the run/launch/log specifics (unique per skill)\n- `references/driving-the-ui.md`, `troubleshooting.md`, `figma-comparison.md`,\n  `other-frameworks.md` — shared\n- `scripts/` — `check-devices.sh`, `launch.sh`, `snap.sh`, `capture-logs.sh`,\n  `stop.sh` (shared, framework-agnostic)\n\nThe agent only loads a reference when it needs it (progressive disclosure), so\neach invocation stays lightweight.\n\n## Repository layout \u0026 the no-duplication design\n\n```text\nvisual-app-skills/\n├── .claude-plugin/marketplace.json     # makes the repo an installable plugin\n├── shared/                             # the single source of truth\n│   ├── scripts/*.sh\n│   └── references/{capture-loop,driving-the-ui,troubleshooting,figma-comparison,other-frameworks}.md\n└── skills/\n    └── \u003cframework\u003e-test-android-visually/\n        ├── SKILL.md                    # real, framework-specific\n        ├── references/\u003cframework\u003e.md   # real, framework-specific\n        ├── references/\u003cshared\u003e.md      # symlink → ../../../shared/references/…\n        ├── scripts/                    # symlink → ../../shared/scripts\n        └── evals/evals.json\n```\n\nThe shared core lives in `shared/` **once** and is symlinked into each skill, so\nthere is zero duplication to keep in sync. The trade-offs:\n\n- **Plugin install (Option A)** and a full `git clone` resolve the symlinks\n  natively — the whole repo is present, so the targets exist.\n- **Drop-in (Options B/C)** must dereference the symlinks. `install.sh` does\n  this; for a manual copy use `cp -RL`.\n- **Windows:** enable symlinks in git (`git config --global core.symlinks true`,\n  plus Developer Mode) before cloning, or just use `install.sh`, which writes\n  real files.\n\n## Optional: Figma comparison\n\nIf your team designs in Figma and you have the **Figma MCP server** configured,\npaste a `figma.com/design/...` link and the skill will fetch the design and\ncompare it to the live screen (layout, color, typography, spacing — by relative\nproportion, not pixels). Without Figma, everything else works unchanged — see\n[`figma-comparison.md`](shared/references/figma-comparison.md).\n\n## Trademarks \u0026 affiliation\n\n\"Android\", \"Flutter\", and \"Jetpack Compose\" are trademarks of Google LLC;\n\"React Native\" of Meta; \"Expo\" of Expo (650 Industries); \"Figma\" of Figma, Inc.;\n\"Claude\" / \"Claude Code\" of Anthropic. This is an independent community project,\n**not affiliated with or endorsed by** any of them; the names are used only to\ndescribe interoperability. See [`NOTICE`](./NOTICE).\n\n## License\n\n[Apache License 2.0](./LICENSE) © 2026 Lukas Hinterleitner. You may use, modify,\nand redistribute these skills — including commercially — provided you keep the\ncopyright/license notices and state your changes. See [`NOTICE`](./NOTICE) for\nattribution and the third-party-tool disclosures.\n\n## Contributing\n\nIssues and PRs welcome — see [`CONTRIBUTING.md`](./CONTRIBUTING.md). The one hard\nrule: **never commit third-party binaries** (an SDK, `adb`, a Figma server).\nThey stay user-installed prerequisites.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukas-hinterleitner%2Fvisual-app-skills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukas-hinterleitner%2Fvisual-app-skills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukas-hinterleitner%2Fvisual-app-skills/lists"}