القائمة
专用于本 Quarto 项目的前端开发指南，涵盖样式定制、布局调整与交互优化
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
生成 AI 工具介绍类页面的超详细教程内容，强调工具对比、配置技巧与实战场景；当需要撰写 AI 工具介绍、配置指南、使用技巧类教程时使用
生成 AI 工具介绍类页面的超详细教程内容，强调工具对比、配置技巧与实战场景；当需要撰写 AI 工具介绍、配置指南、使用技巧类教程时使用
Generate comprehensive R introductory guides (learning paths, basic concepts, beginner tutorials) with theory + practice workflow. Use when: (1) User requests R introductory tutorials, (2) File names match 00xx-*.rmd pattern, (3) Keywords: beginner, learning path, basic knowledge, RStudio setup, RMarkdown intro.
Generate comprehensive R machine learning and AI tutorials (mlr3, tidymodels, xgboost, torch, etc.) with theory + practice workflow. Use when: (1) User requests ML/AI tutorials, (2) File names match 10xx-*.rmd pattern, (3) Keywords: classification, regression, clustering, feature engineering, hyperparameter tuning, random forest, SVM, neural networks.
Generate comprehensive R practical operation tutorials (data import/export, cleaning, transformation, regex, web scraping, environment setup) with theory + practice workflow. Use when: (1) User requests data processing or tool setup tutorials, (2) File names match 30xx-*.rmd pattern, (3) Keywords: readr, stringr, lubridate, rvest, RMarkdown/Quarto setup, Positron/RStudio config.
Generate comprehensive R package tutorials (tidyverse, data.table, mlr3, gtsummary, etc.) with theory + practice workflow. Use when: (1) User requests R package tutorials or reviews, (2) File names match [number]-[package].rmd pattern, (3) Keywords: tidyverse, dplyr, ggplot2, purrr, data.table, mlr3, package comparison.
| name | project-frontend-dev |
| description | 专用于本 Quarto 项目的前端开发指南，涵盖样式定制、布局调整与交互优化 |
| compatibility | opencode |
| metadata | {"audience":"developer","section":"frontend"} |
我是本项目的前端开发专家，专注于修改 Quarto 生成的静态网站的视觉样式、布局结构和用户交互。 我理解 Quarto 的渲染机制（Markdown -> Pandoc -> HTML + Bootstrap 5），并能通过 SCSS/CSS 精确控制页面表现。
在修改前，我必须明确修改的目标层级：
| 修改目标 | 对应文件 | 说明 |
|---|---|---|
| 全局配置 | doc/_quarto.yml | 导航栏(navbar)、侧边栏(sidebar)、页面布局、主题引用 |
| 主题变量 | doc/theme.scss | Bootstrap 变量覆盖（如主色调 $primary、字体 $font-family-sans-serif） |
| 自定义样式 | doc/styles.css | 针对特定元素的 CSS 覆盖、微调、新组件样式 |
| 页面结构 | doc/include_footer.html | 页脚 HTML 注入 |
| 页面内容 | doc/*.qmd | Markdown 内容与布局类（如 .column-page） |
定位 (Inspect)
决策 (Strategy)
doc/theme.scss 修改 Bootstrap 变量。这是最科学的方法，能保证全站一致性。doc/styles.css 中编写 CSS 规则。_quarto.yml 或 include 文件。实施 (Implementation)
/* doc/theme.scss */
$primary: #4f46e5; /* 修改主色 */
$body-bg: #f9fafb; /* 修改背景 */
@import 'bootstrap'; /* 必须在变量定义后导入 */
!important 除非迫不得已。验证 (Verify)
quarto render doc/index.qmd (或受影响的页面) 来验证效果。.column-body, .column-page, .column-screen 控制内容宽度。mt-4, p-2, text-center, d-flex) 快速调整布局，减少手写 CSS。::: {.callout-note} ... :::) 而非手写 div。css, scss, html, layout 等关键词时。