hai/everything-claude-code
1
0
Fork 0
mirror of https://github.com/affaan-m/everything-claude-code.git synced 2026-05-13 08:03:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: salvage frontend design guidance (#1816)

Browse Source
This commit is contained in:
Affaan Mustafa
2026-05-12 14:44:17 -04:00
committed by GitHub
parent 65c1502ecd
commit ab0f0187de
13 changed files with 264 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.claude-plugin/marketplace.json
View File

@@ -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",

2
.claude-plugin/plugin.json
View File

@@ -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"

4
AGENTS.md
View File

@@ -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)

6
README.md
View File

@@ -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 |

2
README.zh-CN.md
View File

@@ -160,7 +160,7 @@ Copy-Item -Recurse rules/typescript "$HOME/.claude/rules/"
/plugin list ecc@ecc
```
**完成！** 你现在可以使用 60 个代理、223 个技能和 75 个命令。
**完成！** 你现在可以使用 60 个代理、225 个技能和 75 个命令。
### multi-* 命令需要额外配置

3
docs/stale-pr-salvage-ledger.md
View File

@@ -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. |

4
docs/zh-CN/AGENTS.md
View File

@@ -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/ — 始终遵循的指导方针（通用 + 每种语言）

6
docs/zh-CN/README.md
View File

@@ -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 条指令 |

2
manifests/install-modules.json
View File

@@ -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",

2
package.json
View File

@@ -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/",

92
skills/frontend-design-direction/SKILL.md Normal file
View File

@@ -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.

151
skills/make-interfaces-feel-better/SKILL.md Normal file
View File

@@ -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.

1
tests/docs/stale-pr-salvage-ledger.test.js
View File

@@ -58,6 +58,7 @@ test('stale PR salvage ledger preserves representative source attribution', () =
'#1493',
'#1528/#1529/#1547',
'#1603',
'#1659',
'#1674',
'#1687',
'#1705/#1780',