From ff303d71b6d4472be7eed4b8385bf5f18cd25515 Mon Sep 17 00:00:00 2001 From: Affaan Mustafa Date: Sun, 5 Apr 2026 17:48:46 -0700 Subject: [PATCH] feat: salvage frontend-design from hermes branch --- .agents/skills/frontend-design/SKILL.md | 145 ++++++++++++++++++++++++ AGENTS.md | 4 +- README.md | 6 +- README.zh-CN.md | 2 +- WORKING-CONTEXT.md | 2 + docs/zh-CN/AGENTS.md | 4 +- docs/zh-CN/README.md | 6 +- manifests/install-modules.json | 1 + skills/frontend-design/SKILL.md | 145 ++++++++++++++++++++++++ 9 files changed, 304 insertions(+), 11 deletions(-) create mode 100644 .agents/skills/frontend-design/SKILL.md create mode 100644 skills/frontend-design/SKILL.md diff --git a/.agents/skills/frontend-design/SKILL.md b/.agents/skills/frontend-design/SKILL.md new file mode 100644 index 00000000..7f0b0c3a --- /dev/null +++ b/.agents/skills/frontend-design/SKILL.md @@ -0,0 +1,145 @@ +--- +name: frontend-design +description: Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality. +origin: ECC +--- + +# Frontend Design + +Use this when the task is not just "make it work" but "make it look designed." + +This skill is for product pages, dashboards, app shells, components, or visual systems that need a clear point of view instead of generic AI-looking UI. + +## When To Use + +- building a landing page, dashboard, or app surface from scratch +- upgrading a bland interface into something intentional and memorable +- translating a product concept into a concrete visual direction +- implementing a frontend where typography, composition, and motion matter + +## Core Principle + +Pick a direction and commit to it. + +Safe-average UI is usually worse than a strong, coherent aesthetic with a few bold choices. + +## Design Workflow + +### 1. Frame the interface first + +Before coding, settle: + +- purpose +- audience +- emotional tone +- visual direction +- one thing the user should remember + +Possible directions: + +- brutally minimal +- editorial +- industrial +- luxury +- playful +- geometric +- retro-futurist +- soft and organic +- maximalist + +Do not mix directions casually. Choose one and execute it cleanly. + +### 2. Build the visual system + +Define: + +- type hierarchy +- color variables +- spacing rhythm +- layout logic +- motion rules +- surface / border / shadow treatment + +Use CSS variables or the project's token system so the interface stays coherent as it grows. + +### 3. Compose with intention + +Prefer: + +- asymmetry when it sharpens hierarchy +- overlap when it creates depth +- strong whitespace when it clarifies focus +- dense layouts only when the product benefits from density + +Avoid defaulting to a symmetrical card grid unless it is clearly the right fit. + +### 4. Make motion meaningful + +Use animation to: + +- reveal hierarchy +- stage information +- reinforce user action +- create one or two memorable moments + +Do not scatter generic micro-interactions everywhere. One well-directed load sequence is usually stronger than twenty random hover effects. + +## Strong Defaults + +### Typography + +- pick fonts with character +- pair a distinctive display face with a readable body face when appropriate +- avoid generic defaults when the page is design-led + +### Color + +- commit to a clear palette +- one dominant field with selective accents usually works better than evenly weighted rainbow palettes +- avoid cliché purple-gradient-on-white unless the product genuinely calls for it + +### Background + +Use atmosphere: + +- gradients +- meshes +- textures +- subtle noise +- patterns +- layered transparency + +Flat empty backgrounds are rarely the best answer for a product-facing page. + +### Layout + +- break the grid when the composition benefits from it +- use diagonals, offsets, and grouping intentionally +- keep reading flow obvious even when the layout is unconventional + +## Anti-Patterns + +Never default to: + +- interchangeable SaaS hero sections +- generic card piles with no hierarchy +- random accent colors without a system +- placeholder-feeling typography +- motion that exists only because animation was easy to add + +## Execution Rules + +- preserve the established design system when working inside an existing product +- match technical complexity to the visual idea +- keep accessibility and responsiveness intact +- frontends should feel deliberate on desktop and mobile + +## Quality Gate + +Before delivering: + +- the interface has a clear visual point of view +- typography and spacing feel intentional +- color and motion support the product instead of decorating it randomly +- the result does not read like generic AI UI +- the implementation is production-grade, not just visually interesting diff --git a/AGENTS.md b/AGENTS.md index 165b682f..2578dfd7 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,6 +1,6 @@ # Everything Claude Code (ECC) — Agent Instructions -This is a **production-ready AI coding plugin** providing 39 specialized agents, 179 skills, 73 commands, and automated hook workflows for software development. +This is a **production-ready AI coding plugin** providing 39 specialized agents, 180 skills, 73 commands, and automated hook workflows for software development. **Version:** 1.10.0 @@ -146,7 +146,7 @@ Troubleshoot failures: check test isolation → verify mocks → fix implementat ``` agents/ — 39 specialized subagents -skills/ — 179 workflow skills and domain knowledge +skills/ — 180 workflow skills and domain knowledge commands/ — 73 slash commands hooks/ — Trigger-based automations rules/ — Always-follow guidelines (common + per-language) diff --git a/README.md b/README.md index 5de5e833..4f4dfdb3 100644 --- a/README.md +++ b/README.md @@ -236,7 +236,7 @@ For manual install instructions see the README in the `rules/` folder. When copy /plugin list ecc@ecc ``` -**That's it!** You now have access to 39 agents, 179 skills, and 73 legacy command shims. +**That's it!** You now have access to 39 agents, 180 skills, and 73 legacy command shims. ### Multi-model commands require additional setup @@ -1154,7 +1154,7 @@ The configuration is automatically detected from `.opencode/opencode.json`. |---------|-------------|----------|--------| | Agents | PASS: 39 agents | PASS: 12 agents | **Claude Code leads** | | Commands | PASS: 73 commands | PASS: 31 commands | **Claude Code leads** | -| Skills | PASS: 179 skills | PASS: 37 skills | **Claude Code leads** | +| Skills | PASS: 180 skills | PASS: 37 skills | **Claude Code leads** | | Hooks | PASS: 8 event types | PASS: 11 events | **OpenCode has more!** | | Rules | PASS: 29 rules | PASS: 13 instructions | **Claude Code leads** | | MCP Servers | PASS: 14 servers | PASS: Full | **Full parity** | @@ -1263,7 +1263,7 @@ ECC is the **first plugin to maximize every major AI coding tool**. Here's how e |---------|------------|------------|-----------|----------| | **Agents** | 39 | Shared (AGENTS.md) | Shared (AGENTS.md) | 12 | | **Commands** | 73 | Shared | Instruction-based | 31 | -| **Skills** | 179 | Shared | 10 (native format) | 37 | +| **Skills** | 180 | Shared | 10 (native format) | 37 | | **Hook Events** | 8 types | 15 types | None yet | 11 types | | **Hook Scripts** | 20+ scripts | 16 scripts (DRY adapter) | N/A | Plugin hooks | | **Rules** | 34 (common + lang) | 34 (YAML frontmatter) | Instruction-based | 13 instructions | diff --git a/README.zh-CN.md b/README.zh-CN.md index a64a0b82..efeb7286 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -106,7 +106,7 @@ cp -r everything-claude-code/rules/perl ~/.claude/rules/ /plugin list ecc@ecc ``` -**完成！** 你现在可以使用 39 个代理、179 个技能和 73 个命令。 +**完成！** 你现在可以使用 39 个代理、180 个技能和 73 个命令。 ### multi-* 命令需要额外配置 diff --git a/WORKING-CONTEXT.md b/WORKING-CONTEXT.md index 244e89af..ec816172 100644 --- a/WORKING-CONTEXT.md +++ b/WORKING-CONTEXT.md @@ -160,3 +160,5 @@ Keep this file detailed for only the current sprint, blockers, and next actions. - 2026-04-05: Added `docs/HERMES-OPENCLAW-MIGRATION.md` as the current public migration guide for issue `#1051`. It reframes Hermes/OpenClaw as source systems to distill from, not the final runtime, and maps scheduler, dispatch, memory, skill, and service layers onto the ECC-native surfaces and ECC 2.0 backlog that already exist. - 2026-04-05: Landed `skills/agent-sort` and the legacy `/agent-sort` shim from issue `#916` as an ECC-native selective-install workflow. It classifies agents, skills, commands, rules, hooks, and extras into DAILY vs LIBRARY buckets using concrete repo evidence, then hands off installation changes to `configure-ecc` instead of inventing a parallel installer. Catalog truth is now `39` agents, `73` commands, and `179` skills. - 2026-04-05: Direct-ported the safe README-only `#1285` slice into `main` instead of merging the branch: added a small `Community Projects` section so downstream teams can link public work built on ECC without changing install, security, or runtime surfaces. Rejected `#1286` at review because it adds an external third-party GitHub Action (`hashgraph-online/codex-plugin-scanner`) that does not meet the current supply-chain policy. +- 2026-04-05: Re-audited `origin/feat/hermes-generated-ops-skills` by full diff. The branch is still not mergeable: it deletes current ECC-native surfaces, regresses packaging/install metadata, and removes newer `main` content. Continued the selective-salvage policy instead of branch merge. +- 2026-04-05: Selectively salvaged `skills/frontend-design` from the Hermes branch as a self-contained ECC-native skill, mirrored it into `.agents`, wired it into `framework-language`, and re-synced the catalog to `180` skills after validation. The branch itself remains reference-only until every remaining unique file is either ported intentionally or rejected. diff --git a/docs/zh-CN/AGENTS.md b/docs/zh-CN/AGENTS.md index 77267899..a02d9c88 100644 --- a/docs/zh-CN/AGENTS.md +++ b/docs/zh-CN/AGENTS.md @@ -1,6 +1,6 @@ # Everything Claude Code (ECC) — 智能体指令 -这是一个**生产就绪的 AI 编码插件**，提供 39 个专业代理、179 项技能、73 条命令以及自动化钩子工作流，用于软件开发。 +这是一个**生产就绪的 AI 编码插件**，提供 39 个专业代理、180 项技能、73 条命令以及自动化钩子工作流，用于软件开发。 **版本:** 1.10.0 @@ -147,7 +147,7 @@ ``` agents/ — 39 个专业子代理 -skills/ — 179 个工作流技能和领域知识 +skills/ — 180 个工作流技能和领域知识 commands/ — 73 个斜杠命令 hooks/ — 基于触发的自动化 rules/ — 始终遵循的指导方针（通用 + 每种语言） diff --git a/docs/zh-CN/README.md b/docs/zh-CN/README.md index 780c37e7..5c14b7f7 100644 --- a/docs/zh-CN/README.md +++ b/docs/zh-CN/README.md @@ -209,7 +209,7 @@ npx ecc-install typescript /plugin list ecc@ecc ``` -**搞定！** 你现在可以使用 39 个智能体、179 项技能和 73 个命令了。 +**搞定！** 你现在可以使用 39 个智能体、180 项技能和 73 个命令了。 *** @@ -1096,7 +1096,7 @@ opencode |---------|-------------|----------|--------| | 智能体 | PASS: 39 个 | PASS: 12 个 | **Claude Code 领先** | | 命令 | PASS: 73 个 | PASS: 31 个 | **Claude Code 领先** | -| 技能 | PASS: 179 项 | PASS: 37 项 | **Claude Code 领先** | +| 技能 | PASS: 180 项 | PASS: 37 项 | **Claude Code 领先** | | 钩子 | PASS: 8 种事件类型 | PASS: 11 种事件 | **OpenCode 更多！** | | 规则 | PASS: 29 条 | PASS: 13 条指令 | **Claude Code 领先** | | MCP 服务器 | PASS: 14 个 | PASS: 完整 | **完全对等** | @@ -1208,7 +1208,7 @@ ECC 是**第一个最大化利用每个主要 AI 编码工具的插件**。以 |---------|------------|------------|-----------|----------| | **智能体** | 39 | 共享 (AGENTS.md) | 共享 (AGENTS.md) | 12 | | **命令** | 73 | 共享 | 基于指令 | 31 | -| **技能** | 179 | 共享 | 10 (原生格式) | 37 | +| **技能** | 180 | 共享 | 10 (原生格式) | 37 | | **钩子事件** | 8 种类型 | 15 种类型 | 暂无 | 11 种类型 | | **钩子脚本** | 20+ 个脚本 | 16 个脚本 (DRY 适配器) | N/A | 插件钩子 | | **规则** | 34 (通用 + 语言) | 34 (YAML 前页) | 基于指令 | 13 条指令 | diff --git a/manifests/install-modules.json b/manifests/install-modules.json index c80652fd..dc00316c 100644 --- a/manifests/install-modules.json +++ b/manifests/install-modules.json @@ -124,6 +124,7 @@ "skills/django-tdd", "skills/django-verification", "skills/dotnet-patterns", + "skills/frontend-design", "skills/frontend-patterns", "skills/frontend-slides", "skills/golang-patterns", diff --git a/skills/frontend-design/SKILL.md b/skills/frontend-design/SKILL.md new file mode 100644 index 00000000..7f0b0c3a --- /dev/null +++ b/skills/frontend-design/SKILL.md @@ -0,0 +1,145 @@ +--- +name: frontend-design +description: Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality. +origin: ECC +--- + +# Frontend Design + +Use this when the task is not just "make it work" but "make it look designed." + +This skill is for product pages, dashboards, app shells, components, or visual systems that need a clear point of view instead of generic AI-looking UI. + +## When To Use + +- building a landing page, dashboard, or app surface from scratch +- upgrading a bland interface into something intentional and memorable +- translating a product concept into a concrete visual direction +- implementing a frontend where typography, composition, and motion matter + +## Core Principle + +Pick a direction and commit to it. + +Safe-average UI is usually worse than a strong, coherent aesthetic with a few bold choices. + +## Design Workflow + +### 1. Frame the interface first + +Before coding, settle: + +- purpose +- audience +- emotional tone +- visual direction +- one thing the user should remember + +Possible directions: + +- brutally minimal +- editorial +- industrial +- luxury +- playful +- geometric +- retro-futurist +- soft and organic +- maximalist + +Do not mix directions casually. Choose one and execute it cleanly. + +### 2. Build the visual system + +Define: + +- type hierarchy +- color variables +- spacing rhythm +- layout logic +- motion rules +- surface / border / shadow treatment + +Use CSS variables or the project's token system so the interface stays coherent as it grows. + +### 3. Compose with intention + +Prefer: + +- asymmetry when it sharpens hierarchy +- overlap when it creates depth +- strong whitespace when it clarifies focus +- dense layouts only when the product benefits from density + +Avoid defaulting to a symmetrical card grid unless it is clearly the right fit. + +### 4. Make motion meaningful + +Use animation to: + +- reveal hierarchy +- stage information +- reinforce user action +- create one or two memorable moments + +Do not scatter generic micro-interactions everywhere. One well-directed load sequence is usually stronger than twenty random hover effects. + +## Strong Defaults + +### Typography + +- pick fonts with character +- pair a distinctive display face with a readable body face when appropriate +- avoid generic defaults when the page is design-led + +### Color + +- commit to a clear palette +- one dominant field with selective accents usually works better than evenly weighted rainbow palettes +- avoid cliché purple-gradient-on-white unless the product genuinely calls for it + +### Background + +Use atmosphere: + +- gradients +- meshes +- textures +- subtle noise +- patterns +- layered transparency + +Flat empty backgrounds are rarely the best answer for a product-facing page. + +### Layout + +- break the grid when the composition benefits from it +- use diagonals, offsets, and grouping intentionally +- keep reading flow obvious even when the layout is unconventional + +## Anti-Patterns + +Never default to: + +- interchangeable SaaS hero sections +- generic card piles with no hierarchy +- random accent colors without a system +- placeholder-feeling typography +- motion that exists only because animation was easy to add + +## Execution Rules + +- preserve the established design system when working inside an existing product +- match technical complexity to the visual idea +- keep accessibility and responsiveness intact +- frontends should feel deliberate on desktop and mobile + +## Quality Gate + +Before delivering: + +- the interface has a clear visual point of view +- typography and spacing feel intentional +- color and motion support the product instead of decorating it randomly +- the result does not read like generic AI UI +- the implementation is production-grade, not just visually interesting