跳到正文
cccskills
免费在 GitHub 公开

creative-web

Use when the design concept calls for Three.js or React Three Fiber 3D, WebGL/WebGPU, Rive, Spline, Theatre.js, SVG, canvas, shaders, particle systems, or other immersive creative-web techniques.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(5)

  • SKILL.md1.7 KB
  • agents/openai.yaml231 B
  • references/capability-matrix-2026.md2.1 KB
  • references/rive-spline-theatre.md626 B
  • references/three-r3f.md582 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Creative Web

Entry criterion

Creative technology must communicate product meaning, spatial information, material character, or memorable brand identity. Decorative complexity alone is not sufficient.

Router

Read references/capability-matrix-2026.md first. Read references/three-r3f.md for programmable 3D and references/rive-spline-theatre.md for authored interactive assets/timelines.

  • Three.js: low-level scene/render/shader control.
  • React Three Fiber: React-native Three.js scene architecture.
  • Rive: interactive vector animation and state machines.
  • Spline: designer-authored 3D scenes and web integration.
  • Theatre.js: timeline authoring and synchronized scene/property animation.
  • SVG: first choice for many crisp illustrative/mask/path effects.
  • Canvas/shader: custom computation when visual behavior cannot be expressed cleanly in DOM/SVG.

Progressive enhancement contract

  • Essential text, navigation and controls stay in semantic DOM.
  • Define a still/static fallback for 3D/canvas/vector scenes.
  • Degrade particle count, DPR, post-processing, shadows and continuous loops on constrained devices.
  • Lazy-load heavy scenes below the fold or behind interaction.
  • Stop or reduce rendering when offscreen.
  • Respect reduced motion.

Acceptance

The creative layer must strengthen the design POV enough to justify load, runtime and QA cost.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Use for release-level accessibility and performance review, including WCAG 2.2 AA, keyboard/focus, target size, reduced motion, semantic controls, Core Web Vitals, images/fonts/JavaScript, and animation or 3D performance budgets.

中文简介正在准备中。当前显示原文说明。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use to audit a generated or heavily templated interface for generic AI aesthetics, unjustified trend patterns, component-registry residue, vague copy, repetitive motion, novelty theater, or visual decisions that lack brand/UX rationale.

中文简介正在准备中。当前显示原文说明。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use when a website needs a strong visual point of view, distinct concept routes, composition, typography, color/materiality, imagery direction, spatial rhythm, or a memorable signature idea.

中文简介正在准备中。当前显示原文说明。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use when deciding whether to implement UI from native HTML/CSS, accessible primitives, shadcn-style source components, or visual component registries such as 21st.dev, Aceternity, React Bits, Motion Primitives, Magic UI, or Animate UI.

中文简介正在准备中。当前显示原文说明。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use after substantial web projects or repeated design defects to convert evidence into reusable skill improvements through root-cause analysis, regression scenarios, and controlled proposals without silently changing the core OS.

中文简介正在准备中。当前显示原文说明。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use as an independent design-review pass after rendering a website; evaluates macro, meso, micro craft, applies the Design Quality rubric, identifies root causes, and prioritizes changes without defending the implementation intent.

中文简介正在准备中。当前显示原文说明。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

查看 Lrinvl1203 的全部技能

报告此技能的问题