web-proto-soft
Apple aesthetic: silver/cream canvas + double-bezel cards + button-in-button + spring motion
1How It Works & Mechanism
This skill is not an executable program, but a "template" for html-anything: a directory (SKILL.md + example.html[/example.md]) scanned and read from disk at runtime by loader.ts—adding a new template simply means adding a directory, without modifying any TypeScript code.
Adding a template = adding a folder. No TS code change required; the API
Frontmatter provides metadata for the selector/API (zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags) and is mapped to SkillMeta by fmToMeta(); the body following the frontmatter constitutes the actual specification supplied to the model.
zhName: fm.zh_name ?? fm.name ?? id,
During generation, the template body serves as the prompt body: /api/convert invokes assemblePrompt() to concatenate "global design directives + this template's body + user content" into a unified prompt passed to the host's local agent CLI, with the resulting HTML captured as a stream from stdout.
prompt = assemblePrompt({ body: skill.body, content, format });
Above the template body sits a block of global lead directives (SHARED_DESIGN_DIRECTIVES), uniformly enforcing technical and content disciplines before each template—the external CDN and font links commonly found in example HTML originate here (injected by the host shell, not required by the template itself).
通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。
Artifacts are returned as text via stdout: global directives explicitly forbid the agent from accessing the file system, leaving disk persistence to the frontend—thus the template directory has neither scripts nor disk-write capabilities.
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
example.html serves as a pre-rendered example bundled with the package: /api/templates/<id>/preview returns it verbatim as text/html to an iframe (for inline selector previews), while /api/templates/<id>/example returns both example.md and example.html together.
return new Response(skill.exampleHtml, {
The body breaks down "Apple-tier soft tactile feel" into four actionable elements: a silver/cream canvas with an ambient mesh background, double-bezel cards, button-in-button CTAs, and subtle spring bounce motion.
- Double-bezel 卡片 (内外两层圆角 + 高光)
The double bezel is realized using a pair of border-radius variables: an outer layer --shell-radius 2.25rem, and an inner layer --core-radius = shell - 0.4rem, paired with an --innerlight highlight to create a "nested bezel" visual aesthetic.
--shell-radius: 2.25rem;
Spring motion is powered by a dedicated easing curve (--ease-spring: cubic-bezier(0.16, 1.16, 0.3, 1), with a bezier overshoot > 1), accompanied by a conventional --ease curve for non-elastic transitions.
--ease-spring: cubic-bezier(0.16, 1.16, 0.3, 1);
The ambient mesh background consists of two large-radius blurred color patches (.mesh::before/::after) drifting slowly, with full handling to disable animations under prefers-reduced-motion.
@media (prefers-reduced-motion: reduce) { .mesh::before, .mesh::after { animation: none; } }
The CLI side features a direct keyword matching channel: skills-matcher.ts maps keywords in user content directly to this template id; a match assigns confidence = match_count * 2 + 3, and reaching the threshold of 3 triggers local rules without asking the model to select a template.
[["苹果", "Apple", "iOS", "soft", "squircle"], "web-proto-soft"],
Threshold constants used in the CLI fallback match: content length must exceed 60 characters before AI summary matching is enabled; the strong signal threshold is 3.
const MIN_CONTENT_LENGTH_FOR_AI = 60;
The host shell renders examples/artifacts using an iframe with sandbox="allow-scripts allow-same-origin" (allowing scripts and same-origin access)—this is an architectural tradeoff of the product shell documented as a risk and does not affect the safety grading of this skill.
sandbox="allow-scripts allow-same-origin"
2Core Capabilities
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| network | Google Fonts（Plus Jakarta Sans / JetBrains Mono） |
| network | Google Fonts 静态资源域（preconnect） |
4Recommended Governance & Evidence
- SKILL.md: Comprises purely prompt instructions and rule text, without script execution or external side effects
5Second-Pass Verification
- [ok] skill 目录文件清单 — find 得 SKILL.md + example.html，无 scripts/references。
- [ok] 外部端点仅字体 — example.html 仅 fonts.googleapis.com css2 与 fonts.gstatic.com preconnect；无 <script src> 外链；SKILL.md 正文无 URL。
- [ok] Double-bezel 是否落地 — --shell-radius/--core-radius 变量 + BENTO 注释区块 + .b-card .core 结构（grep 命中 .b-card .core 与 .hero-preview .core）。
- [discrepancy] Button-in-button 是否在示例中 — SKILL.md 写了「- Button-in-button CTA」，但示例中未找到该结构的类名或嵌套按钮标记（对 example.html grep 无 in-btn/btn-in-btn 类命中），属示例只演示其余三条。
- [ok] spring 缓动是否真实使用 — --ease-spring 定义于 :root，并在 .hero-preview 等元素上以 transition: transform 360ms var(--ease-spring) 使用。
- [ok] reduced-motion 处理 — 存在 @media (prefers-reduced-motion: reduce) 关闭 .mesh 动画；同系列的 brutalist/editorial 未见同等处理。
- [ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["苹果", "Apple", "iOS", "soft", "squircle"], "web-proto-soft"] 行。
- [ok] 判级 green 自证 — 目录零脚本文件（示例内联 reveal 属产物示例）、零凭证、零写盘；正文无运行时接口 → green。
6Verdict & Scenarios
d75a8b1932228559…