Initial commit

Author: boblangley

.agents/skills/design-prototyping/SKILL.md

@@ -0,0 +1,93 @@
+---
+name: design-prototyping
+description: This skill describes how to create prototype pages to explore website designs and copy
+---
+
+# Design Brief
+
+You are creating design prototypes for a marketing/landing page site.
+
+## Step 1: Understand the Product
+
+If this is a new repo:
+
+- Read `docs/concept.md` in this repository. It describes the product or concept this site will market. Internalize the key value propositions, features, and positioning before proceeding.
+
+If this is an existing website:
+
+- Read the `src/index.astro` in this repository. The copy should be used as a source for the concept of the site.
+
+## Step 2: Clarify the Purpose
+
+Confirm with the user the following before proceeding:
+
+1. **Who is the intended audience?** (e.g., developers, small business owners, general consumers, enterprise buyers)
+2. **What is the primary call-to-action?** The most common case is email collection for gauging interest (lean startup MVP style), but confirm this with the user. Other options could include: Calendly style scheduler (Use ShadCN), Join our Discord, follow us on Bluesky/X
+3. **Are there any brand constraints?** (e.g., specific colors, existing logo, tone of voice) If none, you have full creative freedom.
+4. **What company owns the site?** Ask if the site should state one. By default the company that owns the site is Wyrd, at https://wyrd.company. Other options includes Dark Futures Interactive (https://darkfutures.com) and Scratching Monkey Software (https://scratchingmonkey.com). The user may ask to omit it.
+5. **Whould the site have a login page, about page, privacy policy page, and/or terms of use page?**
+
+## Step 3: Set Up the Project (skip if already setup)
+
+1. Run `pnpm create astro@latest` in the project root. Choose the empty template, strict TypeScript, and accept defaults. Answer yes to installing dependencies. You will have to copy the contents of the subfolder created to the root. Do not overwrite README.md.
+2. Update the astro config to bind the site to the host 0.0.0.0 since you are running in a devcontainer.
+3. Install and configure Tailwind CSS for Astro.
+
+## Step 4: Create Design Prototypes
+
+Create the number of distinct prototypes specified by the user in their prompt (e.g., "create 3 prototypes").
+
+### Routing
+
+- Each prototype is a single page accessible at `/1`, `/2`, `/3`, etc.
+- Create these as `src/pages/1/index.astro`, `src/pages/2/index.astro`, etc.
+
+### Design Requirements
+
+- **Each prototype must be a completely different design.** Vary layout structure, color palette, typography, visual style, and overall feel. One might be bold and dark, another minimal and airy, another playful and colorful. Exercise full creative freedom.
+- Each prototype is a complete, single-page marketing/landing page.
+- Write original copy for each prototype grounded in `concept.md` and tailored to the intended audience established in Step 2. Don't reuse the same copy across prototypes.
+- Each prototype must include the agreed-upon call-to-action (e.g., an email signup form).
+- Use Tailwind CSS for all styling. No external CSS frameworks.
+- If the page has interactive elements, use React/ShadCN when needed.
+- Pages should be responsive and look good on both mobile and desktop.
+
+### Prototype Navigation
+
+Include a navigation element on every prototype page that allows switching between prototypes (links to `/1`, `/2`, `/3`, etc.). Implement a common layout that adds the navigation to each prototype.
+
+**Important:** This navigation is a utility element for reviewing the prototypes. It is **not** part of the prototype's design. It should be clearly separate and unobtrusive -- you decide the form (a floating bar, a small corner pill, a minimal strip, etc.) as long as it does not interfere with or appear to be part of the prototype design itself.
+
+## Step 5: Verify
+
+1. Run `pnpm dev` and confirm each prototype page loads without errors.
+2. Verify that navigation between prototypes works.
+3. Check that pages render correctly at different viewport widths.
+
+## Step 6: Review
+
+Review the prototypes created, even previous ones. Provide your opinion on which are your favorites and why. Also consider the copy of each one, what is the strongest copy and why?
+
+## Step 7: Iterate and select
+
+The user will likely want to iterate on the designs. This may involve creating new prototypes. Some entirely new, others variations of existing ones.
+
+The user will eventually identify the one prototype that is the winner.
+
+## Step 8: Finalize
+
+Once the winner is selected:
+
+1. Update the root page to the design of the winning prototype.
+2. Remove the existing prototypes.
+3. (If new or updated) Use the favicon skill to create a favicon for the site. Use `rsvg-convert` to convert the svg to png so it is not blurry.
+4. (If new) Have the user set the GitHub repository secret: DREAMHOST_REMOTE `ssh://scratchingmonkey@<site name>/home/scratchingmonkey/<site name>.git`
+5. If there is an email form, set it up to use the `sf_3ha45db65ai25lcglfme20fj` key and show a confirmation page, `signup-confirmed` or `waitlist-confirmed`, that has a button to go back to the home page.
+6. Update the README.md
+7. **Where will the site be hosted?** Ask if the site will be hosted on Dreamhost or Cloudflare. The `.github/workflows/cd.yml` has commented out steps for each. Uncomment the appropriate one and remove the unneeded commented step.
+
+```html
+<form action="https://api.staticforms.dev/submit" method="POST">
+    <!-- Your API Key (replace with your actual key) -->
+    <input type="hidden" name="apiKey" value="YOUR_API_KEY">
+```

.devcontainer/devcontainer.json

@@ -0,0 +1,94 @@
+{
+  "name": "<site name> Devcontainer",
+  "image": "mcr.microsoft.com/devcontainers/base:noble",
+  "features": {
+    "ghcr.io/devcontainers/features/node:1": {},
+    "ghcr.io/devcontainers-extra/features/apt-get-packages:1": {
+        "packages": "imagemagick,librsvg2-bin"
+    }
+  },
+  "mounts": [
+    {
+        "source": "claude",
+        "target": "/home/vscode/.claude",
+        "type": "volume"
+    },
+    {
+        "source": "codex",
+        "target": "/home/vscode/.codex",
+        "type": "volume"
+    },
+    {
+        "source": "gemini",
+        "target": "/home/vscode/.gemini",
+        "type": "volume"
+    },
+    {
+        "source": "gemini",
+        "target": "/home/vscode/.gemini",
+        "type": "volume"
+    },
+    {
+        "source": "gemini-auth",
+        "target": "/home/vscode/.cache/google-vscode-extension",
+        "type": "volume"
+    },
+    {
+        "source": "agents",
+        "target": "/home/vscode/.agents",
+        "type": "volume"
+    },
+  ],
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        // Data and formats
+        "redhat.vscode-yaml",
+
+        // Markdown and documentation
+        "yzhang.markdown-all-in-one",
+        "bierner.markdown-mermaid",
+
+        //Stack
+        "ms-vscode.vscode-typescript-next",
+        "bradlc.vscode-tailwindcss",
+        "astro-build.astro-vscode",
+
+        // General productivity
+        "Gruntfuggly.todo-tree",
+        "eamodio.gitlens",
+        "github.vscode-github-actions",
+        "GitHub.vscode-pull-request-github",
+
+        // AI assistants
+        "anthropic.claude-code",
+        "google.geminicodeassist",
+        "google.gemini-cli-vscode-ide-companion",
+        "openai.chatgpt",
+        "kilocode.Kilo-Code"
+      ],
+      "settings": {
+      }
+    }
+  },
+
+  "remoteEnv": {
+  },
+
+  "forwardPorts": [4321],
+  "portsAttributes": {
+    "4321": {
+      "label": "Astro App",
+      "onAutoForward": "openBrowser"
+    }
+  },
+
+  "postCreateCommand": {
+    "own-cache": "mkdir -p /home/vscode/.cache && sudo chown -R vscode:vscode /home/vscode/.cache",
+    "task": "npm install -g @go-task/cli",
+    "claude-code": "curl -fsSL https://claude.ai/install.sh | bash",
+    "gemini": "npm install -g @google/gemini-cli",
+    "codex": "npm i -g @openai/codex",
+    "skills": "npx -y skills list"
+  }
+}

.devcontainer/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "taskfile dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

.github/workflows/cd.yml

@@ -0,0 +1,93 @@
+name: CD
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    paths:
+      - 'src/**'
+      - 'public/**'
+      - 'astro.config.mjs'
+      - 'tailwind.config.mjs'
+      - 'tsconfig.json'
+      - 'package.json'
+      - 'pnpm-lock.yaml'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+          run_install: false
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build production dist
+        run: pnpm build
+
+      # - name: Setup SSH key
+      #   uses: webfactory/ssh-agent@v0.9.0
+      #   with:
+      #     ssh-private-key: ${{ secrets.DREAMHOST_SSH_KEY }}
+
+      # - name: Add DreamHost host key
+      #   env:
+      #     DREAMHOST_REMOTE: ${{ secrets.DREAMHOST_REMOTE }}
+      #   run: |
+      #     set -euo pipefail
+
+      #     HOST=""
+      #     if [[ "$DREAMHOST_REMOTE" =~ ^ssh://[^@]+@([^/:]+) ]]; then
+      #       HOST="${BASH_REMATCH[1]}"
+      #     elif [[ "$DREAMHOST_REMOTE" =~ ^[^@]+@([^:]+): ]]; then
+      #       HOST="${BASH_REMATCH[1]}"
+      #     fi
+
+      #     if [[ -z "$HOST" ]]; then
+      #       echo "Unable to parse host from DREAMHOST_REMOTE"
+      #       exit 1
+      #     fi
+
+      #     mkdir -p ~/.ssh
+      #     ssh-keyscan -H "$HOST" >> ~/.ssh/known_hosts
+
+      # - name: Push dist to DreamHost Git remote
+      #   env:
+      #     DREAMHOST_REMOTE: ${{ secrets.DREAMHOST_REMOTE }}
+      #   run: |
+      #     set -euo pipefail
+
+      #     cd dist
+      #     touch .nojekyll
+
+      #     git init
+      #     git config user.name "github-actions[bot]"
+      #     git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+      #     git add -A
+      #     git commit -m "Deploy ${GITHUB_SHA}"
+      #     git branch -M main
+      #     git remote add dreamhost "$DREAMHOST_REMOTE"
+      #     git push --force dreamhost main
+
+      # - uses: actions/checkout@v4
+      # - name: Deploy
+      #   uses: cloudflare/wrangler-action@v3
+      #   with:
+      #     apiToken: ${{ secrets.CLOUDFLARE_PAGES_API_TOKEN }}
+      #     accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+      #     command: pages deploy ./dist --project-name=${{ secrets.CLOUDFLARE_PROJECT_ID }}

.gitignore

@@ -0,0 +1,25 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+.pnpm-store/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

AGENTS.md

@@ -0,0 +1,5 @@
+This is a Astro website repo.
+
+Skills can be found in `.agents/skills`
+
+Discover additional skills by running `npx skills list -g`. Use relevant skills (front-end design, astro, tailwind, favicon, etc.).

README.md

@@ -0,0 +1,9 @@
+# <site name>
+
+## Design
+
+1. Open in devcontainer
+2. If this is a new website, prompt your AI agent to run the init.sh. Rebuid the devcontainer.
+3. Fill in `docs/concept.md` with a description of your product or concept
+4. Prompt your AI agent: "Use the design-prototyping skill and create N prototypes"
+5. Work with the agent to create and refine prototypes until the design is finalized.

Taskfile.yml

@@ -0,0 +1,12 @@
+version: '3'
+
+tasks:
+  dev:
+    desc: Start Astro development server
+    cmds:
+      - astro dev
+
+  install:
+    desc: Install dependencies
+    cmds:
+      - pnpm install

astro.config.mjs

@@ -0,0 +1,14 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import tailwindcss from '@tailwindcss/vite';
+
+// https://astro.build/config
+export default defineConfig({
+  server: {
+    host: '0.0.0.0',
+  },
+  vite: {
+    plugins: [tailwindcss()]
+  }
+});