我现在需要一个写作品集web端的agent的提示词，以下是它掌握的技能：如果你要创建一个关于作品集的前端 **Agent**，需要掌握一系列的技能，涵盖 **前端开发的基础技能**，以及一些 **展示和交互相关的技能**。以下是一个详细的技能清单，分为不同的技能领域，并附上相关网站和工具的使用。 ### 1. **HTML & CSS 基础** * **HTML** * 熟悉 HTML5 的语义化标签：`<header>`, `<footer>`, `<article>`, `<section>`, `<main>`, `<nav>` 等。 * 知道如何正确地使用表单元素、媒体标签（如 `<audio>`, `<video>`）、嵌套元素等。 * **工具**：使用 [MDN Web Docs](https://developer.mozilla.org/zh-CN/docs/Web/HTML) 查找最新的 HTML 语法和用法。 * **CSS** * 熟练掌握盒模型、定位模型、浮动、弹性布局（Flexbox）和网格布局（CSS Grid）。 * 能够处理响应式设计和使用媒体查询（`@media`）。 * 了解 CSS 预处理器（如 SASS/SCSS）。 * 使用 **CSS 动画** 和 **过渡**：关键帧动画（`@keyframes`）和过渡（`transition`）等。 * **工具**：可以参考 [MDN Web Docs CSS](https://developer.mozilla.org/zh-CN/docs/Web/CSS) 和 [CSS Tricks](https://css-tricks.com/) 来学习 CSS 技巧。 * **推荐工具/框架**： * [Sass](https://sass-lang.com/)（CSS 预处理器） * [PostCSS](https://postcss.org/)（CSS 转换工具） * [Tailwind CSS](https://tailwindcss.com/)（实用的 CSS 框架） ### 2. **JavaScript 基础** * **JavaScript 语法** * 熟悉 JavaScript 基本语法：数据类型、变量声明（`let`, `const`, `var`），控制结构（`if`, `for`, `switch`）等。 * 熟悉 ES6+ 特性：箭头函数、模板字符串、解构赋值、`map`, `filter`, `reduce` 等常用数组方法。 * **DOM 操作** * 学会操作 DOM（文档对象模型）：增删改查（`createElement`, `removeChild`, `querySelector` 等）。 * 事件绑定和事件委托：`addEventListener`，`event.preventDefault`，`event.stopPropagation` 等。 * **异步编程** * 熟悉 **Promise**、**async/await**。 * 能够处理 API 请求：使用 `fetch` 和 `XMLHttpRequest`，理解 CORS（跨域资源共享）。 * **工具**：使用 [MDN JavaScript](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) 来深入了解语言的核心。 ### 3. **版本控制 (Git & GitHub)** * 熟悉 Git 基础：`git init`，`git add`，`git commit`，`git push`，`git pull`。 * 学会分支管理：`git branch`，`git merge`，`git rebase`。 * 使用 GitHub 进行远程仓库管理，熟悉 **GitHub Pages** 部署静态页面。 * **工具**：[Git官网](https://git-scm.com/)，[GitHub](https://github.com/)。 ### 4. **前端框架和工具** * **React / Vue / Angular** * 熟练掌握至少一个前端框架：React（包括 Hooks, Router, Context API）、Vue（Vuex、Vue Router、Composition API）或 Angular（RxJS、Directive、Service）。 * 掌握状态管理库：React 的 **Redux**，Vue 的 **Vuex**。 * 学习 **React Router** 或 **Vue Router** 进行路由管理。 * **构建工具** * 使用 **Webpack** 或 **Vite** 进行模块打包和构建优化。 * 配置 Babel 转译 ES6+ 代码。 * 使用 **npm** 或 **Yarn** 管理依赖包。 * **工具**： * [React 官网](https://reactjs.org/)。 * [Vue 官网](https://vuejs.org/)。 * [Angular 官网](https://angular.io/)。 * [Webpack](https://webpack.js.org/)。 * [Vite](https://vitejs.dev/)。 ### 5. **响应式设计与移动优先** * 熟练使用 **Flexbox** 和 **CSS Grid**，并根据不同设备做布局。 * 学会使用 **媒体查询**，根据不同的设备宽度调整布局。 * 掌握 **移动优先** 的开发模式，确保手机端体验优先。 * **工具/框架**： * [Bootstrap](https://getbootstrap.com/)（响应式框架） * [Foundation](https://get.foundation/)（响应式框架） ### 6. **Web 性能优化** * 了解浏览器渲染过程，能够优化页面加载速度（如：懒加载、异步加载 JS/CSS、压缩图片）。 * 使用 **Code Splitting** 和 **Tree Shaking** 减少不必要的代码。 * 熟悉 **Service Workers** 和 **PWA**（渐进式 Web 应用）提升用户体验。 * 了解 **Web Vitals**，并学会如何进行性能监控。 * **工具**： [Lighthouse](https://developers.google.com/web/tools/lighthouse)（性能优化工具），[WebPageTest](https://www.webpagetest.org/)。 ### 7. **Web 安全** * 理解 **XSS (Cross-Site Scripting)**、**CSRF (Cross-Site Request Forgery)** 等前端安全问题，知道如何防范。 * 使用 **HTTPS** 进行安全通信。 * 了解 **CSP (Content Security Policy)**，配置网站的安全策略。 ### 8. **部署与持续集成** * 熟悉 **Netlify**、**Vercel** 或 **GitHub Pages** 部署前端项目。 * 学习 **CI/CD（持续集成与持续部署）**，使用 GitHub Actions 或 GitLab CI 来自动化部署流程。 ### 9. **作品集网站设计与构建** * **作品集网站设计**：学习 UI/UX 设计基础，确保网站的用户体验简洁美观。 * 学习如何将你的作品通过 **动态页面**（如用 React/Vue 实现）展示，而不仅仅是静态 HTML。 * 优化图片展示：使用 **图片压缩工具** 或 **WebP 格式** 减少加载时间。 * **工具**： * [Figma](https://www.figma.com/)（UI/UX 设计工具） * [Canva](https://www.canva.com/)（设计素材） * [Unsplash](https://unsplash.com/)（免版权照片） ### 10. **其他工具** * **图标和矢量图形**：熟悉使用 **SVG**，**Font Awesome** 或 **Material Icons**。 * **CSS 工具**：如 **PostCSS**，**Autoprefixer**。 * **调试工具**：熟悉 Chrome DevTools 调试技巧，尤其是在前端性能和调试 JavaScript 代码时。 1. TypeScript 基础 类型系统 学习 TS 的基础类型：string、number、boolean、array、tuple、enum、any、unknown 等。 掌握如何使用 类型别名 和 接口：type 和 interface。 学会类型推导，理解 隐式类型 和 显式类型。 类型约束 使用 联合类型 (|)，例如 string | number。 使用 交叉类型 (&) 组合不同类型。 掌握 类型断言：例如 as。 泛型 学会使用 泛型 来创建通用的函数、接口或类。 示例：function identity<T>(arg: T): T { return arg; } 工具：可以参考 TypeScript 官方文档 进行深入学习。 2. 与 JavaScript 的集成 配置 TypeScript 环境 学会配置 tsconfig.json，了解如何编译 TS 文件。 使用 TypeScript 与 Webpack 或 Vite 配合，确保类型检查与编译过程顺利集成。 与 JavaScript 库的兼容 学习如何在项目中使用第三方 JavaScript 库，并安装对应的 TypeScript 类型声明，例如通过 @types/ 包（如 @types/react）。 3. TypeScript 在前端框架中的应用 React + TypeScript 熟悉如何在 React 中使用 TypeScript。 学习如何为组件和 props 添加类型定义。 使用 React.FC 定义函数组件类型。 Vue + TypeScript 学习如何在 Vue 3 中使用 TypeScript，特别是 Composition API。 使用 defineComponent 定义组件，并为 props、data、methods 等提供类型注解。 Angular + TypeScript Angular 默认使用 TypeScript，因此需要掌握 Angular 中的类型系统（如服务、模块、指令等的类型注解）。 学习 RxJS 类型，如何在 Angular 中利用 TypeScript 进行响应式编程。 工具/框架： React + TypeScript 官方文档 Vue 3 + TypeScript 官方文档 Angular + TypeScript 官方文档 4. 开发工具与调试 VS Code 设置 安装并配置 VS Code 编辑器中的 TypeScript 插件。 启用 类型检查 和 自动提示。 调试 TypeScript 学习如何在浏览器中调试 TypeScript 代码。 配置源映射 (source maps) 来便于调试源代码。 5. 类型安全的 API 请求 HTTP 请求与响应类型 学会为 HTTP 请求和响应定义类型，以确保数据的正确性。 使用 Axios 或 Fetch API 时，指定请求和响应的类型。 工具： Axios （库） TypeScript + Axios 示例 6. 类型驱动的开发（TDD） 测试 TypeScript 代码 使用 Jest 或 Mocha 等测试框架编写单元测试，并为测试用例提供类型注解。 学习如何利用 TypeScript 提供更强大的静态分析支持，编写类型安全的测试代码。 7. TypeScript 工具与插件 TSLint 或 ESLint + TypeScript 配置 ESLint 或 TSLint 来自动检查 TypeScript 代码中的潜在问题。 配置 Prettier 与 ESLint，确保代码风格统一。 工具： ESLint Prettier 8. TypeScript 与 JSX/TSX JSX/TSX 文件支持 学习如何在 .tsx 文件中使用 TypeScript，特别是与 React 一起使用。 定义组件时使用类型安全的 props 和 state。 ### 结语： 如果你在开发作品集网站时能熟练运用上述技能，就能够构建出一个既具视觉冲击力又能良好展示个人作品的专业网站。随着技术的不断进步，保持学习并熟悉新兴工具会帮助你保持竞争力。