跳转到正文
skillsafebeta
← 报告库
用途分类 / 其他用途

Design Taste Frontend V1 Skill 安全审计

作者说它能做什么（原文）

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

第三方安全检查结论

发现安全风险

已检查文件
1
发现的风险
4
会不会运行危险命令？检查是否下载程序后直接运行、让他人远程控制电脑，或藏起要运行的命令。发现 1 项风险
低风险

建议的依赖安装命令会更改项目并可能运行包生命周期脚本

原文依据：1 处
发现了什么

Skill 要求在依赖缺失时输出 npm install 命令。用户执行后，npm 通常会更改依赖清单和锁文件，并可能运行所安装包及其传递依赖的生命周期脚本。材料没有要求锁定版本、审查包来源或使用忽略脚本模式。

为什么需要注意

执行建议命令会持久改变项目依赖；若解析到错误、被劫持或不受信任的包版本，其安装代码可在用户权限范围内运行。材料本身并未执行命令，也没有证据表明列出的包恶意。

Skill 只要求输出安装命令，并不会自行执行；风险以用户随后执行为条件。执行示例 `npm install package-name` 通常会修改项目依赖记录和锁文件，并可能运行 npm 包的安装生命周期脚本。材料未限定精确版本或脚本策略。用户可先审查包名、来源、版本和传递依赖，并要求提供不会自动运行脚本的审查流程。

SKILL.md:18来自说明文档打开原文件
* **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. **Never** assume a library exists.* **Framework & Interactivity:** React or Next.js. Default to Server Components (`RSC`).
会不会泄露文件和密钥？检查是否发送含密码或密钥的文件，以及代码里是否直接写了密钥。发现 1 项风险
中风险

生成的页面可能向 Picsum 披露访客网络元数据

原文依据：1 处
发现了什么

Skill 明确推荐把第三方 Picsum URL 直接用作图片占位符。浏览器显示页面时会连接该域名，从而向第三方暴露访客 IP、浏览器请求头，以及在浏览器策略允许时的来源信息；图片内容也由第三方控制。

为什么需要注意

部署后的每位访客都可能在未预期的情况下联系外部服务。这会带来隐私、合规、内容稳定性和第三方可用性风险。

该指令明确推荐在生成页面中直接使用 picsum.photos 的远程图片地址。页面被访客浏览且图片未被代理或本地化时，浏览器会向该第三方请求资源，从而披露 IP 等连接信息；第三方也能改变返回的图片。用户可要求使用本地资源、受控域名或图片代理，并设置严格的引用来源策略。

SKILL.md:124来自说明文档打开原文件
### External Resources & Components* **NO Broken Unsplash Links:** Do not use Unsplash. Use absolute, reliable placeholders like `https://picsum.photos/seed/{random_string}/800/600` or SVG UI Avatars.* **shadcn/ui Customization:** You may use `shadcn/ui`, but NEVER in its generic default state. You MUST customize the radii, colors, and shadows to match the high-end project aesthetic.
会不会删除文件或一直在后台运行？检查是否大范围删除文件、改写磁盘，或设置自动启动。未发现风险
会不会绕过安全保护？检查是否跳过网站安全验证、开放过多文件权限，或取消操作前的确认。发现 2 项风险
中风险

强制无限动画可能忽略访客的减少动态效果设置

原文依据：5 处
发现了什么

Skill 要求每张卡片都有无限循环的活动状态，并把持续微动画作为默认规则，但检查清单没有要求尊重 prefers-reduced-motion 或提供关闭选项。即使通过组件隔离减少重渲染，也不能解决眩晕、注意力或用户控制问题。

为什么需要注意

生成的界面可能持续消耗 CPU/电量，并使对动态效果敏感的访客难以安全使用页面。

这是生效的默认设计要求：运动强度基线为 6，会触发持续、无限动画，Bento 卡片又被要求全部无限循环。所给材料没有相应的减少动态效果条件或关闭机制，因此生成页面可能违背访客的减弱动画偏好并造成不适。组件隔离只处理性能。用户可要求必须遵守 `prefers-reduced-motion`、暂停不可必要动画并提供开关。

SKILL.md:203来自说明文档打开原文件
### B. The Animation Engine Specs (Perpetual Motion)All cards must contain **"Perpetual Micro-Interactions."** Use the following Framer Motion principles:* **Spring Physics:** No linear easing. Use `type: "spring", stiffness: 100, damping: 20` for a premium, weighty feel.* **Layout Transitions:** Heavily utilize the `layout` and `layoutId` props to ensure smooth re-ordering, resizing, and shared element state transitions.* **Infinite Loops:** Every card must have an "Active State" that loops infinitely (Pulse, Typewriter, Float, or Carousel) to ensure the dashboard feels "alive".* **Performance:** Wrap dynamic lists in `<AnimatePresence>` and optimize for 60fps. **PERFORMANCE CRITICAL:** Any perpetual motion or infinite loop MUST be memoized (React.memo) and completely isolated in its own microscopic Client Component. Never trigger re-renders in the parent layout.
查看另外 4 个位置
SKILL.md:218来自说明文档打开原文件
## 10. FINAL PRE-FLIGHT CHECKEvaluate your code against this matrix before outputting. This is the **last** filter you apply to your logic.- [ ] Is global state used appropriately to avoid deep prop-drilling rather than arbitrarily?- [ ] Is mobile layout collapse (`w-full`, `px-4`, `max-w-7xl mx-auto`) guaranteed for high-variance designs?- [ ] Do full-height sections safely use `min-h-[100dvh]` instead of the bugged `h-screen`?- [ ] Do `useEffect` animations contain strict cleanup functions?- [ ] Are empty, loading, and error states provided?- [ ] Are cards omitted in favor of spacing where possible?- [ ] Did you strictly isolate CPU-heavy perpetual animations in their own Client Components?
SKILL.md:10来自说明文档打开原文件
* DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)* MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)* VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)
SKILL.md:70来自说明文档打开原文件
* **Magnetic Micro-physics (If MOTION_INTENSITY > 5):** Implement buttons that pull slightly toward the mouse cursor. **CRITICAL:** NEVER use React `useState` for magnetic hover or continuous animations. Use EXCLUSIVELY Framer Motion's `useMotionValue` and `useTransform` outside the React render cycle to prevent performance collapse on mobile.* **Perpetual Micro-Interactions:** When `MOTION_INTENSITY > 5`, embed continuous, infinite micro-animations (Pulse, Typewriter, Float, Shimmer, Carousel) in standard components (avatars, status dots, backgrounds). Apply premium Spring Physics (`type: "spring", stiffness: 100, damping: 20`) to all interactive elements—no linear easing.* **Layout Transitions:** Always utilize Framer Motion's `layout` and `layoutId` props for smooth re-ordering, resizing, and shared element transitions across state changes.
SKILL.md:204来自说明文档打开原文件
### B. The Animation Engine Specs (Perpetual Motion)All cards must contain **"Perpetual Micro-Interactions."** Use the following Framer Motion principles:* **Spring Physics:** No linear easing. Use `type: "spring", stiffness: 100, damping: 20` for a premium, weighty feel.* **Layout Transitions:** Heavily utilize the `layout` and `layoutId` props to ensure smooth re-ordering, resizing, and shared element state transitions.* **Infinite Loops:** Every card must have an "Active State" that loops infinitely (Pulse, Typewriter, Float, or Carousel) to ensure the dashboard feels "alive".* **Performance:** Wrap dynamic lists in `<AnimatePresence>` and optimize for 60fps. **PERFORMANCE CRITICAL:** Any perpetual motion or infinite loop MUST be memoized (React.memo) and completely isolated in its own microscopic Client Component. Never trigger re-renders in the parent layout.
低风险

安装命令没有固定依赖版本

原文依据：1 处
发现了什么

安装命令没有指定依赖版本。同样的命令以后可能下载不同代码，你实际安装的内容可能与这次检查时不同。

为什么需要注意

即使命令和报告没变，以后安装时也可能下载到另一份代码。

该指令要求依赖缺失时输出不含版本号的示例安装命令。只有用户实际执行命令才会安装；届时解析到的版本可能随时间变化，因此检查结果不能确定未来安装的具体代码。用户可要求作者提供经过审查的精确版本和锁文件。

SKILL.md:18来自说明文档打开原文件
* **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. **Never** assume a library exists.* **Framework & Interactivity:** React or Next.js. Default to Server Components (`RSC`).
会不会误导 AI 或隐藏内容？检查工作说明是否要求 AI 忽略你的指令、干扰检查结果，或夹带看不见的文字。未发现风险
会不会偷偷改推广链接或收款方？检查是否强制替换推广链接或收款对象，同时要求隐瞒更改。未发现风险

Skill 逻辑拆解

8 个说明模块

该 Skill 是一组前端生成规则；它默认要求 React/Next.js、Tailwind，并要求在引用第三方库前检查 package.json。提供的材料中没有可执行脚本，也没有直接读取凭据、账户或用户文件的指令。

查看原文
SKILL.md:18来自说明文档打开原文件
* **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. **Never** assume a library exists.* **Framework & Interactivity:** React or Next.js. Default to Server Components (`RSC`).     * **RSC SAFETY:** Global state works ONLY in Client Components. In Next.js, wrap providers in a `"use client"` component.    * **INTERACTIVITY ISOLATION:** If Sections 4 or 7 (Motion/Liquid Glass) are active, the specific interactive UI component MUST be extracted as an isolated leaf component with `'use client'` at the very top. Server Components must exclusively render static layouts.* **State Management:** Use local `useState`/`useReducer` for isolated UI. Use global state strictly for deep prop-drilling avoidance.* **Styling Policy:** Use Tailwind CSS (v3/v4) for 90% of styling.     * **TAILWIND VERSION LOCK:** Check `package.json` first. Do not use v4 syntax in v3 projects.     * **T4 CONFIG GUARD:** For v4, do NOT use `tailwindcss` plugin in `postcss.config.js`. Use `@tailwindcss/postcss` or the Vite plugin.

默认配置会驱动高不对称、持续动态但较低密度的界面；用户明确提出不同要求时，这些值应随之调整。

查看原文
SKILL.md:9来自说明文档打开原文件
## 1. ACTIVE BASELINE CONFIGURATION* DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)* MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)* VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)**AI Instruction:** The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7.

它会在缺少依赖时向用户输出安装命令，并可能为复杂动画建议 Framer Motion、GSAP 或 ThreeJS；材料没有指示代理自行执行这些命令。

查看原文
SKILL.md:18来自说明文档打开原文件
* **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. **Never** assume a library exists.* **Framework & Interactivity:** React or Next.js. Default to Server Components (`RSC`).
SKILL.md:129来自说明文档打开原文件
## 8. THE CREATIVE ARSENAL (High-End Inspiration)Do not default to generic UI. Pull from this library of advanced concepts to ensure the output is visually striking and memorable. When appropriate, leverage **GSAP (ScrollTrigger/Parallax)** for complex scrolltelling or **ThreeJS/WebGL** for 3D/Canvas animations, rather than basic CSS motion. **CRITICAL:** Never mix GSAP/ThreeJS with Framer Motion in the same component tree. Default to Framer Motion for UI/Bento interactions. Use GSAP/ThreeJS EXCLUSIVELY for isolated full-page scrolltelling or canvas backgrounds, wrapped in strict useEffect cleanup blocks.
从这里开始 · 工作说明SKILL.md
design-taste-frontend-v1
连线表示工作说明包含的模块，不是实际运行顺序。点击模块可查看原文。 另有 2 个章节，可在原文件中查看。
文件与检查记录1 个文件

检查范围与遗漏

逐文件查看涉及的内容

下方列出本次涉及的原文范围；纳入检查不代表已查清所有问题。

  • SKILL.md已纳入全文

这份报告只针对上方版本。我们看了拿到的代码和说明文件，没有实际运行 Skill，也没有检查它另外安装的软件包。因此，这不是“保证安全”的承诺；换了版本或使用环境，结果也可能不同。

  • SKILL.md工作说明

代码和说明中提到的操作

安装其他软件包
SKILL.md:18来自说明文档打开原文件
* **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. **Never** assume a library exists.* **Framework & Interactivity:** React or Next.js. Default to Server Components (`RSC`).
连接外部网站
SKILL.md:124来自说明文档打开原文件
### External Resources & Components* **NO Broken Unsplash Links:** Do not use Unsplash. Use absolute, reliable placeholders like `https://picsum.photos/seed/{random_string}/800/600` or SVG UI Avatars.* **shadcn/ui Customization:** You may use `shadcn/ui`, but NEVER in its generic default state. You MUST customize the radii, colors, and shadows to match the high-end project aesthetic.
读取了多少行
227
文件校验值（用于核对版本）
f17ac20d1c47504b957e6a9f8f906ebec8745a6e676d01a975acc3b026bc3909