Agent skill

App Screenshots

by matthiasn in matthiasn/lotti

Capture in-app screenshots of a widget or flow at mobile + desktop sizes — offline, deterministic, real fonts and icons — using the reusable screenshot harness.

GPL-3.0Auto-check passedProductivity & Automation

Install App Screenshots

skills CLI
$ npx skills add matthiasn/lotti --skill app-screenshots -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install matthiasn/lotti app-screenshots --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/matthiasn/lotti.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/app-screenshots .claude/skills/app-screenshots && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
app-screenshots
GitHub stars
1.2k
Token cost
~1.9k tokens
SKILL.md length
513 words
Files
1
Skills in repo
10
Repo updated
First seen
Licence
GPL-3.0

At a glance

Capture in-app screenshots of a widget or flow at mobile + desktop sizes — offline, deterministic, real fonts and icons — using the reusable screenshot harness.

  • Works in 5 steps: Find the surface and how to reach the… → Write a throwaway capture test at… → Generate the PNGs → …
  • Asked to show me X in the app
  • SKILL.md covers When to use, The harness, Workflow and Example capture test, plus 1 more section
  • Calls flutter

What it does

App Screenshots is an agent skill from matthiasn/lotti. Capture in-app screenshots of a widget or flow at mobile + desktop sizes — offline, deterministic, real fonts and icons — using the reusable screenshot harness. Use when asked to "show me X in the app", "screenshot this screen", or to preview a UI change for review on phone vs desktop.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Productivity & Automation. It works with Flutter. The repository describes itself as: A private logbook with a staff of personal AI assistants. Agents read what you record and propose what to do next — you approve the changes. End-to-end encrypted sync between… The licence is GPL-3.0.

When your agent uses it

  • Asked to show me X in the app
  • Screenshot this screen
  • Preview a UI change for review on phone vs desktop

Example prompts

  • “show me X in the app”
  • “screenshot this screen”
  • “/app-screenshots”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Find the surface and how to reach the state. Identify the entry widget
  2. Write a throwaway capture test at test/_scratch_capture_test.dart
  3. Generate the PNGs
  4. View and share. Read the PNGs to inspect them and give the user their
  5. Clean up — this is mandatory unless the user asks to keep anything

What it can do on your machine

Read from SKILL.md and the folder at commit aba2d50. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • flutter

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

App Screenshots loads about 1.9k tokens when it runs. Until then it costs about 76 tokens; SKILL.md has 513 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~76
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from matthiasn/lotti at commit aba2d50, republished under its GPL-3.0 licence (© matthiasn). 513 words, ~1,873 tokens.

Download SKILL.mdSave it as .claude/skills/app-screenshots/SKILL.md (or your agent's skills folder).
name
app-screenshots
description
Capture in-app screenshots of a widget or flow at mobile + desktop sizes — offline, deterministic, real fonts and icons — using the reusable screenshot harness. Use when asked to "show me X in the app", "screenshot this screen", or to preview a UI change for review on phone vs desktop.
argument-hint
<surface to capture, e.g. 'project create modal'>

In-App Screenshots

Produces PNGs of a widget or flow rendered inside the real app shell, at phone and desktop viewports, with real fonts and icons. It runs through flutter test --update-goldens — fully offline and deterministic — so it does not require a display, the GUI app, or driving the device.

This is a visualization tool, not a golden test: there are no committed reference images. You write a throwaway capture test, emit the PNGs, share them, then delete the test. Nothing screenshot-related gets committed unless the user explicitly asks to keep it.

When to use

  • "Show me the <screen/modal/dialog> in app context."
  • "What does this change look like on mobile vs desktop?"
  • Previewing a UI change for design review.

For "is this change actually wired up / does it behave correctly", prefer the run skill (launches the real app). This skill is about appearance.

The harness

test/test_utils/screenshot_harness.dart provides:

  • loadAppFonts() — loads every bundled font (app families + Material/Cupertino icon fonts + icon-font packages) from FontManifest.json. Call once in setUpAll. Without it, glyphs and icons render as boxes.
  • screenshotTheme({bool dark = true}) — the production withOverrides theme with Inter applied to the Material text themes (the bare test theme falls back to an unbundled font otherwise).
  • captureInApp(tester, {child, name, size, dark, devicePixelRatio, overrides, interaction, outputDir}) — sizes the view, pumps child in the app shell, runs interaction (open a modal, tap a FAB, focus a field…), then writes <outputDir>/<name>.png relative to the calling test file's directory.
  • ScreenshotViewport.phone (390×844) and ScreenshotViewport.desktop (1280×800).
Show full SKILL.md (283 more words)Show less

Workflow

  1. Find the surface and how to reach the state. Identify the entry widget (often a tab/page like ProjectsTabPage) and the tap/scroll needed to reach the state to capture (e.g. tapping the FAB to open a modal). Reuse existing widget tests for that surface to learn the required service registrations and provider overrides — copy their setUp.

  2. Write a throwaway capture test at test/_scratch_capture_test.dart (the _scratch_ prefix marks it disposable). Use setUpTestGetIt + additionalSetup for services the surface resolves through getIt, and pass provider overrides via captureInApp(overrides: ...). Drive the state in interaction.

  3. Generate the PNGs:

    sh
    fvm flutter test --update-goldens test/_scratch_capture_test.dart

    Images land in test/screenshots/ (the outputDir, next to the test).

  4. View and share. Read the PNGs to inspect them and give the user their paths. For a PR's before/after pair, stage and publish them per knowledge/conventions/screenshots.md before the cleanup step deletes them.

  5. Clean up — this is mandatory unless the user asks to keep anything:

    sh
    rm test/_scratch_capture_test.dart && rm -rf test/screenshots

Example capture test

dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_riverpod/misc.dart'; // Override
import 'package:flutter_test/flutter_test.dart';
import 'package:lotti/classes/project_data.dart';
import 'package:lotti/features/projects/model/projects_overview_models.dart';
import 'package:lotti/features/projects/state/project_providers.dart';
import 'package:lotti/features/projects/ui/pages/projects_tab_page.dart';
import 'package:lotti/features/user_activity/state/user_activity_service.dart';
import 'package:lotti/get_it.dart';
import 'package:lotti/services/entities_cache_service.dart';
import 'package:lotti/services/nav_service.dart';
import 'package:mocktail/mocktail.dart';

import 'features/categories/test_utils.dart';
import 'features/projects/test_utils.dart';
import 'mocks/mocks.dart';
import 'test_utils/screenshot_harness.dart';
import 'widget_test_utils.dart';

void main() {
  setUpAll(loadAppFonts);

  final groups = [
    ProjectCategoryGroup(
      categoryId: 'lotti',
      category: CategoryTestUtils.createTestCategory(id: 'lotti', name: 'Lotti'),
      projects: [
        ProjectListItemData(
          project: makeTestProject(id: 'p1', title: 'Daily Operating System'),
          category: CategoryTestUtils.createTestCategory(id: 'lotti', name: 'Lotti'),
          taskRollup: const ProjectTaskRollupData(totalTaskCount: 25),
        ),
      ],
    ),
  ];

  List<Override> overrides() => [
    projectsOverviewProvider.overrideWith(
      (ref) => Stream.value(ProjectsOverviewSnapshot(groups: groups)),
    ),
    visibleProjectGroupsProvider.overrideWith((ref) => AsyncValue.data(groups)),
  ];

  setUp(() async {
    await setUpTestGetIt(
      additionalSetup: () {
        final activity = MockUserActivityService();
        when(activity.updateActivity).thenReturn(null);
        getIt.registerSingleton<UserActivityService>(activity);

        final nav = MockNavService();
        when(() => nav.isDesktopMode).thenReturn(false);
        when(() => nav.desktopSelectedProjectId)
            .thenReturn(ValueNotifier<String?>(null));
        getIt.registerSingleton<NavService>(nav);

        final cache = MockEntitiesCacheService();
        when(() => cache.getCategoryById(any())).thenReturn(null);
        getIt.registerSingleton<EntitiesCacheService>(cache);
      },
    );
  });
  tearDown(tearDownTestGetIt);

  Future<void> openCreate(WidgetTester tester) =>
      tester.tap(find.bySemanticsLabel('New Project'));

  testWidgets('phone', (tester) async {
    await captureInApp(
      tester,
      child: const ProjectsTabPage(),
      name: 'create_mobile',
      overrides: overrides(),
      interaction: openCreate,
    );
  });

  testWidgets('desktop', (tester) async {
    await captureInApp(
      tester,
      child: const ProjectsTabPage(),
      name: 'create_desktop',
      size: ScreenshotViewport.desktop,
      overrides: overrides(),
      interaction: openCreate,
    );
  });
}

Gotchas

  • Override lives in package:flutter_riverpod/misc.dart in this Riverpod version — import it for the List<Override> type (separate from flutter_riverpod.dart, which has AsyncValue).
  • Register every service the surface touches via setUpTestGetIt's additionalSetup, or the widget throws on a missing getIt registration. Modals pull in their own deps (e.g. the create modal's CategoryField needs EntitiesCacheService).
  • Desktop layout is width-driven. captureInApp(size: ScreenshotViewport.desktop) sets both the view physical size and MediaQuery, so width-gated split views (isDesktopLayout) and the dialog branch (modal page breakpoint) engage correctly.
  • Capture target is find.byType(MaterialApp) so overlay content (modals, dialogs, toasts) is included, not just the page body.
  • Don't commit the scratch test or test/screenshots/. Delete them when done. The harness itself is the only permanent artifact.

© matthiasn, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/app-screenshots of matthiasn/lotti.

Open the folder on GitHubat commit aba2d50

Compare with similar skills

App Screenshots next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

App Screenshots compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
App Screenshots this skillmatthiasn/lotti1.2k—~1.9kAutomated safety check: PassGPL-3.0
Folder Structure Blueprint Generatorgithub/awesome-copilot40k1 repos~3.5kAutomated safety check: PassMIT
Test Flet Apps Devflet-dev/flet17k—~1.3kAutomated safety check: PassApache-2.0
Architecture Feature Firstevanca/flutter-ai-rules650—~1.9kAutomated safety check: PassMIT
Engine Whats Newflutter/flutter179k—~978Automated safety check: PassBSD-3-Clause
Flutter Cherry Pickflutter/flutter179k—~1.8kAutomated safety check: PassBSD-3-Clause

Similar skills

  • Official

    Comprehensive technology-agnostic prompt for analyzing and documenting project folder structures.

    40k GitHub starsUsed in 1 repo~3.5k tokens
    Productivity & AutomationAuto-check passed
  • Test Flet Apps Dev

    flet-dev/flet

    A skill your agent uses when testing or debugging Flet apps in maintainer/contributor development mode with local Python package sources and the local Flutter client, including web, desktop…

    17k GitHub stars~1.3k tokensUpdated today
    MobileAuto-check passed
  • Architecture Feature First

    evanca/flutter-ai-rules

    A skill your agent uses when creating a feature, designing folder structure, adding repositories/services/view models, wiring dependency injection, or deciding which layer owns logic.

    650 GitHub stars~1.9k tokensUpdated 26 days ago
    MobileAuto-check passed
  • Engine Whats New

    flutter/flutter

    Generates the "what's new" release summary and diff file for changes in the Flutter engine (//engine/src/flutter) between two releases (e.g., 3.47 vs 3.44).

    179k GitHub stars~978 tokensUpdated today
    MobileAuto-check passed
  • Flutter Cherry Pick

    flutter/flutter

    How to land a formal cherry-pick of a merged PR for the flutter/flutter repo stable or beta channel.

    179k GitHub stars~1.8k tokensUpdated today
    MobileAuto-check passed
  • Upgrade Browser

    flutter/flutter

    Upgrade browser versions (Chrome or Firefox) in the Flutter Web Engine and/or Framework tests.

    179k GitHub stars~1.1k tokensUpdated today
    MobileAuto-check passed

More from matthiasn/lotti

All 10 skills in this repo
  • Add, complete, or audit a locale across a Flutter application's ARB catalogs and a localized Docusaurus manual, including generated localization code, locale selectors, native platform declarations…

    1.2k GitHub stars~1.2k tokensUpdated today
    Auto-check passed
  • Maintain a Docusaurus product manual whose prose, navigation, localized page trees, screenshots, coverage metadata, and release build must stay aligned with the application.

    1.2k GitHub stars~930 tokensUpdated today
    Auto-check passed
  • Beads

    matthiasn/lotti

    A skill your agent uses for authorized Lotti maintainer work that needs private durable task tracking, issue dependencies, blocker management, multi-session handoff, or shared agent memory.

    1.2k GitHub stars~589 tokensUpdated today
    Auto-check passed
  • Design Review Panel

    matthiasn/lotti

    Run a multi-agent design review on a UI surface — capture reproducible baseline screenshots, then rate them with a panel of design experts (one agent per craft dimension) and, optionally, a panel of…

    1.2k GitHub stars~1.6k tokensUpdated today
    Auto-check passed
  • Release

    matthiasn/lotti

    Cut a Lotti release — assemble the changelog.d/ fragments into CHANGELOG.md and the Flathub metainfo, bump the version, open the release PR, then tag.

    1.2k GitHub stars~2.6k tokensUpdated today
    Auto-check passed
  • Tutorial Videos

    matthiasn/lotti

    Build, debug, extend, localize, or publish the automated tutorial videos — the workbench that drives the real Linux app under Xvfb (virtual mic, live Voxtral transcription, task-agent proposals)…

    1.2k GitHub stars~2.2k tokensUpdated today
    Auto-check: notes

Works with

Questions about App Screenshots

What does App Screenshots do?

Capture in-app screenshots of a widget or flow at mobile + desktop sizes — offline, deterministic, real fonts and icons — using the reusable screenshot harness. App Screenshots is an agent skill from matthiasn/lotti. Capture in-app screenshots of a widget or flow at mobile + desktop sizes — offline, deterministic, real fonts and icons — using the reusable screenshot harness.

When should I use App Screenshots?

App Screenshots fits situations like: asked to show me X in the app; screenshot this screen; preview a UI change for review on phone vs desktop.

How do I install App Screenshots in Claude Code?

Run `npx skills add matthiasn/lotti --skill app-screenshots -a claude-code`. Or copy the skill folder (.claude/skills/app-screenshots in matthiasn/lotti) into .claude/skills/app-screenshots in your project. Claude Code loads it when a task matches its description.

How do I install App Screenshots in Codex?

Run `npx skills add matthiasn/lotti --skill app-screenshots -a codex`. Or copy the skill folder (.claude/skills/app-screenshots in matthiasn/lotti) into .agents/skills/app-screenshots in your project. Codex loads it when a task matches its description.

Can I use App Screenshots in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add matthiasn/lotti --skill app-screenshots -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/app-screenshots, .gemini/skills/app-screenshots, .github/skills/app-screenshots and .opencode/skills/app-screenshots in your project.

What does App Screenshots need to run?

Going by SKILL.md and its folder, App Screenshots needs the command-line tools its instructions call (flutter).

Does App Screenshots access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is App Screenshots safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does App Screenshots use?

App Screenshots is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does App Screenshots use?

About 1.9k tokens (SKILL.md is roughly 7.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to App Screenshots?

Skills that share tags, products or a category with App Screenshots: Folder Structure Blueprint Generator (github/awesome-copilot, 40k stars), Test Flet Apps Dev (flet-dev/flet, 17k stars), Architecture Feature First (evanca/flutter-ai-rules, 650 stars) and Engine Whats New (flutter/flutter, 179k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains App Screenshots?

matthiasn (a GitHub user) maintains it in matthiasn/lotti, which has 1,199 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 9, 2026.

Source: matthiasn/lotti on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.