constellai 0.3.0

package/skills/design/pet-companion-qa-rubric-reference-guide/scripts/validate_atlas.py

@@ -0,0 +1,139 @@
+#!/usr/bin/env python3
+"""Validate a Codex pet spritesheet atlas."""
+
+from __future__ import annotations
+
+import argparse
+import json
+from collections import defaultdict
+from pathlib import Path
+
+from PIL import Image
+
+COLUMNS = 8
+ROWS = 9
+CELL_WIDTH = 192
+CELL_HEIGHT = 208
+ATLAS_WIDTH = COLUMNS * CELL_WIDTH
+ATLAS_HEIGHT = ROWS * CELL_HEIGHT
+ROW_BY_INDEX = {
+    0: ("idle", 6),
+    1: ("running-right", 8),
+    2: ("running-left", 8),
+    3: ("waving", 4),
+    4: ("jumping", 5),
+    5: ("failed", 8),
+    6: ("waiting", 6),
+    7: ("running", 6),
+    8: ("review", 6),
+}
+
+
+def alpha_nonzero_count(image: Image.Image) -> int:
+    alpha = image.getchannel("A")
+    return sum(alpha.histogram()[1:])
+
+
+def main() -> None:
+    parser = argparse.ArgumentParser(description=__doc__)
+    parser.add_argument("atlas")
+    parser.add_argument("--json-out")
+    parser.add_argument("--min-used-pixels", type=int, default=50)
+    parser.add_argument("--near-opaque-threshold", type=float, default=0.95)
+    parser.add_argument("--allow-opaque", action="store_true")
+    parser.add_argument("--allow-near-opaque-used-cells", action="store_true")
+    args = parser.parse_args()
+
+    atlas_path = Path(args.atlas).expanduser().resolve()
+    errors: list[str] = []
+    warnings: list[str] = []
+    near_opaque_used_cells: dict[str, list[int]] = defaultdict(list)
+    cells: list[dict[str, object]] = []
+
+    try:
+        with Image.open(atlas_path) as opened:
+            source_mode = opened.mode
+            source_format = opened.format
+            image = opened.convert("RGBA")
+    except Exception as exc:  # noqa: BLE001
+        result = {"ok": False, "errors": [f"could not open atlas: {exc}"], "warnings": []}
+        print(json.dumps(result, indent=2))
+        raise SystemExit(1)
+
+    if image.size != (ATLAS_WIDTH, ATLAS_HEIGHT):
+        errors.append(f"expected {ATLAS_WIDTH}x{ATLAS_HEIGHT}, got {image.width}x{image.height}")
+
+    if source_format not in {"PNG", "WEBP"}:
+        errors.append(f"expected PNG or WebP, got {source_format}")
+
+    if "A" not in source_mode and not args.allow_opaque:
+        errors.append("atlas does not have an alpha channel")
+
+    for row_index in range(ROWS):
+        state, frame_count = ROW_BY_INDEX[row_index]
+        for column_index in range(COLUMNS):
+            left = column_index * CELL_WIDTH
+            top = row_index * CELL_HEIGHT
+            cell = image.crop((left, top, left + CELL_WIDTH, top + CELL_HEIGHT))
+            nontransparent = alpha_nonzero_count(cell)
+            used = column_index < frame_count
+            cell_info = {
+                "state": state,
+                "row": row_index,
+                "column": column_index,
+                "used": used,
+                "nontransparent_pixels": nontransparent,
+            }
+            cells.append(cell_info)
+            if used and nontransparent < args.min_used_pixels:
+                errors.append(
+                    f"{state} row {row_index} column {column_index} is empty or too sparse ({nontransparent} pixels)"
+                )
+            if used and nontransparent > CELL_WIDTH * CELL_HEIGHT * args.near_opaque_threshold:
+                near_opaque_used_cells[f"{state} row {row_index}"].append(column_index)
+            if not used and nontransparent != 0:
+                errors.append(
+                    f"{state} row {row_index} unused column {column_index} is not transparent ({nontransparent} pixels)"
+                )
+
+    for row_label, columns in near_opaque_used_cells.items():
+        message = (
+            f"{row_label} has {len(columns)} nearly opaque used cells; "
+            "this usually means the sprite has a non-transparent background"
+        )
+        if args.allow_near_opaque_used_cells:
+            warnings.append(message)
+        else:
+            errors.append(message)
+
+    alpha_count = alpha_nonzero_count(image)
+    if alpha_count == ATLAS_WIDTH * ATLAS_HEIGHT:
+        message = "atlas is fully opaque; custom pets require a transparent sprite background"
+        if args.allow_opaque:
+            warnings.append(message)
+        else:
+            errors.append(message)
+
+    result = {
+        "ok": not errors,
+        "file": str(atlas_path),
+        "format": source_format,
+        "mode": source_mode,
+        "width": image.width,
+        "height": image.height,
+        "errors": errors,
+        "warnings": warnings,
+        "cells": cells,
+    }
+
+    if args.json_out:
+        Path(args.json_out).expanduser().resolve().write_text(
+            json.dumps(result, indent=2) + "\n", encoding="utf-8"
+        )
+
+    print(json.dumps({k: v for k, v in result.items() if k != "cells"}, indent=2))
+    raise SystemExit(0 if result["ok"] else 1)
+
+
+if __name__ == "__main__":
+    main()

package/skills/design/pixelbin-media-playbook/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: pixelbin-media-playbook
+description: |
+  Use this skill when Codex needs compose and edit images and videos with an 85+ API portfolio and assemble visually appealing website pages via Pixelbin. Recast from the original pixelbin-media/SKILL.md material as the pixelbin-media-playbook procedure.
+---
+
+# Pixelbin Media Playbook
+
+## Role
+
+Use this skill when Codex needs compose and edit images and videos with an 85+ API portfolio and assemble visually appealing website pages via Pixelbin. Recast from the original pixelbin-media/SKILL.md material as the pixelbin-media-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `pixelbin-media/SKILL.md`
+- Reformulated skill name: `pixelbin-media-playbook`
+- Upstream reference: https://github.com/pixelbin-dev/skills
+- Source category: `image-generation`
+
+## Operating Guidance
+
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+
+> Adapted from Pixelbin.
+
+## Purpose
+
+Compose and edit images and videos with an 85+ API portfolio and assemble visually appealing website pages via Pixelbin.
+
+## Origin
+
+- Upstream: https://github.com/pixelbin-dev/skills
+- Category: `image-generation`
+
+## Procedure
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To execute the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/pixelbin-dev/skills
+```
+
+Then request this skill by name (`pixelbin-media`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/skills/design/planning-composition-audit-playbook/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: planning-composition-audit-playbook
+description: |
+  Use this skill when Codex needs senior Designer review: rates each design dimension 0-10, explains what a 10 looks like, and flags AI Slop signals. Useful as a gate before merging UI work. Recast from the original plan-design-review/SKILL.md material as the planning-composition-audit-playbook procedure.
+---
+
+# Planning Composition Audit Playbook
+
+## Role
+
+Use this skill when Codex needs senior Designer review: rates each design dimension 0-10, explains what a 10 looks like, and flags AI Slop signals. Useful as a gate before merging UI work. Recast from the original plan-design-review/SKILL.md material as the planning-composition-audit-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `plan-design-review/SKILL.md`
+- Reformulated skill name: `planning-composition-audit-playbook`
+- Upstream reference: https://github.com/garrytan/gstack
+- Source category: `creative-direction`
+
+## Operating Guidance
+
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+
+> Adapted from Garry Tan (gstack).
+
+## Purpose
+
+Senior Designer review: rates each design dimension 0-10, explains what a 10 looks like, and flags AI Slop signals. Useful as a gate before merging UI work.
+
+## Origin
+
+- Upstream: https://github.com/garrytan/gstack
+- Category: `creative-direction`
+
+## Procedure
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To execute the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/garrytan/gstack
+```
+
+Then request this skill by name (`plan-design-review`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/skills/design/platform-composition-playbook/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: platform-composition-playbook
+description: |
+  Use this skill when Codex needs 300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps. Useful when shipping a single design across iOS, Android, and the web. Recast from the original platform-design/SKILL.md material as the platform-composition-playbook procedure.
+---
+
+# Platform Composition Playbook
+
+## Role
+
+Use this skill when Codex needs 300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps. Useful when shipping a single design across iOS, Android, and the web. Recast from the original platform-design/SKILL.md material as the platform-composition-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `platform-design/SKILL.md`
+- Reformulated skill name: `platform-composition-playbook`
+- Upstream reference: https://github.com/ehmo/platform-design-skills
+- Source category: `design-systems`
+
+## Operating Guidance
+
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+
+> Adapted from @ehmo.
+
+## Purpose
+
+300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps. Useful when shipping a single design across iOS, Android, and the web.
+
+## Origin
+
+- Upstream: https://github.com/ehmo/platform-design-skills
+- Category: `design-systems`
+
+## Procedure
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To execute the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/ehmo/platform-design-skills
+```
+
+Then request this skill by name (`platform-design`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/skills/design/polish-composition-finish-playbook/SKILL.md

@@ -0,0 +1,54 @@
+---
+name: polish-composition-finish-playbook
+description: |
+  Use this skill when Codex needs follow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page for a live/share pass. Recast from the original impeccable-design-polish/SKILL.md material as the polish-composition-finish-playbook procedure.
+---
+
+# Polish Composition Finish Playbook
+
+## Role
+
+Use this skill when Codex needs follow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page for a live/share pass. Recast from the original impeccable-design-polish/SKILL.md material as the polish-composition-finish-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `impeccable-design-polish/SKILL.md`
+- Reformulated skill name: `polish-composition-finish-playbook`
+- Upstream reference: https://github.com/pbakaus/impeccable
+- Source category: `creative-direction`
+
+## Operating Guidance
+
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+
+Use this skill as the post-generation pass for an existing design. It prefer to not restart the project from scratch; it prefer to make the current artifact sharper, more usable, and closer to something a designer would ship.
+
+## Follow-Up Modes
+
+- **Audit**: identify the highest-impact issues in hierarchy, spacing, color, type, interaction states, responsiveness, and accessibility.
+- **Critique**: explain what feels generic, overdesigned, underdesigned, or inconsistent.
+- **Polish**: directly edit the artifact to improve the top issues while preserving the user's intent.
+- **Animate**: add restrained, useful motion only where it improves feedback or storytelling.
+- **Harden**: repair mobile overflow, text clipping, contrast problems, missing states, broken links, and fragile layout assumptions.
+- **Live**: prepare the artifact for presentation or sharing, including final visual QA and clear next actions.
+
+## Operating Rules
+
+1. Review the current HTML/page before editing. Do not guess from the prompt alone.
+2. Keep the existing content, brand, and scenario unless the user explicitly asks to change them.
+3. Prefer a few decisive fixes over broad cosmetic churn.
+4. Remove common AI tells:
+   - purple-blue glow gradients with no product reason
+   - generic 3-card feature rows
+   - oversized rounded cards everywhere
+   - empty marketing adjectives
+   - inconsistent spacing and type scale
+   - decorative effects that avoid support comprehension
+5. Preserve accessibility: focus states, contrast, semantic controls, readable text, and reduced-motion fallbacks.
+6. Finish with the artifact in a better runnable state, not just a critique list.
+
+## Best Pairings
+
+- Pair with `design-taste-frontend` or `gpt-taste` for stronger anti-slop redesign work.
+- Pair with `emilkowalski-motion` or GSAP skills for motion-specific polish.
+- Pair with image/video skills when the artifact needs real visual assets rather than CSS-only decoration.

package/skills/design/poster-hero-playbook/SKILL.md

@@ -0,0 +1,31 @@
+---
+name: poster-hero-playbook
+description: |
+  Use this skill when Codex needs vertical poster or Moments-style share image with strong visual impact. Recast from the original poster-hero/SKILL.md material as the poster-hero-playbook procedure.
+---
+
+# Poster Hero Playbook
+
+## Role
+
+Use this skill when Codex needs vertical poster or Moments-style share image with strong visual impact. Recast from the original poster-hero/SKILL.md material as the poster-hero-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `poster-hero/SKILL.md`
+- Reformulated skill name: `poster-hero-playbook`
+- Upstream reference: https://github.com/nexu-io/html-anything
+- Source category: `poster`
+
+## Operating Guidance
+
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+
+【模板: 营销海报】
+- 容器 `w-[1080px] h-[1920px] mx-auto`, 全屏渐变 / mesh 背景。
+- 上部 30% 留白 + 一个大 emoji 或抽象几何图形。
+- 中部主标题占视觉中心 (text-8xl, font-black), 一句话副标题。
+- 下部信息卡片: 3-5 条核心要点用图标 + 短句。
+- 底部右下角放品牌 / 二维码 (用 SVG 占位)。
+- 使用大胆的色彩: 渐变背景 (from-violet-500 via-fuchsia-500 to-indigo-500 之类), 文字白色 + 1 个对比色高亮。
+- 使用 SVG 做装饰性元素 (圆 / 三角 / 波浪 / 噪点纹理)。

package/skills/design/poster-hero-playbook/example.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<title>HTML Anything 0.1 海报</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800;900&family=Noto+Sans+SC:wght@500;700;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
+<style>
+  body { margin:0; background:#0a0a0a; font-family:'Inter Tight','Noto Sans SC',sans-serif; display:grid; place-items:center; padding:24px 0; }
+  .poster { position:relative; width:1080px; max-width:96vw; aspect-ratio:9/16; border-radius:32px; overflow:hidden; color:#fff;
+    background:
+      radial-gradient(ellipse at 80% 0%, rgba(233,185,74,0.55), transparent 55%),
+      radial-gradient(ellipse at 20% 100%, rgba(108,58,166,0.5), transparent 55%),
+      linear-gradient(135deg,#c96442 0%,#15140f 60%,#1a0e2b 100%);
+    display:flex; flex-direction:column; padding:80px 70px;
+    box-shadow:0 40px 120px -20px rgba(0,0,0,0.7);
+  }
+  .grain { position:absolute; inset:0; pointer-events:none; opacity:0.18; background-image:radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px); background-size:3px 3px; }
+  .label { font-size:13px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; opacity:0.85; }
+  .glyph { width:120px; height:120px; border-radius:32px; display:grid; place-items:center; background:rgba(255,255,255,0.08); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.18); }
+  h1 { font-family:'Inter Tight',sans-serif; font-weight:900; font-size:148px; line-height:0.95; letter-spacing:-0.04em; margin:0; }
+  .em { font-family:Georgia, 'Noto Serif SC', serif; font-weight:700; font-style:italic; color:#e9b94a; }
+  .feature { display:flex; align-items:flex-start; gap:18px; }
+  .feature .ic { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,0.12); display:grid; place-items:center; font-size:22px; flex-shrink:0; }
+  .feature .t { font-size:22px; font-weight:600; }
+  .feature .d { font-size:15px; opacity:0.7; line-height:1.55; margin-top:4px; }
+  .qr { width:120px; height:120px; border-radius:14px; background:#fff; padding:12px; }
+  .qr svg { width:100%; height:100%; }
+</style>
+</head>
+<body>
+<div class="poster">
+  <div class="grain"></div>
+
+  <div class="flex items-center justify-between">
+    <div class="label">RELEASE · 2026.05</div>
+    <div class="glyph">
+      <div style="font-family:Georgia,serif; font-style:italic; font-size:78px; font-weight:700; color:#fff">H</div>
+    </div>
+  </div>
+
+  <div style="margin:auto 0; flex:none">
+    <div class="label" style="margin-bottom:24px">v0.1 · 已发布 / Now Available</div>
+    <h1>HTML<br/><span class="em">Anything</span></h1>
+    <div style="font-size:30px; font-weight:500; opacity:0.92; margin-top:36px; max-width:560px; line-height:1.35">
+      任何文档 → 世界级好看的 HTML,<br/>
+      用你<span class="em" style="color:#e9b94a">本地</span>的 AI agent。
+    </div>
+  </div>
+
+  <div style="display:grid; grid-template-columns:1fr; gap:18px; margin:48px 0 32px">
+    <div class="feature"><div class="ic">🎨</div><div><div class="t">9 套世界级模板</div><div class="d">PPT · 简历 · 海报 · 小红书 · 数据报告 …</div></div></div>
+    <div class="feature"><div class="ic">🔌</div><div><div class="t">8 个本地 agent 自动检测</div><div class="d">Claude / Cursor / Codex / Gemini / Copilot …</div></div></div>
+    <div class="feature"><div class="ic">🗝️</div><div><div class="t">0 API Key</div><div class="d">复用你已经登录的 CLI session, 0 边际成本</div></div></div>
+    <div class="feature"><div class="ic">📋</div><div><div class="t">一键发布</div><div class="d">公众号 / 推特 / 知乎 / PNG, 直接粘贴</div></div></div>
+  </div>
+
+  <div style="display:flex; align-items:center; gap:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.18)">
+    <div class="qr">
+      <svg viewBox="0 0 33 33" xmlns="http://www.w3.org/2000/svg">
+        <rect width="33" height="33" fill="#fff"/>
+        <g fill="#0a0a0a">
+          <rect x="2" y="2" width="9" height="9" fill="none" stroke="#0a0a0a" stroke-width="2"/>
+          <rect x="5" y="5" width="3" height="3"/>
+          <rect x="22" y="2" width="9" height="9" fill="none" stroke="#0a0a0a" stroke-width="2"/>
+          <rect x="25" y="5" width="3" height="3"/>
+          <rect x="2" y="22" width="9" height="9" fill="none" stroke="#0a0a0a" stroke-width="2"/>
+          <rect x="5" y="25" width="3" height="3"/>
+          <rect x="13" y="2" width="2" height="2"/><rect x="17" y="2" width="2" height="2"/>
+          <rect x="13" y="6" width="2" height="2"/><rect x="15" y="9" width="2" height="2"/>
+          <rect x="2" y="13" width="2" height="2"/><rect x="6" y="13" width="2" height="2"/>
+          <rect x="13" y="13" width="2" height="2"/><rect x="17" y="13" width="2" height="2"/><rect x="21" y="13" width="2" height="2"/>
+          <rect x="13" y="17" width="2" height="2"/><rect x="19" y="15" width="2" height="2"/>
+          <rect x="22" y="17" width="2" height="2"/><rect x="26" y="17" width="2" height="2"/>
+          <rect x="13" y="21" width="2" height="2"/><rect x="17" y="21" width="2" height="2"/>
+          <rect x="22" y="22" width="2" height="2"/><rect x="26" y="26" width="2" height="2"/>
+          <rect x="22" y="29" width="2" height="2"/><rect x="29" y="22" width="2" height="2"/>
+        </g>
+      </svg>
+    </div>
+    <div>
+      <div style="font-family:'JetBrains Mono',monospace; font-size:14px; opacity:0.95">$ pnpm dlx html-anything</div>
+      <div style="font-size:14px; opacity:0.7; margin-top:6px">github.com/your-org/html-anything</div>
+    </div>
+  </div>
+</div>
+</body>
+</html>

package/skills/design/poster-hero-sample-worked-sample/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: poster-hero-sample-worked-sample
+description: |
+  Use this skill when Codex needs procedural guidance derived from poster-hero/example.md. Recast from the original poster-hero/example.md material as the poster-hero-sample-worked-sample procedure.
+---
+
+# Poster Hero Sample Worked Sample
+
+## Role
+
+Use this skill when Codex needs procedural guidance derived from poster-hero/example.md. Recast from the original poster-hero/example.md material as the poster-hero-sample-worked-sample procedure.
+
+## Source Trace
+
+- Original Markdown: `poster-hero/example.md`
+- Reformulated skill name: `poster-hero-sample-worked-sample`
+
+## Operating Guidance
+
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+
+## 一句话
+任何文档 → 世界级好看的 HTML, 用你本地的 AI agent
+
+## 特性
+- 9 套世界级模板
+- 8 个本地 agent 自动检测
+- 0 API Key, 复用本地登录 session
+- 一键复制到公众号 / 推特 / 知乎
+
+## CTA
+github.com/your-org/html-anything · 一行命令跑起来

package/skills/design/poster-hero-sample-worked-sample/example.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<title>HTML Anything 0.1 海报</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800;900&family=Noto+Sans+SC:wght@500;700;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
+<style>
+  body { margin:0; background:#0a0a0a; font-family:'Inter Tight','Noto Sans SC',sans-serif; display:grid; place-items:center; padding:24px 0; }
+  .poster { position:relative; width:1080px; max-width:96vw; aspect-ratio:9/16; border-radius:32px; overflow:hidden; color:#fff;
+    background:
+      radial-gradient(ellipse at 80% 0%, rgba(233,185,74,0.55), transparent 55%),
+      radial-gradient(ellipse at 20% 100%, rgba(108,58,166,0.5), transparent 55%),
+      linear-gradient(135deg,#c96442 0%,#15140f 60%,#1a0e2b 100%);
+    display:flex; flex-direction:column; padding:80px 70px;
+    box-shadow:0 40px 120px -20px rgba(0,0,0,0.7);
+  }
+  .grain { position:absolute; inset:0; pointer-events:none; opacity:0.18; background-image:radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px); background-size:3px 3px; }
+  .label { font-size:13px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; opacity:0.85; }
+  .glyph { width:120px; height:120px; border-radius:32px; display:grid; place-items:center; background:rgba(255,255,255,0.08); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.18); }
+  h1 { font-family:'Inter Tight',sans-serif; font-weight:900; font-size:148px; line-height:0.95; letter-spacing:-0.04em; margin:0; }
+  .em { font-family:Georgia, 'Noto Serif SC', serif; font-weight:700; font-style:italic; color:#e9b94a; }
+  .feature { display:flex; align-items:flex-start; gap:18px; }
+  .feature .ic { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,0.12); display:grid; place-items:center; font-size:22px; flex-shrink:0; }
+  .feature .t { font-size:22px; font-weight:600; }
+  .feature .d { font-size:15px; opacity:0.7; line-height:1.55; margin-top:4px; }
+  .qr { width:120px; height:120px; border-radius:14px; background:#fff; padding:12px; }
+  .qr svg { width:100%; height:100%; }
+</style>
+</head>
+<body>
+<div class="poster">
+  <div class="grain"></div>
+
+  <div class="flex items-center justify-between">
+    <div class="label">RELEASE · 2026.05</div>
+    <div class="glyph">
+      <div style="font-family:Georgia,serif; font-style:italic; font-size:78px; font-weight:700; color:#fff">H</div>
+    </div>
+  </div>
+
+  <div style="margin:auto 0; flex:none">
+    <div class="label" style="margin-bottom:24px">v0.1 · 已发布 / Now Available</div>
+    <h1>HTML<br/><span class="em">Anything</span></h1>
+    <div style="font-size:30px; font-weight:500; opacity:0.92; margin-top:36px; max-width:560px; line-height:1.35">
+      任何文档 → 世界级好看的 HTML,<br/>
+      用你<span class="em" style="color:#e9b94a">本地</span>的 AI agent。
+    </div>
+  </div>
+
+  <div style="display:grid; grid-template-columns:1fr; gap:18px; margin:48px 0 32px">
+    <div class="feature"><div class="ic">🎨</div><div><div class="t">9 套世界级模板</div><div class="d">PPT · 简历 · 海报 · 小红书 · 数据报告 …</div></div></div>
+    <div class="feature"><div class="ic">🔌</div><div><div class="t">8 个本地 agent 自动检测</div><div class="d">Claude / Cursor / Codex / Gemini / Copilot …</div></div></div>
+    <div class="feature"><div class="ic">🗝️</div><div><div class="t">0 API Key</div><div class="d">复用你已经登录的 CLI session, 0 边际成本</div></div></div>
+    <div class="feature"><div class="ic">📋</div><div><div class="t">一键发布</div><div class="d">公众号 / 推特 / 知乎 / PNG, 直接粘贴</div></div></div>
+  </div>
+
+  <div style="display:flex; align-items:center; gap:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.18)">
+    <div class="qr">
+      <svg viewBox="0 0 33 33" xmlns="http://www.w3.org/2000/svg">
+        <rect width="33" height="33" fill="#fff"/>
+        <g fill="#0a0a0a">
+          <rect x="2" y="2" width="9" height="9" fill="none" stroke="#0a0a0a" stroke-width="2"/>
+          <rect x="5" y="5" width="3" height="3"/>
+          <rect x="22" y="2" width="9" height="9" fill="none" stroke="#0a0a0a" stroke-width="2"/>
+          <rect x="25" y="5" width="3" height="3"/>
+          <rect x="2" y="22" width="9" height="9" fill="none" stroke="#0a0a0a" stroke-width="2"/>
+          <rect x="5" y="25" width="3" height="3"/>
+          <rect x="13" y="2" width="2" height="2"/><rect x="17" y="2" width="2" height="2"/>
+          <rect x="13" y="6" width="2" height="2"/><rect x="15" y="9" width="2" height="2"/>
+          <rect x="2" y="13" width="2" height="2"/><rect x="6" y="13" width="2" height="2"/>
+          <rect x="13" y="13" width="2" height="2"/><rect x="17" y="13" width="2" height="2"/><rect x="21" y="13" width="2" height="2"/>
+          <rect x="13" y="17" width="2" height="2"/><rect x="19" y="15" width="2" height="2"/>
+          <rect x="22" y="17" width="2" height="2"/><rect x="26" y="17" width="2" height="2"/>
+          <rect x="13" y="21" width="2" height="2"/><rect x="17" y="21" width="2" height="2"/>
+          <rect x="22" y="22" width="2" height="2"/><rect x="26" y="26" width="2" height="2"/>
+          <rect x="22" y="29" width="2" height="2"/><rect x="29" y="22" width="2" height="2"/>
+        </g>
+      </svg>
+    </div>
+    <div>
+      <div style="font-family:'JetBrains Mono',monospace; font-size:14px; opacity:0.95">$ pnpm dlx html-anything</div>
+      <div style="font-size:14px; opacity:0.7; margin-top:6px">github.com/your-org/html-anything</div>
+    </div>
+  </div>
+</div>
+</body>
+</html>

package/skills/design/pr-feedback-quality-gate/SKILL.md

@@ -0,0 +1,57 @@
+---
+name: pr-feedback-quality-gate
+description: |
+  Use this skill when Codex needs safely track pull request feedback, resolve review comments or merge conflicts, verify fixes, and use a read-only cross-review before committing or pushing follow-up changes. Recast from the original pr-feedback-quality-gate/SKILL.md material as the pr-feedback-quality-gate procedure.
+---
+
+# Pr Feedback Quality Gate
+
+## Role
+
+Use this skill when Codex needs safely track pull request feedback, resolve review comments or merge conflicts, verify fixes, and use a read-only cross-review before committing or pushing follow-up changes. Recast from the original pr-feedback-quality-gate/SKILL.md material as the pr-feedback-quality-gate procedure.
+
+## Source Trace
+
+- Original Markdown: `pr-feedback-quality-gate/SKILL.md`
+- Reformulated skill name: `pr-feedback-quality-gate`
+
+## Operating Guidance
+
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+
+Use this when a PR has review feedback, merge conflicts, pending checks, or
+needs a monitored follow-up after a fix.
+
+## Workflow
+
+1. Review PR state first: comments, reviews, mergeability, checks, branch, and
+   local worktree status. Keep unrelated local changes out of the PR.
+2. Use an isolated worktree for review fixes or conflict resolution when the
+   main checkout is dirty, behind remote, or being used by another agent.
+3. Make the smallest safe fix. Preserve the original bug invariant and any
+   newer upstream structure introduced by `main`.
+4. Execute the narrow validation first, then the repository-required gates. For
+   this repo, include `pnpm guard`; add package typechecks/builds/tests when
+   touched files require them.
+5. Before commit or push, execute a read-only cross-review of the staged or proposed
+   diff. Forbid file edits and git write or coordination commands.
+6. Treat cross-review as evidence, not authority. Accept only findings grounded
+   in the diff, repository rules, user goal, or validation results. Downgrade or
+   reject style preferences, broad scope expansion, and suggestions that conflict
+   with safety or ownership boundaries; record the reason briefly.
+7. If accepted blockers remain, fix them, rerun validation, and repeat the
+   review. Commit and push only after validation passes and there are no
+   accepted blockers.
+
+## Monitoring cadence
+
+- Active review or failing checks: check often enough to unblock quickly.
+- Clean or approved PR waiting for merge: check about every 12 hours.
+- Merged PR: reduce to daily lightweight observation for CI, release, or
+  regression signals, and stop making code changes unless asked.
+
+## Report
+
+Consistently report PR state, actions taken, cross-review verdict, accepted or
+rejected findings, validation execute, commits pushed, skipped checks with reasons,
+remaining risks, and next step.