@alanwang-merit/meritdata-platform-skill-package 1.0.8 → 1.0.10

package/skills/design-review-report/SKILL.md

@@ -0,0 +1,150 @@
+---
+name: design-review-report
+description: 设计评审报告生成 | 触发条件：生成设计评审报告、设计评审总结、输出评审报告 | 基于设计文档和需求文档生成标准化的评审报告，支持多轮迭代评审（V1/V2/V3），包含总体判定、逐项评估、问题清单、亮点和需求一致性检查
+author: maohan
+source: project
+date_added: "2026-07-08"
+risk: low
+---
+
+# 设计评审报告生成
+
+本技能用于生成标准化的设计评审报告，从多个维度评估设计文档质量，检查与需求文档的一致性，输出包含总体判定、问题清单和改进建议的评审报告。
+
+---
+
+## 使用方法
+
+1. 加载模板文件 `references/设计评审报告模板.md`
+2. 加载设计文档（用户提供路径或内容）
+3. 加载需求文档（作为评审依据）
+4. 收集历次评审记录（支持多轮迭代评审）
+5. 按模板结构生成评审报告（包含完整迭代历史）
+
+---
+
+## 评审要点
+
+### 需求一致性
+
+- 设计是否覆盖需求文档中的所有功能点
+- 非功能性需求是否在设计中体现
+- 接口需求是否与需求文档一致
+
+### 架构合理性
+
+- 系统架构图是否清晰（Mermaid/PlantUML）
+- 模块划分是否边界清晰、低耦合
+- 关键技术决策是否有选型理由和风险评估
+
+### 数据模型
+
+- 数据模型定义是否完整（业务模型、数据库表模型）
+- ER图是否展示实体关系
+- 关键字段是否有详细说明
+
+### API契约
+
+- REST API端点是否遵循REST规范
+- 接口定义是否完整（请求方法、参数、响应、超时）
+- 联动接口是否明确
+
+### 前端（如有）
+
+- 界面交互设计是否完整
+- 前端技术方案是否清晰
+- 与后端接口对接是否明确
+
+### 非功能
+
+- 性能设计：性能指标、优化方案
+- 安全设计：认证/授权、数据加密、审计
+- 可靠性设计：容错、恢复、异常处理
+- 兼容性设计：浏览器、操作系统、历史功能兼容
+
+### 内部一致性
+
+- 命名规范是否统一
+- 技术选型是否前后一致
+- 接口风格是否统一
+
+### 工程化
+
+- 部署结构设计是否清晰
+- 配置项设计是否完整
+- 监控点设计是否覆盖关键指标
+- 特殊场景设计是否考虑周全
+
+### 需修改项分级
+
+- 🔴必须：阻塞项，必须修复后才能通过（如：核心功能缺失、数据错误、严重歧义）
+- 🟠应该：重要项，强烈建议修复
+- 🟡建议：改进项，建议修复但不阻塞
+- 分级使用必须正确，不能将"建议"标为"必须"，也不能将"必须"标为"建议"
+
+### 亮点提炼
+
+- 至少 2 条具体亮点
+- 亮点应具体可感（如：架构亮点、约束贯彻、关键决策）
+- 避免空泛赞美
+
+### 与需求文档的偏差
+
+- 描述设计文档与需求文档之间的不一致之处
+- 常见检查项参考：端点表一致性、错误码一致性、状态枚举一致性、功能点覆盖度、数据模型一致性
+
+---
+
+## 多轮迭代评审支持
+
+**场景**：设计文档评审后，作者根据反馈修改；评审员再次评审，如此往复。
+
+**核心要求**：
+- 评审报告必须**完整记录每次评审的详细问题**
+- 每次评审的问题必须**追踪修复状态**
+- **不能只记录最后一次评审结果**，必须展示**完整迭代历史**
+- 最终结论必须基于**当前最新状态**
+
+### 迭代评审记录模板
+
+每次评审记录必须包含：
+
+| 字段 | 说明 |
+|------|------|
+| 评审轮次 | V1/V2/V3... |
+| 评审日期 | 评审发生日期 |
+| 评审版本 | 被评审的设计文档版本 |
+| 发现问题数 | 本轮发现的问题总数（必须/应该/建议） |
+| 已解决问题数 | 本轮前已解决的问题数（累计） |
+| 新增问题数 | 本轮新发现的问题数 |
+| 待解决问题数 | 本轮结束时的待解决总数 |
+
+### 修复状态追踪规则
+
+- **待修复**：本轮评审发现，尚未修复
+- **修复中**：作者正在修复
+- **已解决**：作者已修复完成（本轮或后续轮次需验证）
+- **未解决/遗留**：多轮评审后仍未解决，需升级处理
+
+### 历史问题追溯
+
+- **新增**：本轮第一次发现的问题
+- **回归**：之前已解决的问题再次出现
+- **持续未决**：跨多轮评审仍未解决的问题
+
+---
+
+## 输出格式
+
+根据模板 `references/设计评审报告模板.md` 生成评审报告，输出后保存到 `docs/设计评审报告-项目名-日期.md`
+
+---
+
+## 触发场景
+
+- "生成设计评审报告"
+- "设计评审总结"
+- "输出设计评审报告"
+- "对设计文档进行评审"
+- "帮我评审设计文档"
+- "检查设计与需求的一致性"

package/skills/design-review-report/references//350/256/276/350/256/241/350/257/204/345/256/241/346/212/245/345/221/212/346/250/241/346/235/277.md

@@ -0,0 +1,224 @@
+# 设计评审报告 — [项目名] V1.0
+
+**评审对象**：[设计文档名称] V1.0
+**评审日期**：YYYY-MM-DD
+**评审依据**：[需求文档名称] V1.0
+**当前评审轮次**：V[N]
+
+---
+
+## 1. 总体判定
+
+**[通过 / 有保留通过 / 不通过]**
+
+**结论依据**：
+- 当前轮次评审结论
+- 整体迭代历史总结
+
+---
+
+## 2. 逐项评估（基于当前轮次）
+
+| 序号 | 维度 | 判定 | 证据 |
+|---|------|------|------|
+| 1 | 需求一致性 | 优秀/良好/合格/不合格 | xxx |
+| 2 | 架构合理性 | 优秀/良好/合格/不合格 | xxx |
+| 3 | 数据模型 | 优秀/良好/合格/不合格 | xxx |
+| 4 | API契约 | 优秀/良好/合格/不合格 | xxx |
+| 5 | 前端 | 优秀/良好/合格/不合格 | xxx |
+| 6 | 非功能 | 优秀/良好/合格/不合格 | xxx |
+| 7 | 内部一致性 | 优秀/良好/合格/不合格 | xxx |
+| 8 | 工程化 | 优秀/良好/合格/不合格 | xxx |
+
+---
+
+## 3. 评审迭代历史
+
+### 3.1 迭代概览
+
+| 轮次 | 评审日期 | 评审版本 | 发现问题数 | 新增问题 | 已解决 | 待解决 | 评审结论 |
+|------|----------|----------|------------|----------|--------|--------|----------|
+| V1 | YYYY-MM-DD | V0.1 | __ | __ | 0 | __ | 通过/有保留通过/不通过 |
+| V2 | YYYY-MM-DD | V0.2 | __ | __ | __ | __ | 通过/有保留通过/不通过 |
+| V3 | YYYY-MM-DD | V0.3 | __ | __ | __ | __ | 通过/有保留通过/不通过 |
+| ... | ... | ... | ... | ... | ... | ... | ... |
+
+### 3.2 V1 评审详情（YYYY-MM-DD）
+
+#### 评审范围
+
+- 评审对象：[设计文档 V0.1]
+- 评审人员：xxx
+- 评审耗时：xx 分钟
+
+#### 逐项评估
+
+| # | 维度 | 判定 | 证据 |
+|---|------|------|------|
+| 1 | 需求一致性 | xxx | xxx |
+| 2 | 架构合理性 | xxx | xxx |
+| ... | ... | ... | ... |
+
+#### 发现问题清单
+
+| # | 级别 | 位置 | 问题 | 建议修改 |
+|---|------|------|------|----------|
+| 1 | 必须 | xxx | xxx | xxx |
+| 2 | 必须 | xxx | xxx | xxx |
+| 3 | 应该 | xxx | xxx | xxx |
+| 4 | 建议 | xxx | xxx | xxx |
+| ... | ... | ... | ... | ... |
+
+#### V1 结论
+
+- 总体判定：xxx
+- 必须修复项：__ 个
+- 应该修复项：__ 个
+- 建议修复项：__ 个
+
+### 3.3 V2 评审详情（YYYY-MM-DD）
+
+#### 评审范围
+
+- 评审对象：[设计文档 V0.2]
+- 评审人员：xxx
+- 评审耗时：xx 分钟
+- 修订说明：作者根据 V1 反馈进行修改，提交 V0.2
+
+#### V1 问题修复追踪
+
+| V1 # | 级别 | 问题 | 修复状态 | 修复说明 |
+|------|------|------|----------|----------|
+| 1 | 必须 | xxx | 已解决/未解决/遗留 | xxx |
+| 2 | 必须 | xxx | 已解决/未解决/遗留 | xxx |
+| 3 | 应该 | xxx | 已解决/未解决/遗留 | xxx |
+| 4 | 建议 | xxx | 已解决/未解决/遗留 | xxx |
+| ... | ... | ... | ... | ... |
+
+**V1 修复统计**：
+
+- 已解决：__ / __ 个
+- 未解决：__ / __ 个
+- 回归问题：__ 个
+
+#### V2 新发现问题
+
+| # | 级别 | 位置 | 问题 | 建议修改 | 修复状态 |
+|---|------|------|------|----------|----------|
+| 1 | 必须 | xxx | xxx | xxx | 待修复 |
+| 2 | 应该 | xxx | xxx | xxx | 待修复 |
+| 3 | 建议 | xxx | xxx | xxx | 待修复 |
+| ... | ... | ... | ... | ... | ... |
+
+#### 逐项评估（V2）
+
+| # | 维度 | V1 判定 | V2 判定 | 变化说明 |
+|---|------|---------|---------|----------|
+| 1 | 需求一致性 | xxx | xxx | 改善/不变/退步 |
+| 2 | 架构合理性 | xxx | xxx | 改善/不变/退步 |
+| ... | ... | ... | ... | ... |
+
+#### V2 结论
+
+- 总体判定：xxx
+- 必须修复项：__ 个
+- 应该修复项：__ 个
+- 建议修复项：__ 个
+
+### 3.4 V3 评审详情（YYYY-MM-DD）
+
+> 按相同格式记录
+
+### 3.5 跨轮次问题汇总
+
+#### 持续未决问题（跨多轮未解决）
+
+| 原始轮次 | # | 级别 | 位置 | 问题 | 已迭代轮次 | 处理建议 |
+|----------|---|------|------|------|-----------|----------|
+| V1 | 1 | 必须 | xxx | xxx | V1, V2, V3 | 升级处理/放弃修复 |
+| ... | ... | ... | ... | ... | ... | ... |
+
+#### 回归问题（已解决后再次出现）
+
+| 原始 # | 问题 | 解决轮次 | 回归轮次 | 说明 |
+|--------|------|----------|----------|------|
+| V1-3 | xxx | V2 | V3 | 作者重新修改时引入了之前的问题 |
+| ... | ... | ... | ... | ... |
+
+---
+
+## 4. 当前待修复项（基于当前轮次）
+
+| 序号 | 级别 | 位置 | 问题 | 建议修改 | 修复状态 | 原始轮次 |
+|------|------|------|------|----------|----------|----------|
+| 1 | 必须 | xxx | xxx | xxx | 待修复 | V3 |
+| 2 | 必须 | xxx | xxx | xxx | 待修复 | V1（持续未决） |
+| 3 | 应该 | xxx | xxx | xxx | 待修复 | V3 |
+| 4 | 建议 | xxx | xxx | xxx | 待修复 | V3 |
+| ... | ... | ... | ... | ... | ... | ... |
+
+**级别说明**：
+
+- **必须**：阻塞项，必须修复后才能通过
+- **应该**：重要项，强烈建议修复
+- **建议**：改进项，建议修复但不阻塞
+
+---
+
+## 5. 当前建议项（非阻塞）
+
+| 序号 | 位置 | 建议 | 原始轮次 |
+|------|------|------|----------|
+| 1 | xxx | xxx | V3 |
+| 2 | xxx | xxx | V2（持续未决） |
+| ... | ... | ... | ... |
+
+---
+
+## 6. 亮点
+
+设计文档做得好的地方（基于当前轮次）：
+
+- **架构亮点**：xxx
+- **约束贯彻**：xxx
+- **关键决策**：xxx
+
+---
+
+## 7. 与需求文档的偏差
+
+描述设计文档与需求文档之间的不一致之处（如有）：
+
+| 序号 | 项目 | 需求文档 | 设计文档 | 一致性 | 说明 | 原始轮次 |
+|---|------|----------|----------|--------|------|----------|
+| 1 | xxx | xxx | xxx | 一致/不一致 | xxx | V3 |
+| 2 | xxx | xxx | xxx | 一致/不一致 | xxx | V1（持续未决） |
+| ... | ... | ... | ... | ... | ... | ... |
+
+**常见检查项参考**：
+
+- 端点表一致性（API路径、方法、参数）
+- 错误码一致性
+- 状态枚举一致性
+- 功能点覆盖度
+- 数据模型一致性
+
+---
+
+## 8. 修复后定稿
+
+**修复后版本号**：Vx.x
+**最终结论**：[通过 / 不通过]
+**是否可进入下一阶段**：[是 / 否]
+
+**迭代历史总结**：
+
+- 共经历 N 轮评审
+- 累计发现问题 __ 个
+- 已解决问题 __ 个
+- 遗留问题 __ 个
+
+---
+
+**评审人**：xxx
+**评审日期**：YYYY-MM-DD

package/skills/design-taste-frontend/SKILL.md

@@ -0,0 +1,226 @@
+---
+name: design-taste-frontend
+description: Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
+---
+
+# High-Agency Frontend Skill
+
+## 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.
+
+## 2. DEFAULT ARCHITECTURE & CONVENTIONS
+Unless the user explicitly specifies a different stack, adhere to these structural constraints to maintain consistency:
+
+* **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.
+* **ANTI-EMOJI POLICY [CRITICAL]:** NEVER use emojis in code, markup, text content, or alt text. Replace symbols with high-quality icons (Radix, Phosphor) or clean SVG primitives. Emojis are BANNED.
+* **Responsiveness & Spacing:**
+  * Standardize breakpoints (`sm`, `md`, `lg`, `xl`).
+  * Contain page layouts using `max-w-[1400px] mx-auto` or `max-w-7xl`.
+  * **Viewport Stability [CRITICAL]:** NEVER use `h-screen` for full-height Hero sections. ALWAYS use `min-h-[100dvh]` to prevent catastrophic layout jumping on mobile browsers (iOS Safari).
+  * **Grid over Flex-Math:** NEVER use complex flexbox percentage math (`w-[calc(33%-1rem)]`). ALWAYS use CSS Grid (`grid grid-cols-1 md:grid-cols-3 gap-6`) for reliable structures.
+* **Icons:** You MUST use exactly `@phosphor-icons/react` or `@radix-ui/react-icons` as the import paths (check installed version). Standardize `strokeWidth` globally (e.g., exclusively use `1.5` or `2.0`).
+
+
+## 3. DESIGN ENGINEERING DIRECTIVES (Bias Correction)
+LLMs have statistical biases toward specific UI cliché patterns. Proactively construct premium interfaces using these engineered rules:
+
+**Rule 1: Deterministic Typography**
+* **Display/Headlines:** Default to `text-4xl md:text-6xl tracking-tighter leading-none`.
+    * **ANTI-SLOP:** Discourage `Inter` for "Premium" or "Creative" vibes. Force unique character using `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`.
+    * **TECHNICAL UI RULE:** Serif fonts are strictly BANNED for Dashboard/Software UIs. For these contexts, use exclusively high-end Sans-Serif pairings (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`).
+* **Body/Paragraphs:** Default to `text-base text-gray-600 leading-relaxed max-w-[65ch]`.
+
+**Rule 2: Color Calibration**
+* **Constraint:** Max 1 Accent Color. Saturation < 80%.
+* **THE LILA BAN:** The "AI Purple/Blue" aesthetic is strictly BANNED. No purple button glows, no neon gradients. Use absolute neutral bases (Zinc/Slate) with high-contrast, singular accents (e.g. Emerald, Electric Blue, or Deep Rose).
+* **COLOR CONSISTENCY:** Stick to one palette for the entire output. Do not fluctuate between warm and cool grays within the same project.
+
+**Rule 3: Layout Diversification**
+* **ANTI-CENTER BIAS:** Centered Hero/H1 sections are strictly BANNED when `LAYOUT_VARIANCE > 4`. Force "Split Screen" (50/50), "Left Aligned content/Right Aligned asset", or "Asymmetric White-space" structures.
+
+**Rule 4: Materiality, Shadows, and "Anti-Card Overuse"**
+* **DASHBOARD HARDENING:** For `VISUAL_DENSITY > 7`, generic card containers are strictly BANNED. Use logic-grouping via `border-t`, `divide-y`, or purely negative space. Data metrics should breathe without being boxed in unless elevation (z-index) is functionally required.
+* **Execution:** Use cards ONLY when elevation communicates hierarchy. When a shadow is used, tint it to the background hue.
+
+**Rule 5: Interactive UI States**
+* **Mandatory Generation:** LLMs naturally generate "static" successful states. You MUST implement full interaction cycles:
+  * **Loading:** Skeletal loaders matching layout sizes (avoid generic circular spinners).
+  * **Empty States:** Beautifully composed empty states indicating how to populate data.
+  * **Error States:** Clear, inline error reporting (e.g., forms).
+  * **Tactile Feedback:** On `:active`, use `-translate-y-[1px]` or `scale-[0.98]` to simulate a physical push indicating success/action.
+
+**Rule 6: Data & Form Patterns**
+* **Forms:** Label MUST sit above input. Helper text is optional but should exist in markup. Error text below input. Use a standard `gap-2` for input blocks.
+
+## 4. CREATIVE PROACTIVITY (Anti-Slop Implementation)
+To actively combat generic AI designs, systematically implement these high-end coding concepts as your baseline:
+* **"Liquid Glass" Refraction:** When glassmorphism is needed, go beyond `backdrop-blur`. Add a 1px inner border (`border-white/10`) and a subtle inner shadow (`shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]`) to simulate physical edge refraction.
+* **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.
+* **Staggered Orchestration:** Do not mount lists or grids instantly. Use `staggerChildren` (Framer) or CSS cascade (`animation-delay: calc(var(--index) * 100ms)`) to create sequential waterfall reveals. **CRITICAL:** For `staggerChildren`, the Parent (`variants`) and Children MUST reside in the identical Client Component tree. If data is fetched asynchronously, pass the data as props into a centralized Parent Motion wrapper.
+
+## 5. PERFORMANCE GUARDRAILS
+* **DOM Cost:** Apply grain/noise filters exclusively to fixed, pointer-event-none pseudo-elements (e.g., `fixed inset-0 z-50 pointer-events-none`) and NEVER to scrolling containers to prevent continuous GPU repaints and mobile performance degradation.
+* **Hardware Acceleration:** Never animate `top`, `left`, `width`, or `height`. Animate exclusively via `transform` and `opacity`.
+* **Z-Index Restraint:** NEVER spam arbitrary `z-50` or `z-10` unprompted. Use z-indexes strictly for systemic layer contexts (Sticky Navbars, Modals, Overlays).
+
+## 6. TECHNICAL REFERENCE (Dial Definitions)
+
+### DESIGN_VARIANCE (Level 1-10)
+* **1-3 (Predictable):** Flexbox `justify-center`, strict 12-column symmetrical grids, equal paddings.
+* **4-7 (Offset):** Use `margin-top: -2rem` overlapping, varied image aspect ratios (e.g., 4:3 next to 16:9), left-aligned headers over center-aligned data.
+* **8-10 (Asymmetric):** Masonry layouts, CSS Grid with fractional units (e.g., `grid-template-columns: 2fr 1fr 1fr`), massive empty zones (`padding-left: 20vw`). 
+* **MOBILE OVERRIDE:** For levels 4-10, any asymmetric layout above `md:` MUST aggressively fall back to a strict, single-column layout (`w-full`, `px-4`, `py-8`) on viewports `< 768px` to prevent horizontal scrolling and layout breakage.
+
+### MOTION_INTENSITY (Level 1-10)
+* **1-3 (Static):** No automatic animations. CSS `:hover` and `:active` states only.
+* **4-7 (Fluid CSS):** Use `transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)`. Use `animation-delay` cascades for load-ins. Focus strictly on `transform` and `opacity`. Use `will-change: transform` sparingly.
+* **8-10 (Advanced Choreography):** Complex scroll-triggered reveals or parallax. Use Framer Motion hooks. NEVER use `window.addEventListener('scroll')`.
+
+### VISUAL_DENSITY (Level 1-10)
+* **1-3 (Art Gallery Mode):** Lots of white space. Huge section gaps. Everything feels very expensive and clean.
+* **4-7 (Daily App Mode):** Normal spacing for standard web apps.
+* **8-10 (Cockpit Mode):** Tiny paddings. No card boxes; just 1px lines to separate data. Everything is packed. **Mandatory:** Use Monospace (`font-mono`) for all numbers.
+
+## 7. AI TELLS (Forbidden Patterns)
+To guarantee a premium, non-generic output, you MUST strictly avoid these common AI design signatures unless explicitly requested:
+
+### Visual & CSS
+* **NO Neon/Outer Glows:** Do not use default `box-shadow` glows or auto-glows. Use inner borders or subtle tinted shadows.
+* **NO Pure Black:** Never use `#000000`. Use Off-Black, Zinc-950, or Charcoal.
+* **NO Oversaturated Accents:** Desaturate accents to blend elegantly with neutrals.
+* **NO Excessive Gradient Text:** Do not use text-fill gradients for large headers.
+* **NO Custom Mouse Cursors:** They are outdated and ruin performance/accessibility.
+
+### Typography
+* **NO Inter Font:** Banned. Use `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`.
+* **NO Oversized H1s:** The first heading should not scream. Control hierarchy with weight and color, not just massive scale.
+* **Serif Constraints:** Use Serif fonts ONLY for creative/editorial designs. **NEVER** use Serif on clean Dashboards.
+
+### Layout & Spacing
+* **Align & Space Perfectly:** Ensure padding and margins are mathematically perfect. Avoid floating elements with awkward gaps.
+* **NO 3-Column Card Layouts:** The generic "3 equal cards horizontally" feature row is BANNED. Use a 2-column Zig-Zag, asymmetric grid, or horizontal scrolling approach instead.
+
+### Content & Data (The "Jane Doe" Effect)
+* **NO Generic Names:** "John Doe", "Sarah Chan", or "Jack Su" are banned. Use highly creative, realistic-sounding names.
+* **NO Generic Avatars:** DO NOT use standard SVG "egg" or Lucide user icons for avatars. Use creative, believable photo placeholders or specific styling.
+* **NO Fake Numbers:** Avoid predictable outputs like `99.99%`, `50%`, or basic phone numbers (`1234567`). Use organic, messy data (`47.2%`, `+1 (312) 847-1928`).
+* **NO Startup Slop Names:** "Acme", "Nexus", "SmartFlow". Invent premium, contextual brand names.
+* **NO Filler Words:** Avoid AI copywriting clichés like "Elevate", "Seamless", "Unleash", or "Next-Gen". Use concrete verbs.
+
+### 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.
+* **Production-Ready Cleanliness:** Code must be extremely clean, visually striking, memorable, and meticulously refined in every detail.
+
+## 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.
+
+### The Standard Hero Paradigm
+* Stop doing centered text over a dark image. Try asymmetric Hero sections: Text cleanly aligned to the left or right. The background should feature a high-quality, relevant image with a subtle stylistic fade (darkening or lightening gracefully into the background color depending on if it is Light or Dark mode).
+
+### Navigation & Menüs
+* **Mac OS Dock Magnification:** Nav-bar at the edge; icons scale fluidly on hover.
+* **Magnetic Button:** Buttons that physically pull toward the cursor.
+* **Gooey Menu:** Sub-items detach from the main button like a viscous liquid.
+* **Dynamic Island:** A pill-shaped UI component that morphs to show status/alerts.
+* **Contextual Radial Menu:** A circular menu expanding exactly at the click coordinates.
+* **Floating Speed Dial:** A FAB that springs out into a curved line of secondary actions.
+* **Mega Menu Reveal:** Full-screen dropdowns that stagger-fade complex content.
+
+### Layout & Grids
+* **Bento Grid:** Asymmetric, tile-based grouping (e.g., Apple Control Center).
+* **Masonry Layout:** Staggered grid without fixed row heights (e.g., Pinterest).
+* **Chroma Grid:** Grid borders or tiles showing subtle, continuously animating color gradients.
+* **Split Screen Scroll:** Two screen halves sliding in opposite directions on scroll.
+* **Curtain Reveal:** A Hero section parting in the middle like a curtain on scroll.
+
+### Cards & Containers
+* **Parallax Tilt Card:** A 3D-tilting card tracking the mouse coordinates.
+* **Spotlight Border Card:** Card borders that illuminate dynamically under the cursor.
+* **Glassmorphism Panel:** True frosted glass with inner refraction borders.
+* **Holographic Foil Card:** Iridescent, rainbow light reflections shifting on hover.
+* **Tinder Swipe Stack:** A physical stack of cards the user can swipe away.
+* **Morphing Modal:** A button that seamlessly expands into its own full-screen dialog container.
+
+### Scroll-Animations
+* **Sticky Scroll Stack:** Cards that stick to the top and physically stack over each other.
+* **Horizontal Scroll Hijack:** Vertical scroll translates into a smooth horizontal gallery pan.
+* **Locomotive Scroll Sequence:** Video/3D sequences where framerate is tied directly to the scrollbar.
+* **Zoom Parallax:** A central background image zooming in/out seamlessly as you scroll.
+* **Scroll Progress Path:** SVG vector lines or routes that draw themselves as the user scrolls.
+* **Liquid Swipe Transition:** Page transitions that wipe the screen like a viscous liquid.
+
+### Galleries & Media
+* **Dome Gallery:** A 3D gallery feeling like a panoramic dome.
+* **Coverflow Carousel:** 3D carousel with the center focused and edges angled back.
+* **Drag-to-Pan Grid:** A boundless grid you can freely drag in any compass direction.
+* **Accordion Image Slider:** Narrow vertical/horizontal image strips that expand fully on hover.
+* **Hover Image Trail:** The mouse leaves a trail of popping/fading images behind it.
+* **Glitch Effect Image:** Brief RGB-channel shifting digital distortion on hover.
+
+### Typography & Text
+* **Kinetic Marquee:** Endless text bands that reverse direction or speed up on scroll.
+* **Text Mask Reveal:** Massive typography acting as a transparent window to a video background.
+* **Text Scramble Effect:** Matrix-style character decoding on load or hover.
+* **Circular Text Path:** Text curved along a spinning circular path.
+* **Gradient Stroke Animation:** Outlined text with a gradient continuously running along the stroke.
+* **Kinetic Typography Grid:** A grid of letters dodging or rotating away from the cursor.
+
+### Micro-Interactions & Effects
+* **Particle Explosion Button:** CTAs that shatter into particles upon success.
+* **Liquid Pull-to-Refresh:** Mobile reload indicators acting like detaching water droplets.
+* **Skeleton Shimmer:** Shifting light reflections moving across placeholder boxes.
+* **Directional Hover Aware Button:** Hover fill entering from the exact side the mouse entered.
+* **Ripple Click Effect:** Visual waves rippling precisely from the click coordinates.
+* **Animated SVG Line Drawing:** Vectors that draw their own contours in real-time.
+* **Mesh Gradient Background:** Organic, lava-lamp-like animated color blobs.
+* **Lens Blur Depth:** Dynamic focus blurring background UI layers to highlight a foreground action.
+
+## 9. THE "MOTION-ENGINE" BENTO PARADIGM
+When generating modern SaaS dashboards or feature sections, you MUST utilize the following "Bento 2.0" architecture and motion philosophy. This goes beyond static cards and enforces a "Vercel-core meets Dribbble-clean" aesthetic heavily reliant on perpetual physics.
+
+### A. Core Design Philosophy
+* **Aesthetic:** High-end, minimal, and functional.
+* **Palette:** Background in `#f9fafb`. Cards are pure white (`#ffffff`) with a 1px border of `border-slate-200/50`.
+* **Surfaces:** Use `rounded-[2.5rem]` for all major containers. Apply a "diffusion shadow" (a very light, wide-spreading shadow, e.g., `shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]`) to create depth without clutter.
+* **Typography:** Strict `Geist`, `Satoshi`, or `Cabinet Grotesk` font stack. Use subtle tracking (`tracking-tight`) for headers.
+* **Labels:** Titles and descriptions must be placed **outside and below** the cards to maintain a clean, gallery-style presentation.
+* **Pixel-Perfection:** Use generous `p-8` or `p-10` padding inside cards.
+
+### 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.
+
+### C. The 5-Card Archetypes (Micro-Animation Specs)
+Implement these specific micro-animations when constructing Bento grids (e.g., Row 1: 3 cols | Row 2: 2 cols split 70/30):
+1. **The Intelligent List:** A vertical stack of items with an infinite auto-sorting loop. Items swap positions using `layoutId`, simulating an AI prioritizing tasks in real-time.
+2. **The Command Input:** A search/AI bar with a multi-step Typewriter Effect. It cycles through complex prompts, including a blinking cursor and a "processing" state with a shimmering loading gradient.
+3. **The Live Status:** A scheduling interface with "breathing" status indicators. Include a pop-up notification badge that emerges with an "Overshoot" spring effect, stays for 3 seconds, and vanishes.
+4. **The Wide Data Stream:** A horizontal "Infinite Carousel" of data cards or metrics. Ensure the loop is seamless (using `x: ["0%", "-100%"]`) with a speed that feels effortless.
+5. **The Contextual UI (Focus Mode):** A document view that animates a staggered highlight of a text block, followed by a "Float-in" of a floating action toolbar with micro-icons.
+
+## 10. FINAL PRE-FLIGHT CHECK
+Evaluate 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?