@devflow-tools/plugin-css 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import type { DevFlowPlugin } from "@devflow-tools/sdk";
+export declare const cssPlugin: DevFlowPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,eAAO,MAAM,SAAS,EAAE,aAmIvB,CAAC"}

package/dist/index.js

@@ -0,0 +1,128 @@
+export const cssPlugin = {
+    meta: {
+        name: "css",
+        version: "0.1.0",
+        description: "CSS 专家 — 布局调试、响应式审查、BEM 规范、性能优化",
+        icon: "🎨",
+        tags: ["frontend", "css", "scss", "responsive", "layout"],
+    },
+    knowledge: {
+        sources: [
+            {
+                name: "mdn-css",
+                urls: [
+                    "https://developer.mozilla.org/en-US/docs/Web/CSS",
+                    "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout",
+                    "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout",
+                ],
+                pluginName: "css",
+                version: "2024",
+            },
+        ],
+    },
+    memory: {
+        project: {
+            stack: ["CSS3", "SCSS", "CSS Modules", "PostCSS"],
+            conventions: [
+                { key: "naming", value: "使用 BEM 命名规范（Block__Element--Modifier）", source: "manual", confidence: 0.9 },
+                { key: "layout", value: "优先使用 Flexbox + Grid 布局，避免 float", source: "manual", confidence: 0.9 },
+                { key: "responsive", value: "移动优先，断点 768px / 1024px / 1280px", source: "manual", confidence: 0.8 },
+                { key: "variables", value: "使用 CSS 变量管理主题色和间距", source: "manual", confidence: 0.85 },
+            ],
+        },
+        global: [
+            {
+                id: "css:layout-strategies",
+                source: "css",
+                title: "CSS 布局策略",
+                content: "Flexbox 用于一维布局（导航栏、列表）。Grid 用于二维布局（页面骨架、仪表盘）。避免 float。gap 替代 margin 间隔。minmax() 和 auto-fit 实现自适应网格。",
+                embedding: [],
+            },
+            {
+                id: "css:bem-naming",
+                source: "css",
+                title: "BEM 命名规范",
+                content: "Block（块）：独立组件如 .card。Element（元素）：__ 连接如 .card__title。Modifier（修饰符）：-- 连接如 .card--featured。",
+                embedding: [],
+            },
+            {
+                id: "css:responsive-patterns",
+                source: "css",
+                title: "响应式设计模式",
+                content: "移动优先：基础样式给移动端，@media min-width 给更大屏幕。clamp() 实现流体排版。容器查询 @container 用于组件级响应。避免固定宽度，使用 max-width + 百分比。",
+                embedding: [],
+            },
+            {
+                id: "css:performance",
+                source: "css",
+                title: "CSS 性能优化",
+                content: "避免复杂选择器（深层嵌套）。避免 reflow 触发（频繁改 width/height/top/left）。使用 will-change 提示浏览器优化。CSS containment 限制重排范围。减少 @import 使用。",
+                embedding: [],
+            },
+        ],
+    },
+    workflow: {
+        steps: [],
+        templates: [
+            {
+                name: "layout-debug",
+                description: "布局调试：检查元素定位 → 弹性/网格属性 → 修复",
+                version: "1.0.0",
+                steps: [
+                    { id: "inspect-element", description: "定位布局异常元素（DevTools 检查盒模型）", type: "simple", timeout: 5000 },
+                    { id: "check-box-model", description: "检查盒模型（width/height/padding/border/margin）", type: "simple", depends: ["inspect-element"], timeout: 10000 },
+                    { id: "check-positioning", description: "检查定位方式（static/relative/absolute/fixed/sticky）", type: "simple", depends: ["inspect-element"], timeout: 10000 },
+                    { id: "check-flex-grid", description: "检查 Flexbox/Grid 容器和子项属性", type: "simple", depends: ["inspect-element"], timeout: 10000 },
+                    { id: "check-z-index", description: "检查 z-index 和层叠上下文", type: "simple", depends: ["check-positioning"], timeout: 5000 },
+                    { id: "search-docs", description: "搜索 MDN CSS 文档中的相关属性", type: "simple", timeout: 10000 },
+                    { id: "generate-fix", description: "生成布局修复方案", type: "llm", depends: ["check-box-model", "check-flex-grid", "check-z-index", "search-docs"], timeout: 15000 },
+                    { id: "verify-layout", description: "截图对比验证修复效果", type: "simple", depends: ["generate-fix"], timeout: 10000 },
+                ],
+                triggers: [{ type: "cli", command: "debug:layout" }],
+            },
+            {
+                name: "responsive-audit",
+                description: "响应式审查：断点检查 → 媒体查询 → 流体方案",
+                version: "1.0.0",
+                steps: [
+                    { id: "scan-breakpoints", description: "扫描项目中所有 @media 断点", type: "simple", timeout: 10000 },
+                    { id: "check-consistency", description: "检查断点是否统一（避免 767/768/769 混用）", type: "simple", depends: ["scan-breakpoints"], timeout: 10000 },
+                    { id: "check-mobile-first", description: "检查是否移动优先（min-width 而非 max-width）", type: "simple", depends: ["scan-breakpoints"], timeout: 5000 },
+                    { id: "find-hardcoded-widths", description: "查找硬编码宽度（固定 px 而非百分比/flex）", type: "simple", timeout: 10000 },
+                    { id: "suggest-fluid", description: "建议流体方案（clamp/min/max 替代固定值）", type: "llm", depends: ["check-consistency", "find-hardcoded-widths"], timeout: 15000 },
+                    { id: "apply-fixes", description: "应用响应式修复", type: "llm", depends: ["suggest-fluid"], timeout: 20000 },
+                    { id: "verify-responsive", description: "多视口截图验证", type: "simple", depends: ["apply-fixes"], timeout: 15000 },
+                ],
+                triggers: [{ type: "cli", command: "audit:responsive" }],
+            },
+            {
+                name: "bem-review",
+                description: "BEM 命名审查：扫描类名 → 规范检查 → 修复建议",
+                version: "1.0.0",
+                steps: [
+                    { id: "scan-classnames", description: "扫描项目所有 CSS 类名", type: "simple", timeout: 10000 },
+                    { id: "check-bem-compliance", description: "检查是否遵循 BEM 规范", type: "simple", depends: ["scan-classnames"], timeout: 10000 },
+                    { id: "find-deep-nesting", description: "查找深层嵌套选择器（> 3 级）", type: "simple", depends: ["scan-classnames"], timeout: 5000 },
+                    { id: "find-utility-override", description: "查找 !important 和样式覆盖", type: "simple", depends: ["scan-classnames"], timeout: 5000 },
+                    { id: "generate-report", description: "生成 BEM 合规报告", type: "llm", depends: ["check-bem-compliance", "find-deep-nesting", "find-utility-override"], timeout: 15000 },
+                    { id: "refactor-names", description: "重构不符合 BEM 的类名", type: "llm", depends: ["generate-report"], timeout: 20000 },
+                ],
+                triggers: [{ type: "cli", command: "review:bem" }],
+            },
+        ],
+    },
+    prompt: {
+        system: "你是一个 CSS 专家。使用现代布局方案（Flexbox/Grid），遵循 BEM 命名，移动优先响应式设计。遇到问题先查 MDN 文档。",
+        rules: [
+            "使用 BEM 命名规范",
+            "优先使用 Flexbox 和 Grid 布局",
+            "移动优先响应式设计",
+            "使用 CSS 变量管理主题",
+            "避免 !important 和深层嵌套",
+            "使用 rem/em 做相对单位",
+            "不确定属性行为时先查 MDN 文档确认",
+        ],
+    },
+    tools: [],
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@devflow-tools/plugin-css",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@devflow-tools/sdk": "*"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.0",
+    "vitest": "^2.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "gitHead": "4cede97fc7fc673f929427fac169acab100ca8ed"
+}