@pugi/cli 1.0.0-alpha.241 → 1.0.0-alpha.243

package/skills/od-waitlist-page/NOTICE.md

@@ -0,0 +1,126 @@
+# Third-party skills vendored into the Pugi designer pack
+
+These skills are part of Sofia's (designer) skill pack. They help her go from a
+brief to a design system to the clickable HTML prototype that the customer
+approves at the plan gate (`.pugi/artifacts/prototype.html`, BACKLOG AO), and,
+since 2026-10-17, carry the craft rules every build turn is held to.
+
+The skill pack generator copies this file and `LICENSE-APACHE-2.0` into every
+vendored skill directory, so each one carries its attribution wherever it is
+baked.
+
+Both upstream projects are licensed under the Apache License, Version 2.0. The
+full licence text is in `LICENSE-APACHE-2.0` next to this file. The LICENSE file
+of each repository was checked before anything was copied (2026-10-04 and
+2026-10-17). Neither repository ships a NOTICE file, so this file is the
+attribution.
+
+## nexu-io/open-design
+
+- Source: https://github.com/nexu-io/open-design
+- Licence: Apache-2.0, "Copyright 2026 Open Design contributors"
+- The upstream `skills/README.md` says skills are Apache-2.0 unless their own
+  `LICENSE` says otherwise. No directory copied here has its own licence.
+- Commit 53231d40b778d88eba23f35547bf99485d3ae9fc (2026-09-30) for the two
+  prototype skills (re-checked unchanged at 3b0df90f and re-stamped);
+  commit 78d5637cb49da07e81314d1544b5fc6d37c95084 (v0.25.1, 2026-10-16) for
+  the craft rules and the two ports below; commit
+  3b0df90f305c8279e748c292accf336d02b924ef (2026-10-20) for the design
+  templates and design skills added 2026-10-21 (CEO: "Open Design inside
+  Pugi"). The LICENSE file of the repository was checked again on 2026-10-21.
+
+| Pugi skill | Upstream path | Files copied |
+|---|---|---|
+| `od-web-prototype` | `design-templates/web-prototype/` | `SKILL.md`, `assets/template.html`, `references/layouts.md`, `references/checklist.md` |
+| `od-reference-design-contract` | `skills/reference-design-contract/` | `SKILL.md`, `references/checklist.md` |
+| `od-craft` | `craft/` | all twelve documents, as `references/<name>.md`: `README.md`, `accessibility-baseline.md`, `animation-discipline.md`, `anti-ai-slop.md`, `color.md`, `form-validation.md`, `laws-of-ux.md`, `rtl-and-bidi.md`, `state-coverage.md`, `typography-hierarchy-editorial.md`, `typography-hierarchy.md`, `typography.md` |
+
+### Design templates (added 2026-10-21, commit 3b0df90f) — the "Start from" catalogue
+
+Each is `design-templates/<name>/` → `od-<name>/`, `SKILL.md` only unless noted.
+Apache-2.0, nexu-io/open-design contributors, except where a row says otherwise.
+
+| Pugi skill | Upstream path | Files copied / licence |
+|---|---|---|
+| `od-saas-landing`, `od-dashboard`, `od-mobile-onboarding`, `od-pricing-page`, `od-blog-post`, `od-docs-page`, `od-kanban-board`, `od-invoice`, `od-meeting-notes`, `od-contact-widget`, `od-email-marketing`, `od-social-carousel`, `od-wireframe-annotated`, `od-wireframe-greybox`, `od-wireframe-mobile-flow`, `od-wireframe-sketch`, `od-pm-spec`, `od-team-okrs`, `od-eng-runbook`, `od-finance-report`, `od-hr-onboarding`, `od-magazine-poster`, `od-webgl-experience` | `design-templates/<name>/` | `SKILL.md` |
+| `od-mobile-app` | `design-templates/mobile-app/` | `SKILL.md`, `assets/template.html`, `references/layouts.md`, `references/checklist.md` |
+| `od-waitlist-page` | `design-templates/waitlist-page/` | `SKILL.md`, `assets/template.html`, `references/checklist.md` |
+| `od-web-prototype-taste-soft`, `-editorial`, `-brutalist` | `design-templates/web-prototype-taste-*/` | `SKILL.md`; distilled by open-design from Leonxlnx/taste-skill (MIT, © 2026 Leonxlnx) — that MIT text is carried as `LICENSE-MIT-Leonxlnx` in each directory |
+| `od-login-flow` | `skills/login-flow/` | `SKILL.md`, `references/checklist.md` |
+| `od-faq-page` | `skills/faq-page/` | `SKILL.md` |
+
+### Design skills (added 2026-10-21, commit 3b0df90f)
+
+| Pugi skill | Upstream path | Files copied / licence |
+|---|---|---|
+| `od-design-brief` | `skills/design-brief/` | `SKILL.md` (Apache-2.0, nexu-io) |
+| `od-critique` | `design-templates/critique/` | `SKILL.md` (Apache-2.0, nexu-io) |
+| `od-frontend-design` | `skills/frontend-design/` | `SKILL.md`, `LICENSE.txt` (Apache-2.0; the skill is Anthropic's `frontend-design` as open-design redistributes it) |
+| `od-redesign-skill` | `skills/redesign-skill/` | `SKILL.md`, `LICENSE` (MIT, © 2026 Leonxlnx; upstream frontmatter name `redesign-existing-projects`) |
+| `od-web-design-guidelines` | `skills/web-design-guidelines/` | `SKILL.md`, `LICENSE`, `references/guidelines.md` (MIT, vercel-labs/web-interface-guidelines, as open-design redistributes it) |
+
+Looked at and left out on 2026-10-21 (no licence file in the open-design
+directory although the upstream is MIT/Apache; take later with the upstream
+text): `design-md`, `enhance-prompt` (google-labs-code/skills),
+`design-consultation`, `plan-design-review` (garrytan/gstack, MIT),
+`copywriting` (coreyhaines31/marketingskills, MIT), `impeccable-design-polish`
+(pbakaus/impeccable, Apache-2.0), `ui-skills` (ibelick/ui-skills, MIT),
+`emil-design-eng`, `animate`, `review-animations`, `stitch-skill`. Decks,
+video, live-artifact and `tweaks` templates are not Pugi surfaces.
+
+Upstream attributions kept inside those files: `craft/` is adapted from
+referodesign/refero_skill (MIT, © Refero Design); the "Adapted from" lines
+stay where upstream put them.
+
+### Ports (derivative works, Apache-2.0 §4), not copies
+
+| Pugi file | Upstream source | What changed |
+|---|---|---|
+| `packages/opencode/src/session/design-lint.ts` | `apps/daemon/src/lint-artifact.ts` | The seven P0 checks and the external-image advisory are kept; the finding shape is local; it runs over a workspace (source and `dist/`) rather than one artifact body; Tailwind utility-class forms of each sin are added; the deck, `data-od-id`, all-caps tracking and raw-hex checks are dropped; the sans-display check fires only when a serif display token is bound. The daemon's analytics were never in this file. |
+| `packages/opencode/src/scaffold/design-direction.ts` | `apps/daemon/src/prompts/directions.ts` | The five schools are kept as postures; labels no longer name other brands; palettes are hex; faces are the Google fonts the starters link; two directions added; no question form (the direction is decided by the model, never asked of the customer). |
+| `packages/plugin-pugi-personas/src/craft-digest.ts` | `craft/*.md` | A condensed summary written by Pugi from the twelve documents. |
+
+Nothing ported touches the network: open-design's PostHog / Langfuse telemetry
+lives in its apps, none of which were taken.
+
+## nexu-io/html-anything
+
+- Source: https://github.com/nexu-io/html-anything
+- Commit: 553ed98c283f9c0f489902d035416a972d6a9699 (2026-09-15)
+- Licence: Apache-2.0. The upstream copyright line is the unfilled template
+  ("Copyright [yyyy] [name of copyright owner]"), so the copyright belongs to
+  the html-anything contributors.
+
+| Pugi skill | Upstream path | Files copied |
+|---|---|---|
+| `ha-prototype-web` | `next/src/lib/templates/skills/prototype-web/` | `SKILL.md` |
+
+## Changes made by Pugi (Apache-2.0 §4(b))
+
+- The frontmatter `name` of every `SKILL.md` was prefixed (`od-`, `ha-`). Skill
+  names are permission patterns in Pugi, and upstream names such as
+  `web-prototype` would collide across the two sources.
+- One HTML comment was added under each frontmatter block. It names the source,
+  the commit and these changes.
+- `od-craft/SKILL.md` is written by Pugi (upstream has no skill wrapper for
+  `craft/`; its daemon injects the files per `od.craft.requires`). Each
+  `references/*.md` begins with one added HTML comment naming the source
+  commit and stating that the rest is verbatim; the text below it is
+  unchanged, including upstream's references to its own paths
+  (`apps/daemon/src/lint-artifact.ts`, `pnpm lint:craft`).
+- Example files (`example.html`, `example.md`) were not copied (the sanitised
+  example pages live under `scaffold/seeds/` with their own NOTICE).
+- The three `od-web-prototype-taste-*` directories and `od-redesign-skill`
+  carry the MIT licence of Leonxlnx next to the Apache-2.0 text, because the
+  upstream `skills/README.md` says a skill's own LICENSE prevails.
+- Every other byte of the copied files is unchanged.
+
+Where an upstream rule conflicts with the Pugi plan-gate prototype contract in
+Sofia's persona prompt, the Pugi contract wins.
+Two upstream rules conflict on purpose. The output file is
+`.pugi/artifacts/prototype.html`, not `index.html`. Photos are Pexels CDN URLs
+taken from Anvil `/v1/images`, not copies in the project, because the console
+renders the prototype from a single document.
+Where a craft rule names open-design's tokens (`var(--accent)`), the starter's
+own token scheme (`src/globals.css` bare HSL components, `src/theme.css`
+typefaces) wins.

package/skills/od-waitlist-page/SKILL.md

@@ -0,0 +1,229 @@
+---
+name: od-waitlist-page
+description: |
+  Minimal pre-launch landing with email capture, brand logo, and optional decorative layer.
+  Reads DESIGN.md for colors, typography, and layout rules.
+  Best for: product launches, beta signups, early access programs, indie projects.
+triggers:
+  - "waitlist page"
+  - "coming soon page"
+  - "pre-launch landing page"
+  - "email capture page"
+  - "launch page"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: marketing
+  preview:
+    type: html
+    entry: example.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  inputs:
+    - name: product_name
+      type: string
+      required: true
+    - name: tagline
+      type: string
+      required: true
+    - name: bg_expression
+      type: string
+      description: "CSS color expression for background (e.g., '#FDE8DF' or 'rgba(...)')."
+      required: true
+    - name: fg_expression
+      type: string
+      description: "CSS color expression for text and primary shapes (e.g., '#1A1410' or 'rgba(...)')."
+      required: true
+    - name: accent_expression
+      type: string
+      description: "CSS color expression for brand badge and highlights."
+      required: true
+    - name: deco_expression
+      type: string
+      description: "CSS color expression for decoration primary."
+      required: true
+    - name: stripe_expression
+      type: string
+      description: "CSS color expression for accent stripe."
+      required: true
+    - name: border_expression
+      type: string
+      description: "CSS color expression for input borders (e.g., 'rgba(100,50,30,0.38)' or 'color-mix(in srgb, var(--fg) 38%, transparent)'). Must be valid CSS."
+      required: true
+    - name: success_expression
+      type: string
+      description: "CSS color expression for success message. Defaults to #2D6A4F if not in DESIGN.md."
+      required: true
+    - name: btn_label_expression
+      type: string
+      description: "CSS color expression for button label text (e.g., 'rgba(255,255,255,1)' or '#fff'). Ensure WCAG AA contrast."
+      required: true
+    - name: ticker_bg_expression
+      type: string
+      description: "CSS color expression for ticker background (e.g., 'rgba(0,0,0,0.9)'). Must be valid CSS."
+      required: true
+    - name: ticker_fg_expression
+      type: string
+      description: "CSS color expression for ticker text (e.g., 'rgba(255,255,255,0.9)'). Ensure contrast."
+      required: true
+    - name: deco_stroke_expression
+      type: string
+      description: "CSS color expression for SVG strokes (e.g., 'rgba(0,0,0,0.12)'). Typically a muted foreground or neutral."
+      required: true
+    - name: logo_shadow_expression
+      type: string
+      description: "CSS color expression for logo container shadow (e.g., 'rgba(0,0,0,0.08)'). Typically a subtle foreground shade."
+      required: true
+    - name: logo_fg_expression
+      type: string
+      description: "CSS color expression for logo text/initials (e.g., 'rgba(255,255,255,1)' or '#fff'). Ensure contrast against accent."
+      required: true
+    - name: logo_mark
+      type: string
+      description: "Text initials are HTML-escaped by default. Inline SVG is allowed only after strict allowlist-based sanitization (removing scripts, event handlers, foreignObject, and external references); unsafe input falls back to escaped text."
+      required: false
+    - name: display_font_url
+      type: string
+      description: "Display font name with spaces encoded as '+' (e.g., 'Syne', 'DM+Sans'). Used in Google Fonts URL."
+      required: true
+    - name: display_font_css
+      type: string
+      description: "Display font name as it appears in CSS (e.g., 'Syne', 'DM Sans'). Already quoted if needed; no extra quotes in template."
+      required: true
+    - name: body_font_url
+      type: string
+      description: "Body font name with spaces encoded as '+' (e.g., 'DM+Sans', 'IBM+Plex+Serif'). Used in Google Fonts URL."
+      required: true
+    - name: body_font_css
+      type: string
+      description: "Body font name as it appears in CSS (e.g., 'DM Sans', 'IBM Plex Serif'). Already quoted if needed; no extra quotes in template."
+      required: true
+  outputs:
+    primary: index.html
+  capabilities_required:
+    - file_write
+  example_prompt: "Make a waitlist page for a design tool — clean, minimal, with a custom logo and one call-to-action."
+---
+<!-- Vendored from nexu-io/open-design@3b0df90f305c (design-templates/waitlist-page), Apache-2.0. Modified by Pugi: frontmatter `name` changed from `waitlist-page` to `od-waitlist-page`; example files omitted. See NOTICE.md in this directory. Where this skill conflicts with the Pugi plan-gate prototype contract in the designer persona prompt, the Pugi contract wins. -->
+
+# Waitlist Page Skill
+
+Pre-launch pages are your first handshake with future users. This skill builds a focused, honest entrance: your brand identity, what you're making, one clear path to join the early list. No artificial scarcity, no fake countdown, no inflation tactics—just a clean, mobile-first vessel for genuine interest.
+
+## Workflow
+
+### Preflight: Load hardened template and brand foundation
+
+0. **Load the brand identity** — Read `DESIGN.md` for the color system, font pairing, and spatial rules. This is your foundation. A waitlist page lives or dies by consistency with the brand it represents. If `DESIGN.md` is missing, ask the user to provide one before you proceed.
+1. **Read and copy the reusable template** — Read `assets/template.html`. This template is the hardened seed for all outputs. Copy it to `index.html` as your base. Do not write HTML from scratch or deviate from this structure. The template has all required layout, form structure, decorations, focus styles, and accessibility scaffolding baked in.
+
+### Steps: Token replacement with validation and escaping
+
+2. **Map tokens from inputs** — For each placeholder in the template (e.g., `{{PRODUCT_NAME}}`, `{{BG_EXPRESSION}}`, `{{BORDER_EXPRESSION}}`, `{{LOGO_MARK}}`), follow the replacement rules below:
+   - **Text tokens** (`{{PRODUCT_NAME}}`, `{{TAGLINE}}`): HTML-escape `<`, `>`, `&`, `"`, `'` before insertion into HTML text nodes or attribute values.
+   - **HTML tokens** (`{{LOGO_MARK}}`): If using text initials, HTML-escape them by default. If using inline SVG, you must strictly sanitize it using an allowlist: strip `<script>` tags, event handlers (`on*`), `<foreignObject>`, external refs (`href`, `xlink:href`, `url()`), and any disallowed attributes/elements before insertion. If the SVG cannot be safely sanitized, fallback to escaped text initials. Never emit raw, unsanitized arbitrary HTML. Ensure any SVG scales cleanly within its container.
+   - **Color expression tokens** (`{{BG_EXPRESSION}}`, `{{FG_EXPRESSION}}`, `{{ACCENT_EXPRESSION}}`, `{{DECO_EXPRESSION}}`, `{{STRIPE_EXPRESSION}}`, `{{SUCCESS_EXPRESSION}}`, `{{BORDER_EXPRESSION}}`, `{{BTN_LABEL_EXPRESSION}}`, `{{TICKER_BG_EXPRESSION}}`, `{{TICKER_FG_EXPRESSION}}`, `{{DECO_STROKE_EXPRESSION}}`, `{{LOGO_SHADOW_EXPRESSION}}`, `{{LOGO_FG_EXPRESSION}}`): Must strictly adhere to an explicit color grammar (`#hex`, `rgb`/`rgba`, `hsl`/`hsla`, `oklch`, or `color-mix()` using only local variables). Hard reject any input containing `;`, `{}`, `<`, `>`, comments (`/*`), `@`, `url(`, or external refs to prevent CSS injection. Do not wrap in `#` or add extra quotes. Examples: `rgba(196, 169, 154, 0.38)`, `color-mix(in srgb, var(--fg) 38%, transparent)`, `#FDE8DF`. Insert as-is into `:root` CSS variables. Derive `--success` from DESIGN.md if present; otherwise use the allowed fallback `#2D6A4F` only.
+   - **Font name tokens** (`{{DISPLAY_FONT_CSS}}`, `{{BODY_FONT_CSS}}`): These are CSS font-family values, already quoted if they contain spaces (e.g., `'DM Sans'`, `Syne`). Insert as-is into `--font-display` and `--font-body` declarations; do NOT add extra quotes.
+   - **Font URL tokens** (`{{DISPLAY_FONT_URL}}`, `{{BODY_FONT_URL}}`): Spaces must be encoded as `+` for the Google Fonts URL (e.g., `DM+Sans`, `IBM+Plex+Serif`). Validate the URL is well-formed before insertion.
+3. **Verify token mapping rules** — All color tokens are now in CSS variables:
+   - `--bg` = `{{BG_EXPRESSION}}` (e.g., `#FDE8DF`)
+   - `--fg` = `{{FG_EXPRESSION}}` (e.g., `#1A1410`)
+   - `--accent` = `{{ACCENT_EXPRESSION}}` (brand badge)
+   - `--deco` = `{{DECO_EXPRESSION}}` (decoration primary)
+   - `--deco-stripe` = `{{STRIPE_EXPRESSION}}` (accent stripe)
+   - `--input-border` = `{{BORDER_EXPRESSION}}` (full CSS expression with opacity)
+   - `--success` = `{{SUCCESS_EXPRESSION}}` or `#2D6A4F` fallback
+   - `--btn-label` = `{{BTN_LABEL_EXPRESSION}}` (button text color for contrast)
+   - `--ticker-bg` = `{{TICKER_BG_EXPRESSION}}` (animated ticker background)
+   - `--ticker-fg` = `{{TICKER_FG_EXPRESSION}}` (animated ticker text)
+   - `--deco-stroke` = `{{DECO_STROKE_EXPRESSION}}` (SVG strokes, typically muted with 12–15% opacity)
+   - `--logo-shadow` = `{{LOGO_SHADOW_EXPRESSION}}` (logo container shadow, subtle foreground shade)
+   - `--logo-fg` = `{{LOGO_FG_EXPRESSION}}` (contrasting text color for logo initials)
+4. **Responsive layout** — The template includes mobile-first scaling:
+   - 375px: form stacks to single column, logo shrinks to 40px, decoration compresses, no horizontal scroll.
+   - 768px: comfortable two-column breathing room.
+   - 1440px+: centered layout with generous whitespace.
+   - Verify all text remains readable and the email input + button are fully visible (no clipping) at 375×667 and 390×844.
+
+### Validation: Run hardened quality gates before emitting
+
+5. **Run the quality checklist** — Read `references/checklist.md`. Validate every **P0 gate** before emitting:
+   - Exactly one CTA (email form)
+   - No countdown timer, no fake social proof, no emoji
+   - No horizontal scroll at 375px
+   - Email input has `type="email"` and `required`; first name has no `required`
+   - Form does NOT use `novalidate`; JS uses `checkValidity()` guard
+   - Success message has `role="status"` or `aria-live="polite"`
+   - All colors from DESIGN.md or allowed fallback; **no invented hex values**
+   - All user text is HTML-escaped; color tokens adhere to strict grammar; fonts are URL-encoded
+   - **Pass P0 or do not emit.** If any P0 gate fails, ask the user or fix the token mappings and try again.
+6. **Verify P1 gates** for quality submission (recommended):
+   - Hover and active states on submit button
+   - Form validation with clear feedback
+   - Ticker animation respects `prefers-reduced-motion: reduce`
+   - All interactive elements have visible focus styles (input:focus includes `outline`)
+   - Tab/Enter keyboard support
+   - WCAG AA contrast for body text (≥4.5:1) and button label (≥4.5:1)
+   - Logo alt/aria-label present; ticker has `aria-hidden="true"`
+   - `<html lang="">` is set
+
+### Output
+
+7. **Emit clean HTML** — Single file, CSS inlined, SVG for graphics. Mark interactive elements with `data-od-id` (headline, form, logo, ticker, grid, etc.) so agents can customize without parsing.
+
+## Quality gates
+
+This skill enforces a hardened, template-based workflow to ensure compliance. **You must follow this execution path; deviating from the template disqualifies the output.**
+
+**Mandatory template-based execution:**
+- Read `assets/template.html` as your base; do not write HTML from scratch.
+- Copy it to `index.html` and replace only the `{{PLACEHOLDER}}` tokens with validated/escaped values.
+- Run every P0 gate in `references/checklist.md` before emitting; if any fail, fix and re-validate.
+
+**P0 gates (must pass):**
+- Single CTA: Email form is the only interactive element. No nav, no secondary buttons, no social links.
+- Logo placement: Fixed top-left, matches DESIGN.md accent color, scales down on mobile (50px → 40px).
+- Color consistency: Every color from DESIGN.md palette. Only allowed hardcoded exception: `#2D6A4F` for `--success`.
+- No anti-patterns: No countdown timer, no fake social proof, no emoji icons, no lorem ipsum.
+- Content integrity: Headline and copy tie directly to `product_name` and `tagline` inputs—no filler copy.
+- Mobile fit: No horizontal scroll at 375px. Email input and submit button are fully visible (no clipping) at 375×667 and 390×844. Vertical overflow is scrollable, not hidden.
+- Typographic discipline: Display + body fonts only (2-font rule). Consistent sizing across sections.
+- Form structure: Two fields (first name optional, email required), `checkValidity()` guard, success message with `role="status"`.
+- Token escaping: All user-supplied text HTML-escaped; color tokens adhere to strict grammar and contain no unsafe characters (`;`, `{}`, `<`, `>`, `/*`, `@`, `url(`); font names are URL-encoded; `{{LOGO_MARK}}` is escaped text initials or strictly sanitized inline SVG (no scripts, no event handlers, no foreignObject, no external hrefs).
+
+**P1 gates (should pass for quality submission):**
+- Hero section visually distinct and above-the-fold.
+- Email submit button has hover and active states.
+- Form validation provides clear feedback.
+- Page scrollable (not clipped) at all mobile viewports; CTA visible without scroll.
+- Ticker animation paused/removed under `prefers-reduced-motion: reduce`.
+- All interactive elements have visible focus styles (outline, not just outline:none).
+- Keyboard: Tab reaches each form field; Enter submits.
+- WCAG AA contrast: Body text ≥4.5:1, button label ≥4.5:1.
+- Logo alt/aria-label present; ticker has `aria-hidden="true"`.
+- `<html lang="">` set to correct language code.
+
+**Decoration restraint:**
+- Lower zone enhances without distraction. Opacity, subtle strokes, muted animation.
+- No gradient that spans more than 20% of viewport height.
+- Coil, stripe, grid, or ticker all use colors from DESIGN.md only.
+
+## Output
+
+**Only emit after all P0 gates in `references/checklist.md` pass.**
+
+Emit the artifact between tags:
+
+```
+<artifact identifier="waitlist-id" type="text/html" title="Coming Soon — {{PRODUCT_NAME}}">
+<!doctype html>
+<html lang="en">
+...
+</html>
+</artifact>
+```
+
+One line of description above the artifact; nothing below.
+
+**Post-emission:** If the user asks for changes, update the index.html in-place and re-run the P0 checklist gates before emitting the next version. Do not skip validation on iterations.