feat: add Archipelago agent skills and app starter

examples/archipelago-app-starter/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.env
+.env.*
+!.env.example

examples/archipelago-app-starter/Dockerfile

@@ -0,0 +1,16 @@
+FROM node:22-alpine AS build
+WORKDIR /src
+COPY package.json vite.config.ts index.html ./
+COPY src ./src
+RUN npm install --ignore-scripts && npm run build
+
+FROM nginx:1.27-alpine
+COPY --from=build /src/dist /usr/share/nginx/html
+COPY <<'EOF' /etc/nginx/conf.d/default.conf
+server {
+  listen 8080;
+  root /usr/share/nginx/html;
+  index index.html;
+  location / { try_files $uri $uri/ /index.html; }
+}
+EOF

examples/archipelago-app-starter/README.md

@@ -0,0 +1,11 @@
+# Archipelago app starter
+
+This is a small standalone Vue/Vite app that demonstrates Archipelago's initial
+design contract: semantic `--archy-*` tokens, dark native controls, responsive
+cards, bottom actions, visible focus, 44px targets, and loading/empty/error/
+success states. It intentionally has no dashboard dependency or host handshake.
+
+Run `npm install && npm run dev` from this directory. Before packaging, copy the
+source into a project, replace the demo state with a real API, pin dependencies,
+and validate the manifest using the repository app developer guide. The Docker
+file is a starter build example; it is not a substitute for lifecycle acceptance.

examples/archipelago-app-starter/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#0a0a0a" />
+    <title>Archipelago app</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

examples/archipelago-app-starter/manifest.yml

@@ -0,0 +1,48 @@
+app:
+  id: archipelago-app-starter
+  name: Archipelago App Starter
+  version: 0.1.0
+  description: A minimal Archipelago design-system starter with responsive states.
+  container:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      tag: localhost/archipelago-app-starter:0.1.0
+  resources:
+    cpu_limit: 1
+    memory_limit: 128Mi
+    disk_limit: 256Mi
+  security:
+    capabilities: []
+    readonly_root: true
+    no_new_privileges: true
+    network_policy: isolated
+  ports:
+    - host: 8180
+      container: 8080
+      protocol: tcp
+      bind: 127.0.0.1
+      auth: gated
+  volumes:
+    - type: bind
+      source: /var/lib/archipelago/archipelago-app-starter
+      target: /data
+      options: [rw]
+  health_check:
+    type: http
+    endpoint: http://127.0.0.1:8080
+    path: /
+    interval: 30s
+    timeout: 5s
+    retries: 3
+  interfaces:
+    main:
+      name: Archipelago App Starter
+      description: Responsive design-system starter
+      type: ui
+      port: 8180
+      protocol: http
+      path: /
+  metadata:
+    category: development
+    tier: optional

examples/archipelago-app-starter/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "archipelago-app-starter",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview --host 127.0.0.1"
+  },
+  "dependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vite": "^7.2.2",
+    "typescript": "~5.9.3",
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {}
+}

examples/archipelago-app-starter/src/App.vue

@@ -0,0 +1,67 @@
+<template>
+  <main class="archy-shell" aria-labelledby="page-title">
+    <header class="archy-header">
+      <div>
+        <p class="archy-eyebrow">ARCHIPELAGO APP</p>
+        <h1 id="page-title">Project workspace</h1>
+        <p class="archy-muted">A small, useful starting point for a node app.</p>
+      </div>
+      <button class="archy-button archy-button-secondary" type="button" @click="reload">
+        Refresh
+      </button>
+    </header>
+
+    <section class="archy-card" aria-labelledby="items-title">
+      <div class="archy-section-heading">
+        <div>
+          <p class="archy-eyebrow">YOUR DATA</p>
+          <h2 id="items-title">Items</h2>
+        </div>
+        <button class="archy-button" type="button" @click="addItem">Add item</button>
+      </div>
+
+      <div v-if="status === 'loading'" class="archy-state" role="status">Loading items…</div>
+      <div v-else-if="status === 'error'" class="archy-state archy-state-error" role="alert">
+        <strong>Items are unavailable.</strong>
+        <span>Check the app service and try again.</span>
+        <button class="archy-button archy-button-secondary" type="button" @click="reload">Try again</button>
+      </div>
+      <div v-else-if="items.length === 0" class="archy-state">
+        <strong>No items yet.</strong>
+        <span>Create one to see the app's normal success state.</span>
+        <button class="archy-button archy-button-secondary" type="button" @click="addItem">Create first item</button>
+      </div>
+      <ul v-else class="archy-list" aria-live="polite">
+        <li v-for="item in items" :key="item.id" class="archy-list-row">
+          <div>
+            <strong>{{ item.name }}</strong>
+            <span class="archy-muted">{{ item.detail }}</span>
+          </div>
+          <span class="archy-status">Ready</span>
+        </li>
+      </ul>
+    </section>
+
+    <p class="archy-footnote">This starter is standalone-safe and does not require a host handshake.</p>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+type Item = { id: number; name: string; detail: string }
+const status = ref<'ready' | 'loading' | 'error'>('ready')
+const items = ref<Item[]>([])
+let nextId = 1
+
+function addItem() {
+  status.value = 'ready'
+  items.value.push({ id: nextId, name: `Item ${nextId}`, detail: 'Persist this through your app API.' })
+  nextId += 1
+}
+
+function reload() {
+  status.value = 'loading'
+  window.setTimeout(() => { status.value = 'ready' }, 250)
+}
+</script>

examples/archipelago-app-starter/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './styles.css'
+
+createApp(App).mount('#app')

examples/archipelago-app-starter/src/styles.css

@@ -0,0 +1,54 @@
+:root {
+  color-scheme: dark;
+  --archy-canvas: #0a0a0a;
+  --archy-surface: rgba(0, 0, 0, 0.65);
+  --archy-surface-muted: rgba(255, 255, 255, 0.06);
+  --archy-border: rgba(255, 255, 255, 0.18);
+  --archy-text: rgba(255, 255, 255, 0.92);
+  --archy-muted: rgba(255, 255, 255, 0.58);
+  --archy-accent: #fb923c;
+  --archy-success: #4ade80;
+  --archy-danger: #f87171;
+  --archy-radius-card: 16px;
+  --archy-radius-control: 12px;
+  --archy-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+  --archy-space-1: 4px;
+  --archy-space-2: 8px;
+  --archy-space-3: 12px;
+  --archy-space-4: 16px;
+  --archy-space-6: 24px;
+  --archy-space-8: 32px;
+  font-family: Avenir Next, system-ui, sans-serif;
+  background: var(--archy-canvas);
+  color: var(--archy-text);
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 320px; background: var(--archy-canvas); }
+button { font: inherit; }
+button:focus-visible { outline: 2px solid var(--archy-accent); outline-offset: 3px; }
+
+.archy-shell { width: min(100% - 32px, 960px); margin: 0 auto; padding: 40px 0 56px; }
+.archy-header, .archy-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--archy-space-4); }
+.archy-header { margin-bottom: var(--archy-space-8); }
+.archy-eyebrow { margin: 0 0 var(--archy-space-2); color: var(--archy-accent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; }
+h1, h2 { margin: 0; line-height: 1.15; }
+h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
+h2 { font-size: 1.25rem; }
+.archy-muted, .archy-footnote { color: var(--archy-muted); }
+.archy-card { padding: var(--archy-space-6); background: var(--archy-surface); border: 1px solid var(--archy-border); border-radius: var(--archy-radius-card); box-shadow: var(--archy-shadow); }
+.archy-section-heading { align-items: center; margin-bottom: var(--archy-space-6); }
+.archy-button { min-height: 44px; padding: 10px 18px; border: 1px solid rgba(251, 146, 60, 0.35); border-radius: var(--archy-radius-control); background: rgba(251, 146, 60, 0.2); color: #fed7aa; cursor: pointer; }
+.archy-button:hover { background: rgba(251, 146, 60, 0.3); }
+.archy-button-secondary { border-color: var(--archy-border); background: var(--archy-surface-muted); color: var(--archy-text); }
+.archy-state { display: grid; gap: var(--archy-space-3); padding: var(--archy-space-6); border-radius: var(--archy-radius-control); background: var(--archy-surface-muted); color: var(--archy-muted); }
+.archy-state strong { color: var(--archy-text); }
+.archy-state-error { border: 1px solid rgba(248, 113, 113, 0.35); }
+.archy-state-error strong { color: var(--archy-danger); }
+.archy-list { display: grid; gap: var(--archy-space-2); padding: 0; margin: 0; list-style: none; }
+.archy-list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--archy-space-4); padding: var(--archy-space-4); border-radius: var(--archy-radius-control); background: var(--archy-surface-muted); }
+.archy-list-row div { display: grid; gap: var(--archy-space-1); min-width: 0; }
+.archy-status { color: var(--archy-success); font-size: 0.8rem; }
+.archy-footnote { margin: var(--archy-space-4) 0 0; font-size: 0.8rem; }
+@media (max-width: 560px) { .archy-shell { width: min(100% - 24px, 960px); padding-top: 24px; } .archy-header { flex-direction: column; } .archy-header .archy-button { width: 100%; } .archy-card { padding: var(--archy-space-4); } .archy-section-heading { align-items: stretch; flex-direction: column; } .archy-section-heading .archy-button { width: 100%; } }
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

examples/archipelago-app-starter/vite.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({ plugins: [vue()] })