Folder Structure Blueprint Generator
github/awesome-copilot
Comprehensive technology-agnostic prompt for analyzing and documenting project folder structures.
Capture in-app screenshots of a widget or flow at mobile + desktop sizes — offline, deterministic, real fonts and icons — using the reusable screenshot harness.
$ npx skills add matthiasn/lotti --skill app-screenshots -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install matthiasn/lotti app-screenshots --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "app-screenshots" agent skill from https://github.com/matthiasn/lotti/tree/main/.claude/skills/app-screenshots into .claude/skills/app-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "app-screenshots", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/matthiasn/lotti/tree/main/.claude/skills/app-screenshotsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add matthiasn/lotti --skill app-screenshots -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install matthiasn/lotti app-screenshots --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/matthiasn/lotti.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/app-screenshots .agents/skills/app-screenshots && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "app-screenshots" agent skill from https://github.com/matthiasn/lotti/tree/main/.claude/skills/app-screenshots into .agents/skills/app-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "app-screenshots", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add matthiasn/lotti --skill app-screenshots -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install matthiasn/lotti app-screenshots --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/matthiasn/lotti.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/app-screenshots .cursor/skills/app-screenshots && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "app-screenshots" agent skill from https://github.com/matthiasn/lotti/tree/main/.claude/skills/app-screenshots into .cursor/skills/app-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "app-screenshots", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/matthiasn/lotti.git --path .claude/skills/app-screenshots--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add matthiasn/lotti --skill app-screenshots -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install matthiasn/lotti app-screenshots --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/matthiasn/lotti.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/app-screenshots .gemini/skills/app-screenshots && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "app-screenshots" agent skill from https://github.com/matthiasn/lotti/tree/main/.claude/skills/app-screenshots into .gemini/skills/app-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "app-screenshots", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install matthiasn/lotti app-screenshotsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add matthiasn/lotti --skill app-screenshots -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/matthiasn/lotti.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/app-screenshots .github/skills/app-screenshots && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "app-screenshots" agent skill from https://github.com/matthiasn/lotti/tree/main/.claude/skills/app-screenshots into .github/skills/app-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "app-screenshots", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add matthiasn/lotti --skill app-screenshots -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install matthiasn/lotti app-screenshots --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/matthiasn/lotti.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/app-screenshots .opencode/skills/app-screenshots && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "app-screenshots" agent skill from https://github.com/matthiasn/lotti/tree/main/.claude/skills/app-screenshots into .opencode/skills/app-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "app-screenshots", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
app-screenshotsCapture 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. 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.
5 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit aba2d50. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
flutterFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from matthiasn/lotti at commit aba2d50, republished under its GPL-3.0 licence (© matthiasn). 513 words, ~1,873 tokens.
.claude/skills/app-screenshots/SKILL.md (or your agent's skills folder).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.
For "is this change actually wired up / does it behave correctly", prefer the
run skill (launches the real app). This skill is about appearance.
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).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.
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.
Generate the PNGs:
fvm flutter test --update-goldens test/_scratch_capture_test.dartImages land in test/screenshots/ (the outputDir, next to the test).
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.
Clean up — this is mandatory unless the user asks to keep anything:
rm test/_scratch_capture_test.dart && rm -rf test/screenshotsimport '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,
);
});
}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).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).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.find.byType(MaterialApp) so overlay content (modals,
dialogs, toasts) is included, not just the page body.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
Just SKILL.md in .claude/skills/app-screenshots of matthiasn/lotti.
Open the folder on GitHubat commit aba2d50
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| App Screenshots this skillmatthiasn/lotti | 1.2k | — | ~1.9k | Automated safety check: Pass | GPL-3.0 | |
| Folder Structure Blueprint Generatorgithub/awesome-copilot | 40k | 1 repos | ~3.5k | Automated safety check: Pass | MIT | |
| Test Flet Apps Devflet-dev/flet | 17k | — | ~1.3k | Automated safety check: Pass | Apache-2.0 | |
| Architecture Feature Firstevanca/flutter-ai-rules | 650 | — | ~1.9k | Automated safety check: Pass | MIT | |
| Engine Whats Newflutter/flutter | 179k | — | ~978 | Automated safety check: Pass | BSD-3-Clause | |
| Flutter Cherry Pickflutter/flutter | 179k | — | ~1.8k | Automated safety check: Pass | BSD-3-Clause |
github/awesome-copilot
Comprehensive technology-agnostic prompt for analyzing and documenting project folder structures.
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…
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.
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).
flutter/flutter
How to land a formal cherry-pick of a merged PR for the flutter/flutter repo stable or beta channel.
flutter/flutter
Upgrade browser versions (Chrome or Firefox) in the Flutter Web Engine and/or Framework tests.
matthiasn/lotti
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…
matthiasn/lotti
Maintain a Docusaurus product manual whose prose, navigation, localized page trees, screenshots, coverage metadata, and release build must stay aligned with the application.
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.
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…
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.
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)…
Works with
Categories
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.
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.
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.
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.
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.
Going by SKILL.md and its folder, App Screenshots needs the command-line tools its instructions call (flutter).
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.
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.
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.
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.
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.
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.