‹ 首页

formax-web-css-convergence-workflow

@yusifeng · 收录于 5 天前 · 上游提交 3 周前

Use when changing web CSS/UI styling so requirements, state ownership, and acceptance checks are locked before edits to prevent rework churn.

场景样式修改需求对齐

适合你，如果经常改CSS但需求不清导致反复重做

/ 下载安装
https://github.com/yusifeng/formax/tree/main/.codex/skills/formax-web-css-convergence-workflow ↗
/ 通过 npx 安装 校验哈希
npx oh-my-skill add yusifeng/formax/formax-web-css-convergence-workflow
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- yusifeng/formax/formax-web-css-convergence-workflow
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify yusifeng/formax/formax-web-css-convergence-workflow
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
192GitHub stars
~805上下文体积 · 单文件
索引托管

怎么用

商店整理自技能原文 · 版本 5a48573 · 表述以原文为准
它做什么

当你提出网页样式修改需求时，Claude会先要求你填写8项输入合同（包括目标模型、不触碰清单、验收标准等），确认后才开始编辑。每次仅修改一个方面（如先改布局，再改颜色），避免混乱返工。

什么时候触发

当你要求调整组件样式、布局、交互视觉状态（如hover/active/focus），或涉及跨文件CSS/TSX类修改，以及反复UI调优时触发。

装好后可以这样说
Claude会先让你确认目标模型和验收标准再修改。
Claude会锁定不触碰区域，只改布局。
Claude会分步按单轴模式修改。
技能原文 SKILL.md作者撰写 · MIT · 5a48573

formax-web-css-convergence-workflow

Goal
  • Prevent repeated CSS rework by locking requirements before any style edits.
  • Convert ambiguous visual requests into a concrete edit contract with explicit acceptance checks.
  • Keep behavior stable while converging structure, naming, and styling.

Use this skill when the task involves:

  • component styling or layout adjustments
  • cross-file CSS + TSX class changes
  • interaction visual states (hover/active/focus/selected)
  • repeated back-and-forth UI tuning that needs convergence
Intake Contract (Run Before Editing)
  • Require this 8-line input contract (fill missing items by explicit assumptions, not guesswork):
  • Target model in one sentence (final visual geometry).
  • Non-goals / do-not-touch list.
  • State model (if any) and single source of truth.
  • Ownership boundary (main process vs renderer).
  • Acceptance criteria (what must be true, what must never appear).
  • Runtime matrix (command, platform, light/dark).
  • Iteration policy (single-axis change per pass).
  • Rollback point (which commit/file set is safe fallback).
Where to change what
  • Core styling surfaces:
  • packages/web-reference-react/src/styles.css
  • packages/web-reference-react/src/css/theme.css
  • Core UI wiring:
  • packages/web-reference-react/src/app/ui/AppShell.tsx
  • packages/web-reference-react/src/components/LeftRail.tsx
  • packages/web-reference-react/src/components/left-rail/SidebarItem.tsx
  • Browser bridge typing surface (when needed):
  • packages/web-reference-react/src/vite-env.d.ts
  • Desktop main/preload ownership (only for stateful window-level visuals):
  • packages/desktop-electron/src/main.ts
  • packages/desktop-electron/src/preload.ts
  • packages/desktop-electron/src/windowAppearanceState.ts
  • Scenario-specific construct (read only if task touches transparency):
  • docs/contracts/web/window-transparency-construct.md
Patterns
  1. Freeze-Then-Edit Pattern
  2. Restate final model first.
  3. Freeze non-goals (do not touch drag region, menu entries, unrelated text/copy).
  4. Only then open code.
  1. Single-Axis Convergence Pattern
  2. Pass A: geometry/layers only.
  3. Pass B: color/opacity tokens only.
  4. Pass C: interaction/focus/hover only.
  5. Never mix all three in one pass.
  1. State Ownership Lock Pattern
  2. If the task has window/app state coupling:
  3. renderer does not invent business states
  4. canonical state lives in the owner layer
  5. pending UI must converge to canonical state
  1. Evidence-Driven Pattern
  2. Use deterministic checks instead of eye-balling:
  3. explicit before/after acceptance list
  4. “must-not-see” artifact list
  5. screenshot evidence when visual regressions are likely
Tests to update
  • Required baseline for CSS changes in web-reference:
  • bun run test -- src/App.test.tsx (in packages/web-reference-react)
  • Required for desktop bridge/state shape changes:
  • npm --prefix packages/desktop-electron run build:main
  • Required only for transparency scenario:
  • bun run test:e2e -- e2e/window-transparency.evidence.spec.js --project=chromium (in packages/web-reference-react)
  • Required before commit in this repo:
  • codex review --uncommitted -c model="gpt-5.4" -c model_reasoning_effort="medium" -c service_tier="fast"
Guardrails
  • Do not change unrelated UI behavior while “just tuning CSS”.
  • Do not rely on one environment result; verify against the declared runtime matrix.
  • If acceptance criteria are unclear, ask for clarification before directional edits.
  • Avoid speculative visual “patch layers” that do not belong to the target model.
  • If user requests cleanup-pass/返工收敛, reduce churn only:
  • remove redundancy
  • unify naming/state shape
  • preserve behavior
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…