feat: add Archipelago agent skills and app starter
This commit is contained in:
archipelago
@@ -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>
|
||||
@@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './styles.css'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
@@ -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; } }
|
||||
Reference in New Issue
Block a user