Best for
- Use when the user asks for "App生成器", "生成 Web App", "生成 Tauri App", "生成原生 macOS App", "Finder Quick Action", "只创建 web", or to standardize an existing app with branding, CI/CD, native integration, and Lovinsp where applic…
lovstudio/skills/skills/app-generator/SKILL.md
Use it for deployment and engineering tasks; the detail page covers purpose, installation, and practical steps.
Decision brief
Use this skill to create or upgrade a Skill Publisher-grade app. Choose the app type from the brief instead of forcing desktop packaging: use web-only when the workflow is browser-native, use Tauri for a web-rendered desktop product, and use a native macOS host when an App Exten…
Compatibility matrix
| Platform | Status | Evidence | What to check |
|---|---|---|---|
| Codex | Not declared | No explicit evidence | Portability before use |
| Claude Code | Not declared | No explicit evidence | Portability before use |
| Cursor | Not declared | No explicit evidence | Portability before use |
| Gemini CLI | Not declared | No explicit evidence | Portability before use |
Installation
The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.
npx skills add https://github.com/lovstudio/skills --skill "skills/app-generator"Inspect the Agent Skill "lov-app-generator" from https://github.com/lovstudio/skills/blob/21c2bf1a82684f52d3ed28bac9efc2fa11de4b6d/skills/app-generator/SKILL.md at commit 21c2bf1a82684f52d3ed28bac9efc2fa11de4b6d. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.
Workflow
Resolve SKILLDIR from the installed skill context before running helpers. For manual execution, set it to the directory containing this SKILL.md.
Collect only the missing fields. Use conversation context first. Prefer AskUserQuestion for interactive choices; if that tool is unavailable, ask short direct questions and continue once the answer is clear.
Before changing files, inspect the target project:
Run the helper from the target project root:
Pick the smallest app type that genuinely fits the brief:
Permission review
The documentation asks the agent to run terminal commands or scripts.
python3 "$SKILL_DIR/scripts/audit_app_project.py" --root . --app-type auto --format markdownThe documentation asks the agent to run terminal commands or scripts.
pnpm create vite@latest <project-slug> -- --template react-tsThe documentation includes network, browsing, or remote request actions.
curl -s http://127.0.0.1:<port>/src/main.tsx | rg "lovinsp-component|lovinsp v"Evidence record
| Signal | Value | Evidence type | Meaning |
|---|---|---|---|
| Quality score | 92/100 | Computed | Documentation, specificity, maintenance, and trust rules |
| Repository stars | 64 | Source | Repository attention, not individual Skill quality |
| Compatibility | 0 platforms | Source | Declared in the catalog source record |
| Usage guide | automated source guide | Editorial | Generated or reviewed according to the visible evidence level |
Pinned source
Use this skill to create or upgrade a Skill Publisher-grade app. Choose the app type from the brief instead of forcing desktop packaging: use web-only when the workflow is browser-native, use Tauri for a web-rendered desktop product, and use a native macOS host when an App Extension is the product's primary capability. Common stacks are React + TypeScript + Vite, Next.js, Tauri + React, or Swift/SwiftUI + AppKit extensions, with Skill Publisher brand assets, CI/CD or deploy wiring, and lovinsp click-to-code support for browser-rendered UI.
Run the lov-integrate-lovinsp skill for every app handled by this workflow. Treat
Lovinsp as a default development capability, not an optional feature selected
from the brief.
lov-integrate-lovinsp after the frontend scaffold and build config exist.code-inspector.lovinsp-component or [lovinsp v...].Skip this invariant only when the requested deliverable has no browser-rendered UI and therefore falls outside the app-generation paths described below.
Resolve SKILL_DIR from the installed skill context before running helpers.
For manual execution, set it to the directory containing this SKILL.md.
You MUST follow these steps in order:
Collect only the missing fields. Use conversation context first. Prefer
AskUserQuestion for interactive choices; if that tool is unavailable, ask
short direct questions and continue once the answer is clear.
Required fields:
| Field | Default | Notes |
|---|---|---|
| App name | Ask user | Product/display name, e.g. Lovshot |
| Project slug | Derived from app name | Lowercase kebab-case |
| Brand scope | Skill Publisher | Ask if ambiguous between Skill Publisher / brand-logo / personal brand |
| Target mode | new app | new app or upgrade existing app |
| App type | Case-by-case | web-only, PWA, Tauri desktop, or another fit from the brief |
| Platforms | Case-by-case | Web browser/mobile responsive unless native desktop is justified |
| Native integration | none | Record the exact surface: Finder Quick Action, Services, Share Extension, etc. |
| Core screens | Ask user | 2-5 concrete screens or workflows |
| Backend/API | Ask user if needed | REST, Supabase, local files, Tauri commands, static data, etc. |
| Distribution | Case-by-case | Web deploy for web-only; GitHub Releases + updater for Tauri |
If the user asks for a real implementation and enough information is present, make conservative assumptions and proceed.
Suggested options to collect interactively:
| Question | Recommended choice |
|---|---|
| Target mode | New app |
| App type | Decide from requirements |
| Brand scope | Skill Publisher |
| UI baseline | Configurable Academic + shadcn/ui |
| Data layer | TanStack Query when server state exists |
| Release channel | Web deploy or GitHub Releases based on app type |
Before changing files, inspect the target project:
pwd
find .. -name AGENTS.md -print
find .. -name CLAUDE.md -print
ls
find . -maxdepth 2 -type f \( -name package.json -o -name vite.config.ts -o -name next.config.ts -o -name next.config.js -o -name tauri.conf.json -o -name tauri.conf.json5 -o -name Cargo.toml \) -print
Honor any project-level instructions. If the target lives under a symlinked workspace, follow that project's own AGENTS.md / CLAUDE.md.
Run the helper from the target project root:
python3 "$SKILL_DIR/scripts/audit_app_project.py" --root . --app-type auto --format markdown
Use the output as the implementation checklist. For new projects, decide the
app type first and pass --app-type web or --app-type tauri; the audit will
mostly report missing pieces, which is expected.
Pick the smallest app type that genuinely fits the brief:
Do not add Tauri simply because this skill historically defaulted to Tauri. If the user says "只创建 web" or the requirements do not need native desktop capabilities, create a web app.
Treat the requested macOS surface as an acceptance criterion, not an implementation detail:
NSServices and Service-only workflows never satisfy a Quick Action request.com.apple.services identifier or Library/Services directory name.When the brief includes a Finder Quick Action, read
references/macos-finder-quick-actions.md completely before scaffolding or editing.
For an app-like browser workflow, default to Vite + React + TypeScript:
pnpm create vite@latest <project-slug> -- --template react-ts
cd <project-slug>
pnpm add @tanstack/react-query lucide-react
pnpm add -D typescript
For SEO-heavy, public, content-routed, or SSR/API-route requirements, use Next.js instead and keep the same Skill Publisher layers:
pnpm create next-app@latest <project-slug> --ts --tailwind --eslint --app --src-dir
cd <project-slug>
pnpm add @tanstack/react-query lucide-react
Then apply the Skill Publisher layers in this order:
lov-gen-logo, publish the chosen version into assets/ and
public/, and generate favicons / PWA icons if needed.lov-integrate-lovinsp and verify click-to-code integration.Use this path only when the app type decision requires native desktop capabilities or desktop distribution. Default stack:
pnpm create vite@latest <project-slug> -- --template react-ts
cd <project-slug>
pnpm add @tauri-apps/api @tanstack/react-query lucide-react
pnpm add -D @tauri-apps/cli typescript
pnpm tauri init
Then apply the Skill Publisher layers in this order:
lov-gen-logo, publish the chosen version into assets/ and
public/, prepare a macOS-safe padded icon source, then run the Tauri icon
pipeline from that generated logo.lov-integrate-lovinsp and verify click-to-code integration.If the Tauri product also requires a Finder Quick Action, treat it as a hybrid macOS package and follow the native reference; prefer a native Swift/SwiftUI containing app when the extension is the product's main value.
Follow references/macos-finder-quick-actions.md, run the audit with
--native-integration finder-quick-action, and complete its packaged/runtime checks
before claiming completion.
Do not rebuild the project from scratch. Patch the smallest surface needed:
lov-integrate-lovinsp to install/update Lovinsp and migrate any supported
code-inspector integration.New apps must not use the canonical Skill Publisher logo as the app/product icon.
After the project identity and README describe the target clearly, invoke the
lov-gen-logo workflow from the new app root:
assets/logo-drafts/v1-*.png and .svg based on what the app does,
not a literal reading of its name.assets/logo.png, assets/logo.svg,
public/logo.png, and public/logo.svg.lov-install-tauri-logo and any favicon/tray-icon generation.For upgrades, keep an existing product logo unless the user asks to refresh it;
if the app has no logo, use lov-gen-logo before generating icons.
Resolve canonical assets without assuming a private machine layout:
SKILL_PROFILE_PATH and SKILL_DESIGN_GUIDE.${SKILL_PROFILE_PATH:-$HOME/.skill-publisher/skills/profile.json}.See references/user-config.md for the portable configuration contract.
Rules:
magick src-tauri/icons/icon.png -alpha extract -trim -format '%wx%h%O\n' info:;
for a 512x512 source, content around 400x400 to 440x440 with positive
offsets is usually safer than 512x512+0+0.bg-background, text-foreground,
bg-primary, border-border; do not hard-code brand hex values in UI
components.When shadcn/ui is needed, use the existing lov-install-shadcn-ui skill
as the detailed reference. When TanStack Query is needed, use
lov-install-tanstack-query. For Tauri app icons, use
lov-install-tauri-logo; for new apps, run lov-gen-logo first
and feed the generated logo into the relevant favicon/PWA/Tauri icon pipeline.
Only for Tauri desktop apps, check these areas:
| Area | Expected |
|---|---|
src-tauri/tauri.conf.* | app title, identifier, windows, bundle metadata |
src-tauri/Cargo.toml | Tauri plugins, app metadata, updater if enabled |
| Rust commands | typed command boundary, no broad stringly APIs where avoidable |
| Frontend API | invoke() wrapped through query/mutation helpers for server state |
| Filesystem/native APIs | least permission needed in Tauri capabilities |
| Native extensions | when requested, signed .appex embedded in Contents/PlugIns; never Service-only fallback |
| Icons | generated through Tauri icon pipeline from the target-specific logo produced by lov-gen-logo |
| Dev server | stable project port, preferably via lov-project-port |
Default GitHub Actions surface for web-only apps:
check.yml: install, typecheck, lint/build if present.Default GitHub Actions surface for Tauri apps:
check.yml: install, typecheck, lint/build if present.release.yml: Tauri build for target platforms, draft or publish GitHub
Release, attach artifacts.plugins.updater.pubkey is required at runtime. Do not leave
it out even during early scaffolding: a missing pubkey causes the app to
panic during updater plugin initialization. Use a clear placeholder such as
PLACEHOLDER_REPLACE_WITH_TAURI_SIGNER_PUBLIC_KEY until the real public key
is generated with pnpm tauri signer generate.Do not invent secrets. Use placeholder names and document where the user must set them:
TAURI_SIGNING_PRIVATE_KEYTAURI_SIGNING_PRIVATE_KEY_PASSWORDInvoke the existing lov-integrate-lovinsp workflow for every browser-rendered app.
Do not replace that workflow with a handwritten dependency-only installation: it
also performs version checks, idempotent configuration, and code-inspector
migration.
Completion requires all of the following:
lovinsp exists in project dependencies.lovinspPlugin.lovinspPlugin({ bundler: "vite" }) before the framework plugin.code-inspector dependency or configuration remains.For Vite apps, confirm the Vite config imports and registers
lovinspPlugin({ bundler: "vite" }) before the framework plugin, not merely
that the package is installed. In dev mode, verify the served module contains
lovinsp-component or [lovinsp v...]:
curl -s http://127.0.0.1:<port>/src/main.tsx | rg "lovinsp-component|lovinsp v"
For web-only apps, start the dev server and provide the local URL when the user needs to try the app:
pnpm dev --host 127.0.0.1
For Tauri apps, prefer launching dev mode through a persistent session when the user wants to keep it running after the turn:
tmux new-session -d -s <slug>-dev -c "$PWD" 'pnpm tauri dev'
tmux capture-pane -pt <slug>-dev -S -120
Run the lightest reliable checks that the target repo supports:
pnpm exec tsc --noEmit --pretty false
pnpm build
# Tauri only:
pnpm tauri build --debug
Adjust for npm/yarn/bun and local instructions. If a dev server is needed to verify frontend behavior, start it and give the user the local URL.
For UI changes, use browser or screenshot verification when practical. For Tauri-native behavior, report what was and was not verified.
For Finder Quick Actions, source/build success is insufficient; complete every packaged
and runtime acceptance check in references/macos-finder-quick-actions.md.
If local paths differ, prefer these environment variables rather than hard-coding personal paths:
| Variable | Default / Usage |
|---|---|
SKILL_APP_GENERATOR_SKILL_DIR | Installed lov-app-generator skill directory |
SKILL_DESIGN_GUIDE | Configurable Academic design guide path |
SKILL_PROFILE_PATH | Skill Publisher brand asset root or profile |
Run python3 "$SKILL_DIR/scripts/audit_app_project.py" --help; Finder Quick Action
audits must pass --native-integration finder-quick-action explicitly.
python3 "$SKILL_DIR/scripts/audit_app_project.py" --help
No Python packages are required.
Report:
lov-integrate-lovinsp result, including installation/update/migration status and
runtime readback evidence.运行前读取本 Skill 包的 skill.yaml,由宿主提供 skill-runtime/v1 上下文。字段解析顺序为:当前请求、项目上下文、个人 Preferences、品牌 Profile、通用默认值。
required: true 字段缺失时,按 Manifest 的问题配置向用户提出一个聚焦问题;用户明确同意后再保存回答。context_id、字段路径与来源,诊断内容避开秘密、完整私人路径和原始配置。用户在 Skill 驱动任务中提出修改意见时,继续当前产物前必须执行:
task-specific(仅本次)还是 reusable(可跨任务复用)。task-specific 只修改当前任务,不改 Skill。reusable 先确定作用域:领域规则先更新对应 canonical Skill;适用于所有 Skill 的规则先更新共享规范。reusable 修改会使此前的“确认”“继续”“发吧”失效;完成当前产物修改和回读后必须停下,等待用户下一步指示,不自动进入发布、提交或其他外部写入。Frequently asked questions
Use this skill to create or upgrade a Skill Publisher-grade app. Choose the app type from the brief instead of forcing desktop packaging: use web-only when the workflow is browser-native, use Tauri for a web-rendered desktop product, and use a native macOS host when an App Exten…
The source record exposes this install command: npx skills add https://github.com/lovstudio/skills --skill "skills/app-generator". Inspect the command and pinned source before running it.
Static rules flagged exec-script, network in the source; the page lists the matching lines and excerpts.
Alternatives
vibeeval/vibecosystem
Full-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds complete, visually striking web pages with real media, advanced motion, and compelling copy. Use when: building landing pages, marketing sites, product pages, dashboards, generating media assets (image/video/audio/music), writing conversion copy, creating generative art, or implementing cinematic scroll animations.
wshobson/agents
Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at component level, building a multi-page app, or restyling with known design tokens —
rampstackco/claude-skills
Run QA testing on a page, feature, or full site at one of three depth tiers (smoke, standard, full). Use this skill whenever the user asks to QA a page or site, run a smoke test after a deploy, verify a page before launch, or run a regression sweep. Triggers on QA, QA sweep, smoke test, regression test, post-deploy check, pre-launch check, verify the deploy, test this page, does the page render, broken link, 404, image not loading. Also triggers proactively after a deploy or a new page launch wh
terrylica/cc-skills
Create GitHub fine-grained personal access tokens from a declarative JSON spec by browser automation. Use when you need to mint, verify, or revoke a fine-grained PAT (release tokens, read-only auditors, CI status reporters, account-scoped tokens) — there is NO GitHub API for this, the web UI is the only path. Handles the no-expiration modal, repo picker, and permission grids that break naive automation.