Feat/docs landing page updates

.claude-plugin/marketplace.json

@@ -4,7 +4,7 @@
     "name": "Jonas Broms"
   },
   "metadata": {
-    "description": "Metaprompting plugins for Claude Code — structured workflows for design, coding, research, and more",
+    "description": "Metaprompting plugins for AI coding assistants — structured workflows for design, coding, research, and more",
     "version": "0.1.0",
     "pluginRoot": "./plugins"
   },
@@ -13,127 +13,191 @@
       "name": "design",
       "source": "./plugins/design",
       "description": "Five-phase design thinking process for component design, writing to Figma canvas via MCP",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["design", "figma", "components", "design-thinking", "ux"],
       "category": "design"
     },
     {
       "name": "research",
       "source": "./plugins/research",
       "description": "Four-phase Double Diamond research methodology for structured discovery and validation",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["research", "double-diamond", "discovery", "validation", "methodology"],
       "category": "research"
     },
     {
       "name": "development",
       "source": "./plugins/development",
       "description": "Process-oriented software development workflow: plan, build, test, debug, review, and ship",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["development", "tdd", "debugging", "code-review", "planning", "workflow"],
       "category": "development"
     },
     {
       "name": "marketing",
       "source": "./plugins/marketing",
       "description": "RACE Framework marketing process — strategy, reach, act, convert, engage with 33 skills",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["marketing", "growth", "seo", "cro", "race-framework", "digital-marketing"],
       "category": "marketing"
     },
     {
       "name": "branding",
       "source": "./plugins/branding",
       "description": "Five-phase brand creation process with compliance auditing — discover, strategy, verbal, visual, guidelines",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["branding", "brand-identity", "visual-identity", "brand-guidelines", "compliance"],
       "category": "branding"
     },
     {
       "name": "accessibility",
       "source": "./plugins/accessibility",
       "description": "WCAG-EM accessibility audit workflow — scope, evaluate, report, remediate, retest with conformance scoring",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["accessibility", "a11y", "wcag", "aria", "audit", "compliance"],
       "category": "accessibility"
     },
     {
       "name": "project-management",
       "source": "./plugins/project-management",
       "description": "Scrum-based project management — initiate, plan, sprint, review, improve with 32 skills",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["project-management", "scrum", "agile", "sprint", "retrospective", "planning"],
       "category": "project-management"
     },
     {
       "name": "coaching",
       "source": "./plugins/coaching",
       "description": "Domain-specific mentorship and feedback — UX, code, copy, accessibility, and strategy coaching",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["coaching", "mentorship", "feedback", "review", "ux-laws", "clean-code"],
       "category": "coaching"
     },
     {
       "name": "legal",
       "source": "./plugins/legal",
       "description": "Legal Lifecycle Framework — assess, draft, review, comply, govern with 35 skills",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["legal", "compliance", "contracts", "gdpr", "privacy", "legal-ops"],
       "category": "legal"
     },
     {
       "name": "leadership",
       "source": "./plugins/leadership",
       "description": "Leadership development process and day-to-day management tools — assess, vision, build, develop, sustain with 7 utility skills",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["leadership", "management", "1-on-1", "okrs", "delegation", "feedback", "team-building"],
       "category": "leadership"
     },
     {
       "name": "metapowers",
       "source": "./plugins/metapowers",
       "description": "Cross-domain meta-skills — project status, initialization, and reporting across all Metapowers domains",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["metapowers", "status", "init", "report", "cross-domain", "meta"],
       "category": "core"
     },
     {
       "name": "security",
       "source": "./plugins/security",
       "description": "NIST CSF 2.0 cybersecurity framework — govern, identify, protect, detect, respond, recover with 39 skills",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["security", "cybersecurity", "nist", "owasp", "appsec", "incident-response"],
       "category": "security"
     },
     {
       "name": "compliance",
       "source": "./plugins/compliance",
       "description": "GRC Compliance Lifecycle — scope, assess, remediate, certify, monitor with 48 skills across 30+ regulations",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["compliance", "grc", "soc2", "gdpr", "iso27001", "hipaa", "pci-dss", "fedramp", "audit"],
       "category": "compliance"
     },
     {
       "name": "bookkeeping",
       "source": "./plugins/bookkeeping",
       "description": "Four-phase bookkeeping cycle — record, categorize, reconcile, report with 5 utility skills",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["bookkeeping", "transactions", "reconciliation", "accounts", "financial-records"],
       "category": "bookkeeping"
     },
     {
       "name": "accounting",
       "source": "./plugins/accounting",
       "description": "Eight-phase accounting cycle — analyze, journal, ledger, trial balance, adjust, statements, close with 5 utility skills",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["accounting", "journal-entries", "ledger", "trial-balance", "financial-statements", "closing"],
       "category": "accounting"
     },
     {
       "name": "finance",
       "source": "./plugins/finance",
       "description": "Six-phase FP&A process — assess, plan, forecast, budget, model, review with 5 utility skills",
+      "homepage": "https://bromso.github.io/metapowers/",
+      "license": "MIT",
+      "repository": "https://github.com/bromso/metapowers",
       "version": "0.1.0",
+      "author": {"name": "Jonas Broms"},
       "keywords": ["finance", "fpa", "budgeting", "forecasting", "financial-modeling", "cash-flow"],
       "category": "finance"
     }

README.md

@@ -2,12 +2,12 @@
 
 [![npm version](https://img.shields.io/npm/v/create-metapowers.svg)](https://www.npmjs.com/package/create-metapowers)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Claude Code](https://img.shields.io/badge/Claude_Code-Plugin-CC785C?logo=anthropic&logoColor=white)](https://claude.ai/code)
+[![LLM Plugin](https://img.shields.io/badge/LLM-Plugin-CC785C?logo=anthropic&logoColor=white)](https://bromso.github.io/metapowers/)
 [![Codex CLI](https://img.shields.io/badge/Codex_CLI-Compatible-10A37F?logo=openai&logoColor=white)](https://github.com/openai/codex)
 [![OpenCode](https://img.shields.io/badge/OpenCode-Compatible-6366F1)](https://opencode.ai)
 [![Cursor](https://img.shields.io/badge/Cursor-Compatible-000?logo=cursor&logoColor=white)](https://cursor.com)
 
-Structured, repeatable workflows for digital production domains. **275+ skills across 16 domains** — powered by proven methodologies. Works with Claude Code, Codex CLI, OpenCode, and Cursor.
+Structured, repeatable workflows for digital production domains. **275+ skills across 16 domains** — powered by proven methodologies. Works with any AI coding assistant — Claude Code, Codex CLI, OpenCode, Cursor, and more.
 
 ## Quick Start
 
@@ -103,7 +103,7 @@ metapowers/
 ### Prerequisites
 
 - [Bun](https://bun.sh) >= 1.3
-- One of: Claude Code, Codex CLI, OpenCode, or Cursor
+- One of: Claude Code, Codex CLI, OpenCode, Cursor, or any SKILL.md-compatible assistant
 
 ### Setup
 

apps/docs/app/(home)/page.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useState } from "react";
 import Link from "next/link";
 import {
 	Palette,
@@ -174,8 +177,8 @@ const steps = [
 	{
 		number: "01",
 		title: "Install",
-		command: "claude install bromso/metapowers",
-		description: "Add all domains to Claude Code in one command.",
+		command: "npx create-metapowers",
+		description: "Add all domains in one command.",
 	},
 	{
 		number: "02",
@@ -191,6 +194,90 @@ const steps = [
 	},
 ];
 
+const installTabs = [
+	{ label: "npm", command: "npx create-metapowers" },
+	{ label: "pnpm", command: "pnpx create-metapowers" },
+	{ label: "yarn", command: "yarn dlx create-metapowers" },
+	{ label: "bun", command: "bunx create-metapowers" },
+	{ label: "Claude Code", command: "claude install bromso/metapowers" },
+	{ label: "Cursor", command: "cp metapowers/.cursorrules ./" },
+];
+
+function InstallTabs() {
+	const [activeTab, setActiveTab] = useState(0);
+	const [copied, setCopied] = useState(false);
+
+	function copyToClipboard() {
+		navigator.clipboard.writeText(installTabs[activeTab].command);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
+	}
+
+	return (
+		<div className="w-full max-w-xl">
+			<div className="flex overflow-x-auto border-b border-fd-border">
+				{installTabs.map((tab, i) => (
+					<button
+						key={tab.label}
+						type="button"
+						onClick={() => setActiveTab(i)}
+						className={`shrink-0 px-4 py-2 text-sm font-medium transition-colors ${
+							i === activeTab
+								? "border-b-2 border-fd-primary text-fd-foreground"
+								: "text-fd-muted-foreground hover:text-fd-foreground"
+						}`}
+					>
+						{tab.label}
+					</button>
+				))}
+			</div>
+			<div className="relative rounded-b-lg border border-t-0 border-fd-border bg-fd-card p-4">
+				<code className="block text-sm text-fd-foreground">
+					<span className="text-fd-muted-foreground">$ </span>
+					{installTabs[activeTab].command}
+				</code>
+				<button
+					type="button"
+					onClick={copyToClipboard}
+					className="absolute right-3 top-3 rounded-md p-1.5 text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-foreground"
+					aria-label="Copy to clipboard"
+				>
+					{copied ? (
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="2"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+						>
+							<path d="M20 6 9 17l-5-5" />
+						</svg>
+					) : (
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="2"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+						>
+							<rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+							<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+						</svg>
+					)}
+				</button>
+			</div>
+		</div>
+	);
+}
+
 const skillManagement = [
 	{
 		icon: Radar,
@@ -256,14 +343,14 @@ export default function HomePage() {
 			<section className="flex flex-col items-center px-6 pb-16 pt-24 text-center md:pb-24 md:pt-32">
 				<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-fd-border bg-fd-secondary/50 px-4 py-1.5 text-sm text-fd-muted-foreground">
 					<Zap className="h-3.5 w-3.5" />
-					<span>Claude Code plugins for structured workflows</span>
+					<span>LLM plugins for structured workflows</span>
 				</div>
 				<h1 className="mb-6 max-w-3xl text-5xl font-bold tracking-tight text-fd-foreground md:text-6xl lg:text-7xl">
 					Metapowers
 				</h1>
 				<p className="mb-10 max-w-2xl text-lg leading-relaxed text-fd-muted-foreground md:text-xl">
 					Structured workflows for every discipline — from design to legal.
-					Claude Code plugins powered by proven methodologies.
+					LLM-agnostic plugins that package skills, agents, and MCP to power proven methodologies.
 				</p>
 				<div className="flex flex-col gap-3 sm:flex-row sm:gap-4">
 					<Link
@@ -283,6 +370,9 @@ export default function HomePage() {
 						GitHub
 					</a>
 				</div>
+				<div className="mt-10 flex w-full justify-center">
+					<InstallTabs />
+				</div>
 			</section>
 
 			{/* Stats */}

apps/docs/content/docs/design/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Design Domain Overview
-description: A five-phase design thinking process for building UI components in Claude Code.
+description: A five-phase design thinking process for building UI components with AI coding assistants.
 ---
 
 The Design plugin implements a complete design thinking methodology with five phases. Each phase has a dedicated slash command that guides you through structured research, definition, ideation, prototyping, and testing.

apps/docs/content/docs/development/architecture/index.mdx

@@ -26,7 +26,7 @@ plugins/design/
 
 ## The Skill System
 
-Each skill is a Markdown file (`SKILL.md`) with YAML frontmatter and structured instructions. When you run a slash command like `/design:empathize button`, Claude Code loads the corresponding skill file and follows its instructions.
+Each skill is a Markdown file (`SKILL.md`) with YAML frontmatter and structured instructions. When you run a slash command like `/design:empathize button`, your AI coding assistant loads the corresponding skill file and follows its instructions.
 
 Skills define:
 - **Description** — what the skill does (used for matching)

apps/docs/content/docs/development/mcp-server/index.mdx

@@ -5,7 +5,7 @@ description: The @metapowers/figma-mcp server — a custom MCP server for Figma
 
 ## What is @metapowers/figma-mcp?
 
-`@metapowers/figma-mcp` is a Model Context Protocol (MCP) server that connects Claude Code to Figma. It provides 45 tools across 6 categories for reading design data, creating components, working with FigJam, managing Slides, and running accessibility audits.
+`@metapowers/figma-mcp` is a Model Context Protocol (MCP) server that connects your AI coding assistant to Figma. It provides 45 tools across 6 categories for reading design data, creating components, working with FigJam, managing Slides, and running accessibility audits.
 
 ## Architecture
 
@@ -15,7 +15,7 @@ The server communicates with Figma through two channels:
 - **Desktop Bridge Plugin** — for write operations (creating/modifying nodes via the Figma Plugin API)
 
 ```
-Claude Code <--stdio--> MCP Server <--REST API--> Figma API
+AI Assistant <--stdio--> MCP Server <--REST API--> Figma API
                               |
                               +--WebSocket--> Bridge Plugin <--Plugin API--> Figma Desktop
 ```