@appscreenshotstudio/mcp 0.2.1 → 0.2.2

package/dist/index.js

@@ -2,6 +2,29 @@
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { z } from 'zod';
+import { existsSync, mkdirSync, copyFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { homedir } from 'node:os';
+import { fileURLToPath } from 'node:url';
+// ─── CLI: install-skill ─────────────────────────────────────────────────────────
+const args = process.argv.slice(2);
+if (args[0] === 'install-skill') {
+    const __dirname = dirname(fileURLToPath(import.meta.url));
+    const src = join(__dirname, '..', 'skills', 'appscreenshotstudio', 'SKILL.md');
+    const destDir = join(homedir(), '.claude', 'skills', 'appscreenshotstudio');
+    const dest = join(destDir, 'SKILL.md');
+    if (!existsSync(src)) {
+        console.error('Error: SKILL.md not found in package. Try reinstalling @appscreenshotstudio/mcp.');
+        process.exit(1);
+    }
+    mkdirSync(destDir, { recursive: true });
+    copyFileSync(src, dest);
+    console.log('Skill installed to ~/.claude/skills/appscreenshotstudio/SKILL.md');
+    console.log('');
+    console.log('You can now use /appscreenshotstudio in Claude Code to generate screenshots.');
+    console.log('Make sure the MCP server is also configured in your Claude Code settings.');
+    process.exit(0);
+}
 const API_BASE = process.env.APPSCREENSHOTSTUDIO_URL || 'https://appscreenshotstudio.com';
 const API_KEY = process.env.APPSCREENSHOTSTUDIO_API_KEY;
 // ─── Devices (mirrors lib/device-specs.ts) ─────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscreenshotstudio/mcp",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "MCP server for generating App Store screenshots via AppScreenshotStudio",
   "type": "module",
   "license": "MIT",
@@ -39,6 +39,7 @@
   },
   "files": [
     "dist",
+    "skills",
     "README.md"
   ]
 }

package/skills/appscreenshotstudio/SKILL.md

@@ -0,0 +1,104 @@
+---
+name: appscreenshotstudio
+version: 1.0.0
+description: Generate App Store screenshots by researching the codebase and calling AppScreenshotStudio MCP tools. Use when the user mentions "screenshots", "App Store", "Play Store", "store listing", or wants to create marketing screenshots for their app.
+allowed_tools:
+  - Read
+  - Glob
+  - Grep
+  - Bash
+  - WebFetch
+  - AskUserQuestion
+argument-hint: [app name or description]
+---
+
+# App Store Screenshot Generator
+
+You generate production-ready App Store / Play Store screenshots by researching the user's codebase and calling the AppScreenshotStudio MCP tools.
+
+## Workflow
+
+### Step 1: Research the Codebase
+
+Before generating, thoroughly research the app. This context dramatically improves output quality.
+
+**Find and read these files:**
+
+- **App identity**: `README.md`, `package.json`, `Cargo.toml`, `pubspec.yaml`, `build.gradle`
+- **Brand colors**: `tailwind.config.*` (colors/theme), `**/theme.*`, `**/colors.*`, `**/palette.*`
+  - SwiftUI: search for `Color(` or `.accentColor`
+  - Flutter: search for `ThemeData`, `primarySwatch`, `colorScheme`
+- **Key screens**: route/page files, navigation definitions, tab bars
+  - React/Next.js: `app/`, `pages/`, route files
+  - SwiftUI: `NavigationView`, `TabView`, `View` structs
+  - Flutter: `MaterialPageRoute`, `GoRouter`
+  - React Native: `createStackNavigator`, `Screen`
+- **Store metadata**: `Info.plist`, fastlane `metadata/`, `AndroidManifest.xml`
+- **Marketing copy**: landing pages, about pages, existing descriptions
+
+**Build this context object:**
+```
+readme_summary: What the app does (2-3 sentences)
+key_screens: ["Dashboard with activity feed", "Settings page", ...]
+color_tokens: {"primary": "#hex", "secondary": "#hex"}
+target_audience: Who it's for
+app_category: fitness|finance|social|productivity|food|travel|health|education
+competitive_edge: What makes it unique
+ui_style: "dark mode with neon accents" or "clean minimal"
+primary_user_flow: "Sign up → Create project → Track progress"
+```
+
+### Step 2: Confirm with the User
+
+Present your findings and ask:
+- "I found these as your main features: [X, Y, Z]. Are these the top 3-5 to highlight?"
+- "Your brand colors appear to be [primary, secondary]. Should I use these?"
+- "What mood fits? Options: energetic, calm, professional, playful, minimal, bold, warm, dark"
+- "How many screenshots? (3-10, default 5)"
+
+### Step 3: Generate Screenshots
+
+Call the `generate-screenshots` MCP tool with:
+- `app_name`: from package.json or user input
+- `app_description`: from README or user description
+- `features`: top 3-5 features as array
+- `brand_colors`: `{ primary, secondary?, accent? }` from theme files
+- `mood`: user's chosen mood
+- `device_id`: `"iphone-6.9"` (default), `"ipad-13"`, `"android-phone"`, `"android-tablet-10"`
+- `count`: number of cards (3-10)
+- `story_flow`: `"auto"` (default), `"hero-intro"`, `"problem-solution"`, `"benefit-first"`, etc.
+- `codebase_context`: the full context object from Step 1
+
+### Step 4: Review and Iterate
+
+Share the project URL and offer refinements using `edit-screenshots`:
+- "Want to change any headlines or colors?"
+- "Should I add a social proof card with ratings?"
+- "Want to try a different layout style?"
+
+### Step 5: Export
+
+Call `render-screenshots` to export PNGs at exact App Store dimensions. This is free.
+
+## Headline Rules
+
+Headlines must pass the "one second test" — readable at thumbnail size.
+
+**Three styles:**
+1. Paint a moment: "Morning runs handled", "Your kitchen simplified"
+2. State an outcome: "Never miss a workout", "Inbox zero daily"
+3. Eliminate a pain: "No more forgotten tasks", "Ditch the spreadsheet"
+
+**Banned:** feature lists, "and"-joined phrases, starting with "The", vague aspirational fluff.
+
+## Credit Costs
+
+| Tool | Cost |
+|------|------|
+| generate-screenshots | 5 credits |
+| edit-screenshots | 5 credits |
+| generate-background | 6 credits |
+| render-screenshots | free |
+| prepare-screenshot-brief | free |
+| list-devices | free |
+| get-project | free |