本文へ移動
cccskills
無料GitHub で公開

fec-legacy-web-standard

用于维护或安全修改既有非框架前端代码:原生 JavaScript、jQuery、HTML/CSS、MPA 页面、服务端渲染模板、遗留插件或需要长期保持当前技术栈的代码。若是规划迁移到 React/Vue/TypeScript,请使用迁移 skill;中文触发词包括 传统前端、原生 JS、jQuery。

インストール方法を見る

含まれるファイル(2)

  • SKILL.md1.8 KB
  • references/legacy-patterns.md1.6 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

传统前端项目规范(JS + jQuery + HTML)

用途

在不重写技术栈的前提下安全维护 vanilla JS、jQuery、HTML/CSS 和服务端模板项目。

流程

  1. 先确认本次改动是维护旧栈还是迁移;迁移到 React/Vue/TypeScript 时切换到现代化迁移 workflow。
  2. 沿用现有架构和代码风格,优先修复问题,不在一次改动中引入多项现代化。
  3. JavaScript 用 IIFE/命名空间减少全局污染,事件绑定优先委托到合理容器。
  4. DOM 更新缓存选择器、批量操作、转义用户输入;Ajax 必须处理 loading、error、空状态和防重复提交。
  5. HTML/CSS 保持语义、label、alt、BEM/既有命名和低选择器深度。
  6. 安全重点检查 .html()、innerHTML、URL 参数渲染、CSRF token 和文件上传。

详细参考

涉及 jQuery 命名空间、事件绑定、Ajax、XSS 转义、文件组织和维护清单示例时,加载 references/legacy-patterns.md。

约束

  • 在现有架构内改进,不要引入与项目格格不入的现代框架。
  • 渐进增强优于推倒重来。
  • 禁止用 innerHTML / .html() 直接插入用户输入。
  • 避免全局变量污染。
  • 每次聚焦一个维护点,避免顺手重构整个模块。

预期输出

改动与旧项目风格一致,无全局变量泄漏,事件和 DOM 操作可维护,Ajax 状态完整,用户输入已转义,渐进改进不破坏现有功能。

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

用于审查或改进前端无障碍、语义结构、键盘支持、焦点管理、ARIA 标签、屏幕阅读器行为、WCAG 2.2 问题、触控无障碍或辅助技术回归;中文触发词包括 无障碍、accessibility、a11y、WCAG、屏幕阅读器。

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

Use when reviewing or improving frontend accessibility, semantic structure, keyboard support, focus management, ARIA labels, screen reader behavior, WCAG 2.2 issues, touch accessibility, or assistive-technology regressions; Chinese triggers include accessibility, accessibility, a11y, WCAG, screen reader.

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

用于从参考系统中吸收想法、能力、工作流、架构、质量体系、生态扩展或工程实践,并通过原创的项目内重设计转化为当前项目能力,而不是复制原实现。

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices from any reference system into the current project through original, project-native redesign rather than copying.

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

Use when designing, implementing, or reviewing frontend-to-backend API integration, typed API clients, REST/tRPC/OpenAPI client choices, auth refresh, API error mapping, upload flows, SSE/WebSocket/polling choices, CORS-facing frontend behavior, or cross-boundary loading/error states. Do not use for backend-only service architecture or TanStack Query cache policy alone; Chinese triggers include API integration, front-end and back-end joint debugging, typed API client, Interface error handling, SSE, WebSocket.

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

用于设计、实现或审查前后端 API 集成、类型化 API client、REST/tRPC/OpenAPI 客户端选型、认证刷新、API 错误映射、上传流程、SSE/WebSocket/轮询选择、CORS 相关前端行为或跨边界 loading/error 状态。不要用于纯后端服务架构或仅 TanStack Query 缓存策略;中文触发词包括 API 集成、前后端联调、typed API client、接口错误处理、SSE、WebSocket。

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

bovinphang のスキルをすべて見る

このスキルの問題を報告する