diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index e39cefd5..89c87c7c 100644 --- a/.claude-plugin/marketplace.json +++ b/.claude-plugin/marketplace.json @@ -11,7 +11,7 @@ { "name": "ecc", "source": "./", - "description": "The most comprehensive Claude Code plugin — 60 agents, 223 skills, 75 legacy command shims, selective install profiles, and production-ready hooks for TDD, security scanning, code review, and continuous learning", + "description": "The most comprehensive Claude Code plugin — 60 agents, 225 skills, 75 legacy command shims, selective install profiles, and production-ready hooks for TDD, security scanning, code review, and continuous learning", "version": "2.0.0-rc.1", "author": { "name": "Affaan Mustafa", diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json index 56664e1f..aabcb2fa 100644 --- a/.claude-plugin/plugin.json +++ b/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "ecc", "version": "2.0.0-rc.1", - "description": "Battle-tested Claude Code plugin for engineering teams — 60 agents, 223 skills, 75 legacy command shims, production-ready hooks, and selective install workflows evolved through continuous real-world use", + "description": "Battle-tested Claude Code plugin for engineering teams — 60 agents, 225 skills, 75 legacy command shims, production-ready hooks, and selective install workflows evolved through continuous real-world use", "author": { "name": "Affaan Mustafa", "url": "https://x.com/affaanmustafa" diff --git a/AGENTS.md b/AGENTS.md index 748fd959..5d5229ca 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 60 specialized agents, 223 skills, 75 commands, and automated hook workflows for software development. +This is a **production-ready AI coding plugin** providing 60 specialized agents, 225 skills, 75 commands, and automated hook workflows for software development. **Version:** 2.0.0-rc.1 @@ -150,7 +150,7 @@ Troubleshoot failures: check test isolation → verify mocks → fix implementat ``` agents/ — 60 specialized subagents -skills/ — 223 workflow skills and domain knowledge +skills/ — 225 workflow skills and domain knowledge commands/ — 75 slash commands hooks/ — Trigger-based automations rules/ — Always-follow guidelines (common + per-language) diff --git a/README.md b/README.md index f8763680..6bfa448d 100644 --- a/README.md +++ b/README.md @@ -358,7 +358,7 @@ If you stacked methods, clean up in this order: /plugin list ecc@ecc ``` -**That's it!** You now have access to 60 agents, 223 skills, and 75 legacy command shims. +**That's it!** You now have access to 60 agents, 225 skills, and 75 legacy command shims. ### Dashboard GUI @@ -1362,7 +1362,7 @@ The configuration is automatically detected from `.opencode/opencode.json`. |---------|-------------|----------|--------| | Agents | PASS: 60 agents | PASS: 12 agents | **Claude Code leads** | | Commands | PASS: 75 commands | PASS: 35 commands | **Claude Code leads** | -| Skills | PASS: 223 skills | PASS: 37 skills | **Claude Code leads** | +| Skills | PASS: 225 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** | @@ -1467,7 +1467,7 @@ ECC is the **first plugin to maximize every major AI coding tool**. Here's how e |---------|------------|------------|-----------|----------| | **Agents** | 60 | Shared (AGENTS.md) | Shared (AGENTS.md) | 12 | | **Commands** | 75 | Shared | Instruction-based | 35 | -| **Skills** | 223 | Shared | 10 (native format) | 37 | +| **Skills** | 225 | 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 1c048940..c1775b4e 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -160,7 +160,7 @@ Copy-Item -Recurse rules/typescript "$HOME/.claude/rules/" /plugin list ecc@ecc ``` -**完成！** 你现在可以使用 60 个代理、223 个技能和 75 个命令。 +**完成！** 你现在可以使用 60 个代理、225 个技能和 75 个命令。 ### multi-* 命令需要额外配置 diff --git a/docs/stale-pr-salvage-ledger.md b/docs/stale-pr-salvage-ledger.md index 26a6f101..c75721e3 100644 --- a/docs/stale-pr-salvage-ledger.md +++ b/docs/stale-pr-salvage-ledger.md @@ -44,6 +44,7 @@ on fresh branches, and credit the source PR. | #1566 | Agent architecture audit skill | Salvaged in #1772. | | #1578 | OpenCode file-probe hardening | Salvaged in #1773. | | #1603 | `plan-orchestrate` skill | Salvaged in #1766 with current manifest/catalog wiring. | +| #1659 | Frontend design direction and interface-polish skills | Salvaged in the May 12 frontend-design maintainer pass with canonical `skills/` layout and current ECC frontend guidance, while preserving the repo guardrail that the official `frontend-design` skill should be installed from `anthropics/skills`. | | #1674 | Production audit skill | Salvaged in #1732 after supply-chain/privacy review and rewrite. | | #1687 | zh-CN localization sync | Large safe subsets salvaged in #1746-#1752; remaining pieces require translator/manual review. | | #1694 | Portfolio curation | Useful focused curation updates salvaged in #1723 and #1724. | @@ -86,6 +87,8 @@ porting. | #1318 | Gemini agent adaptation utility was already present on current `main`. | | #1323 | Hook config update was already present on current `main`. | | #1337 | Catalog count update was superseded by current catalog-count sync. | +| #1608 | Unsafe dashboard document/terminal open handling was already present on current `main` through safe runtime helpers and project-bound document opening. | +| #1678 | Windows MCP `.cmd`/`.bat` fallback behavior was already present on current `main` with current health-check tests. | | #1682/#1701 | Strategic compact hook-path fixes were merged directly or superseded by current docs fixes. | | JARVIS #4/#5/#6 | Stale failing dependency-only PRs; future dependency state should be regenerated by Dependabot. | diff --git a/docs/zh-CN/AGENTS.md b/docs/zh-CN/AGENTS.md index 0988b66d..738abc7a 100644 --- a/docs/zh-CN/AGENTS.md +++ b/docs/zh-CN/AGENTS.md @@ -1,6 +1,6 @@ # Everything Claude Code (ECC) — 智能体指令 -这是一个**生产就绪的 AI 编码插件**，提供 60 个专业代理、223 项技能、75 条命令以及自动化钩子工作流，用于软件开发。 +这是一个**生产就绪的 AI 编码插件**，提供 60 个专业代理、225 项技能、75 条命令以及自动化钩子工作流，用于软件开发。 **版本:** 2.0.0-rc.1 @@ -147,7 +147,7 @@ ``` agents/ — 60 个专业子代理 -skills/ — 223 个工作流技能和领域知识 +skills/ — 225 个工作流技能和领域知识 commands/ — 75 个斜杠命令 hooks/ — 基于触发的自动化 rules/ — 始终遵循的指导方针（通用 + 每种语言） diff --git a/docs/zh-CN/README.md b/docs/zh-CN/README.md index 3bc41efb..15dfbf20 100644 --- a/docs/zh-CN/README.md +++ b/docs/zh-CN/README.md @@ -224,7 +224,7 @@ Copy-Item -Recurse rules/typescript "$HOME/.claude/rules/" /plugin list ecc@ecc ``` -**搞定！** 你现在可以使用 60 个智能体、223 项技能和 75 个命令了。 +**搞定！** 你现在可以使用 60 个智能体、225 项技能和 75 个命令了。 *** @@ -1138,7 +1138,7 @@ opencode |---------|-------------|----------|--------| | 智能体 | PASS: 60 个 | PASS: 12 个 | **Claude Code 领先** | | 命令 | PASS: 75 个 | PASS: 35 个 | **Claude Code 领先** | -| 技能 | PASS: 223 项 | PASS: 37 项 | **Claude Code 领先** | +| 技能 | PASS: 225 项 | PASS: 37 项 | **Claude Code 领先** | | 钩子 | PASS: 8 种事件类型 | PASS: 11 种事件 | **OpenCode 更多！** | | 规则 | PASS: 29 条 | PASS: 13 条指令 | **Claude Code 领先** | | MCP 服务器 | PASS: 14 个 | PASS: 完整 | **完全对等** | @@ -1246,7 +1246,7 @@ ECC 是**第一个最大化利用每个主要 AI 编码工具的插件**。以 |---------|------------|------------|-----------|----------| | **智能体** | 60 | 共享 (AGENTS.md) | 共享 (AGENTS.md) | 12 | | **命令** | 75 | 共享 | 基于指令 | 35 | -| **技能** | 223 | 共享 | 10 (原生格式) | 37 | +| **技能** | 225 | 共享 | 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 9cfb51cd..3c9f722e 100644 --- a/manifests/install-modules.json +++ b/manifests/install-modules.json @@ -137,8 +137,10 @@ "skills/django-verification", "skills/dotnet-patterns", "skills/fastapi-patterns", + "skills/frontend-design-direction", "skills/frontend-patterns", "skills/frontend-slides", + "skills/make-interfaces-feel-better", "skills/motion-ui", "skills/golang-patterns", "skills/golang-testing", diff --git a/package.json b/package.json index bbe28af0..95fd6ffa 100644 --- a/package.json +++ b/package.json @@ -159,6 +159,7 @@ "skills/fastapi-patterns/", "skills/finance-billing-ops/", "skills/foundation-models-on-device/", + "skills/frontend-design-direction/", "skills/frontend-patterns/", "skills/frontend-slides/", "skills/fsharp-testing/", @@ -195,6 +196,7 @@ "skills/logistics-exception-management/", "skills/manim-video/", "skills/market-research/", + "skills/make-interfaces-feel-better/", "skills/mcp-server-patterns/", "skills/messages-ops/", "skills/mle-workflow/", diff --git a/skills/frontend-design-direction/SKILL.md b/skills/frontend-design-direction/SKILL.md new file mode 100644 index 00000000..423033e5 --- /dev/null +++ b/skills/frontend-design-direction/SKILL.md @@ -0,0 +1,92 @@ +--- +name: frontend-design-direction +description: Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment. +origin: community +--- + +# Frontend Design Direction + +Use this skill when the work is not just making UI function, but making it feel +purposeful, polished, and appropriate to the product domain. + +Source: salvaged from stale community PR #1659 by `linus707`. + +Note: ECC intentionally does not rebundle the canonical Anthropic +`frontend-design` skill. Install that from `anthropics/skills` when you want the +official upstream skill. This skill is the ECC-specific design-direction salvage +of the useful local guidance from #1659. + +## When to Use + +- The user asks to build a web page, app, dashboard, artifact, component, or UI. +- The user asks to make an interface more polished, distinctive, beautiful, or + less generic. +- The implementation needs visual hierarchy, typography, color, motion, layout, + and interaction choices. +- The current UI works but reads as flat, generic, templated, or mismatched to + the audience. + +## Design Direction + +Before coding, choose a specific direction: + +1. Purpose: what job does the interface do? +2. Audience: who repeats this workflow, and what do they need to scan first? +3. Tone: utilitarian, editorial, playful, industrial, refined, technical, + maximal, minimal, dense, calm, or another explicit direction. +4. Memorable detail: one design idea that makes the result feel intentional. +5. Constraints: framework, accessibility, performance, responsiveness, and + existing design system. + +Match the direction to the domain. A SaaS operations tool should usually be +dense, quiet, and scannable. A portfolio, launch page, game, or editorial piece +can be more expressive. Do not force a landing-page composition onto a tool that +needs repeated daily use. + +## Implementation Guidance + +- Build the actual usable experience as the first screen unless the user + explicitly asks for marketing copy. +- Use existing project components, tokens, icon libraries, and routing patterns + before introducing a new visual system. +- Use real or generated visual assets when the interface depends on images, + products, places, people, gameplay, charts, or inspectable media. +- Prefer contextual typography and spacing over generic oversized hero text. +- Keep palettes multi-dimensional: avoid a UI dominated by one hue family. +- Use CSS variables or existing design tokens so the direction remains + coherent across states. +- Design responsive constraints explicitly: grids, aspect ratios, min/max + sizes, stable toolbars, and fixed-format controls should not shift when labels + or hover states appear. +- Use motion sparingly but deliberately. Prefer high-signal transitions that + clarify state over decorative animation. +- Verify text fit on mobile and desktop. Long labels must wrap or resize + cleanly rather than overflowing. + +## Anti-Patterns + +- Do not default to common generated patterns: purple gradients, decorative + blobs, oversized cards, vague hero copy, or stock-like atmospheric media. +- Do not add UI cards inside other cards. +- Do not use a single decorative style everywhere when the domain calls for + restraint. +- Do not hide the primary product, tool, object, or workflow behind generic + marketing sections. +- Do not add a new dependency for a design flourish unless it clearly pays for + itself. +- Do not describe the UI's features inside the UI when the controls can speak + for themselves. + +## Review Checklist + +- The first viewport immediately communicates the product, workflow, or object. +- The visual hierarchy supports scanning and repeated use. +- Typography fits the container and does not overlap adjacent content. +- Color choices have contrast and do not collapse into a one-note palette. +- Icons are used for familiar tool actions where available. +- Responsive layout has stable dimensions for boards, grids, toolbars, + controls, tiles, and counters. +- Assets render and carry the subject matter instead of acting as filler. +- Motion improves orientation and does not mask sluggishness. +- The result matches the repo's existing frontend conventions unless there is a + clear reason to depart. diff --git a/skills/make-interfaces-feel-better/SKILL.md b/skills/make-interfaces-feel-better/SKILL.md new file mode 100644 index 00000000..2a01cf75 --- /dev/null +++ b/skills/make-interfaces-feel-better/SKILL.md @@ -0,0 +1,151 @@ +--- +name: make-interfaces-feel-better +description: Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states. +origin: community +--- + +# Make Interfaces Feel Better + +Use this skill for the small design-engineering details that compound into a +more polished interface. + +Source: salvaged from stale community PR #1659 by `linus707`. + +## When to Use + +- The user says the UI feels off, flat, generic, cramped, jumpy, or unfinished. +- You are building controls, cards, lists, dashboards, navigation, forms, or + toolbars. +- A component needs hover, active, focus, enter, exit, loading, or empty states. +- A frontend review needs specific before/after recommendations. + +## Core Principles + +### Concentric Radius + +For nearby nested rounded surfaces: + +```text +outer radius = inner radius + padding +``` + +If padding is large, treat layers as separate surfaces instead of forcing the +math. The point is optical coherence, not formula worship. + +### Optical Alignment + +Geometric centering is not always visual centering. Icon buttons, play +triangles, arrows, stars, and asymmetric icons often need a small offset. Fix the +SVG when possible; otherwise adjust with a pixel-level margin or padding change. + +### Shadows And Borders + +Use borders for separation and focus rings. Use layered shadows when a card, +button, dropdown, or popover needs depth. Shadows should be transparent and +subtle enough to work across backgrounds. + +### Text Wrapping + +- Use `text-wrap: balance` on headings and short titles. +- Use `text-wrap: pretty` on short-to-medium body text, captions, descriptions, + and list items. +- Avoid both on long prose, code, and preformatted content. +- Use `font-variant-numeric: tabular-nums` for counters, timers, prices, tables, + and other updating numbers. + +### Font Smoothing + +On macOS, apply antialiased font smoothing at the root layout when the project +does not already do so: + +```css +html { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +``` + +### Image Outlines + +Images often need a subtle inset outline so their edges do not blur into the +surface. + +```css +img { + outline: 1px solid rgba(0, 0, 0, 0.1); + outline-offset: -1px; +} + +@media (prefers-color-scheme: dark) { + img { + outline-color: rgba(255, 255, 255, 0.1); + } +} +``` + +Use neutral black or white alpha outlines. Do not tint image outlines with the +brand palette. + +### Motion + +Use CSS transitions for interactive state changes because they can retarget +when the user changes intent mid-motion. Reserve keyframes for staged +one-shot entrances or loading sequences. + +Good motion defaults: + +- Enter: combine opacity, small `translateY`, and optionally blur. +- Exit: shorter and quieter than enter, usually 150ms. +- Press: `scale(0.96)` for tactile buttons, with a way to disable it when the + movement distracts. +- Icon swaps: cross-fade with opacity, scale, and blur instead of instant + visibility toggles. + +### Transition Scope + +Never use `transition: all`. Specify the changed properties: + +```css +.button { + transition-property: transform, background-color, box-shadow; + transition-duration: 150ms; + transition-timing-function: ease-out; +} +``` + +Use `will-change` only for first-frame stutter on compositor-friendly +properties such as `transform`, `opacity`, and `filter`. Never use +`will-change: all`. + +### Hit Areas + +Interactive controls should have at least a 40x40px hit area, ideally 44x44px +where the layout allows it. Expand with a pseudo-element when the visible icon +is smaller, but do not let expanded hit areas overlap. + +## Review Output + +When reviewing a UI polish pass, report concrete changes in before/after rows: + +| Principle | Before | After | +| --- | --- | --- | +| Concentric radius | Same radius on parent and child | Parent radius accounts for padding | +| Tabular numbers | Counter shifts as digits change | Counter uses `tabular-nums` | +| Transition scope | `transition: all` | Explicit transition properties | + +Include file paths and properties when they are not obvious from the snippets. +Omit principles that you checked but did not change. + +## Checklist + +- Nested rounded elements are optically coherent. +- Icons are visually centered. +- Buttons, cards, and popovers use borders or shadows for the right reason. +- Headings and short text avoid awkward wrapping. +- Dynamic numbers use tabular numerals. +- Images have neutral outlines where needed. +- Enter and exit animations are split, subtle, and interruptible where + appropriate. +- Buttons have tactile active states without exaggerated motion. +- `transition: all` and `will-change: all` are absent. +- Small controls still have usable hit areas. diff --git a/tests/docs/stale-pr-salvage-ledger.test.js b/tests/docs/stale-pr-salvage-ledger.test.js index 63934ec1..24f407d5 100644 --- a/tests/docs/stale-pr-salvage-ledger.test.js +++ b/tests/docs/stale-pr-salvage-ledger.test.js @@ -58,6 +58,7 @@ test('stale PR salvage ledger preserves representative source attribution', () = '#1493', '#1528/#1529/#1547', '#1603', + '#1659', '#1674', '#1687', '#1705/#1780',