Browser Canvas Poetry

将诗歌、文学意象、视觉艺术概念转化为浏览器原生艺术作品

Security Scan

The skill's files, instructions, and runtime requirements are consistent with a frontend generative-art helper—it asks for no secrets or unusual system access and is instruction-first; review the included validation script before executing code produced by the skill.

Purpose & Capability

The name/description (turn poetry and imagery into browser-native art) matches the deliverables (prompt templates, examples, integration guidance). References to Pretext and front-end stacks are appropriate to the goal; no unrelated credentials, binaries, or privileged config paths are requested.

Instruction Scope

SKILL.md stays within creative-coding scope: it produces prompts, templates, and integration guidance and optionally fetches public art references (Wikipedia, poetry DB). It also instructs generating multi-file projects (Pretext) and example code; it does not ask the agent to read arbitrary system files or exfiltrate data. Note: integration guidance assumes installing/importing libraries (e.g., @chenglou/pretext) but does not provide an install step—users must install dependencies when they run generated projects.

Install Mechanism

No install spec is present (instruction-only plus docs and one script). That minimizes supply-chain risk. The skill does reference external libraries and GitHub repos as implementation targets, but it does not automatically download or execute remote code as part of installation.

Credentials

The skill requires no environment variables, credentials, or config paths. Optional mentions of using public APIs (Wikipedia, poetry DB) are proportional to the purpose and are explicitly optional.

Persistence & Privilege

always is false and the skill does not request persistent/privileged presence. It also does not request to modify other skills or system-wide agent settings.

Assessment

This skill is internally coherent for creating browser-native generative art: it needs no secrets and is instruction-first. Before running or executing any generated code, manually inspect any shipped scripts (notably scripts/art-validator.js) and any code the skill generates. When you generate multi-file projects that import packages (Pretext, Three.js, etc.), install those npm packages locally from trustworthy registries and review package.json. Avoid running unknown JS on your machine without code review; the skill itself does not request credentials or perform network calls automatically, but optional use of public APIs (Wikipedia or a poetry DB) will require you to supply any API keys and to vet those endpoints.

浏览器画布诗意 - 将艺术想象编译为浏览器原生体验

Skill Overview

本Skill用于: 将诗歌、文学意象、视觉艺术概念转化为浏览器原生艺术作品。

核心能力:

• 将抽象艺术概念翻译为前端代码提示词
• 提供丰富的生成式艺术风格参考
• 验证输出是否符合"艺术形式"标准
• 交互式咨询建议服务
• 水墨与丹青双智能体协同创作
• 可导入的交互组件库（粒子、物理、生物、动画等）

使用场景:

• AI Coding IDE (Cursor/Codex/Trae) 生成创意前端项目
• 双智能体协同创作（视觉 × 交互）
• 创意编程教学与灵感激发
• 生成式艺术作品快速原型
• 诗歌可视化与互动文学

技术框架支持:

• ✅ 单一HTML文件（快速原型）
• ✅ Pretext框架（多文件交互项目）- 支持文本测量、动态排版、粒子动画等复杂交互
• ✅ 原生Canvas/WebGL/C用心电图SVG
• ✅ 任何前端框架集成

---

Input Schema

用户可通过以下方式调用本Skill：

用户输入: 艺术概念描述 / 诗歌片段 / 情绪关键词 / 视觉风格偏好

支持的输入格式

输入类型:
  - 诗歌文本: "落霞与孤鹜齐飞，秋水共长天一色"
  - 情绪关键词: "孤独的、流动的、碎片化的"
  - 视觉风格: "赛博朋克、和风极简、后现代解构"
  - 艺术流派: "表现主义、抽象表现主义、极简主义"
  - 技术偏好: "纯CSS动画、WebGL粒子、SVG路径动画"

---

Output Schema

输出格式:
  prompt: 生成给AI IDE的代码生成提示词
  style_reference: 相关艺术风格参考
  technical_hints: 技术实现提示
  validation_result: 艺术形式验证结果
  suggestions: 互动建议与改进方向

---

Execution Context

环境要求

• 无需特殊环境变量
• 需要访问互联网获取艺术参考资料（可选）
• 支持所有主流浏览器环境

外部依赖

• 无强制依赖
• 可选：Wikipedia API（获取艺术流派信息）
• 可选：诗歌数据库API（获取中文诗词意象）

---

Art Categories | 艺术风格分类

详见 categories.md - 包含10大艺术风格类别的完整描述和生成提示词模板。

---

Art Validation | 艺术形式验证标准

详见 validation.md - 包含自我检测机制和评估标准。

---

Interactive Consultation | 互动咨询服务

详见 consultation.md - 包含4种咨询模式的完整说明。

---

Integration Guide | 与AI Coding IDE集成

详见 integration.md - 包含给Codex/Claude Code/Cursor的提示词模板。

✨ 新增：Pretext框架支持

• 支持多文件交互项目生成
• 包含动态文本排版、粒子系统、交互动画等模板
• 详见 integration.md 中的"Pretext框架项目生成提示词"章节

---

References | 参考资料

本Skill包含以下参考文档，位于 references/ 目录：

必读参考

1. literary-imagery.md - 中西文学意象对照表
2. art-movements.md - 现代艺术流派与浏览器艺术对应关系
3. technical-poetry.md - 代码即诗歌：程序员的文学修养
4. browser-capabilities.md - 浏览器独特能力与艺术可能性
5. nebula-rendering.md - 🌌 星云渲染专项技术指南（Three.js Shader/WebGL Raymarching）
6. frontend-rendering-libraries.md - 📚 前端渲染开源库完整分类指南（星空、山水、生物、人物）
7. interactive-creatures.md - 🐾 互动生物行为系统指南（小狗、小猫、蝴蝶、植物等）
8. ai-partner.md - 🤝 AI伙伴人格与情绪系统（评价、建议、欣赏、队友关系）
9. multi-agent.md - 🎨 水墨与丹青双智能体协同创作系统
10. interactive-api-components.md - 📦 可导入的交互组件库（粒子、物理、生物、动画等）

选读参考

5. case-studies.md - 浏览器原生艺术案例分析
6. performance-tips.md - 性能优化与艺术效果的平衡
7. accessibility.md - 无障碍艺术：让每个人都能体验
8. curation-guide.md - 如何策展浏览器原生艺术展

---

Best Practices | 最佳实践

详见 best-practices.md - 包含DO和DON'T准则。

---

Examples | 案例展示

详见 examples.md - 包含完整案例分析和验证结果。

---

Contribution | 贡献指南

欢迎为本Skill贡献新的艺术风格、提示词模板或案例：

1. Fork本仓库
2. 添加新的艺术类别或参考文档
3. 确保新增内容符合"艺术形式验证标准"
4. 提交Pull Request

---

License | 许可

本Skill遵循 MIT License，可自由使用、修改和分发。

---

Author | 作者

Browser Canvas Poetry Collective

• 浏览器原生艺术爱好者社区
• 欢迎交流：[e-mail]

---

"代码是诗，浏览器是画布，你的手指是最后的笔触。" "Code is poetry, the browser is canvas, your fingers are the final brushstroke."