chill-agent 0.0.0-stage → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +90 -2
- package/bin/chill-agent.js +7 -0
- package/package.json +38 -4
- package/skills/chill-slop/SKILL.md +85 -0
- package/skills/chill-slop-code/SKILL.md +37 -0
- package/skills/chill-slop-copywriting/SKILL.md +33 -0
- package/skills/chill-slop-human/SKILL.md +21 -0
- package/skills/chill-slop-mobile/SKILL.md +26 -0
- package/skills/chill-slop-ui/SKILL.md +35 -0
- package/src/auditor.js +212 -0
- package/src/cli.js +250 -0
- package/src/detector.js +102 -0
- package/src/index.js +6 -0
- package/src/installer.js +81 -0
- package/src/presets.js +126 -0
- package/src/prompts.js +192 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 sann
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,91 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ChillAgent (`chill-agent`)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> **The Zero-Bloat Anti-Slop 2.0 Engine & Deterministic Time-Travel Debugger for AI Coding Agents.**
|
|
4
|
+
> Engineered for **Antigravity**, **Claude Code**, **Cursor**, **Codex**, **Windsurf**, and **GitHub Copilot**.
|
|
5
|
+
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
[](https://nodejs.org)
|
|
8
|
+
[](package.json)
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## ⚡ Instant Quickstart (No Install Required)
|
|
13
|
+
|
|
14
|
+
Run directly via `npx`:
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
# Launch interactive agent setup wizard
|
|
18
|
+
npx chill-agent
|
|
19
|
+
|
|
20
|
+
# Scan your codebase for AI slop cliches, purple gradients & hype copy
|
|
21
|
+
npx chill-agent audit
|
|
22
|
+
|
|
23
|
+
# Generate a master high-craft DESIGN.md specification
|
|
24
|
+
npx chill-agent init-design
|
|
25
|
+
|
|
26
|
+
# Inspect agent environment health & active hooks
|
|
27
|
+
npx chill-agent doctor
|
|
28
|
+
|
|
29
|
+
# Launch deterministic time-travel debugger & Linear-grade Web Inspector
|
|
30
|
+
npx chill-agent rewind ui
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## 🥊 Why ChillAgent is Significantly Better than `miqdadbadjuber/anti-slop`
|
|
36
|
+
|
|
37
|
+
| Feature | `miqdadbadjuber/anti-slop` | **`chill-agent` (Anti-Slop 2.0)** |
|
|
38
|
+
| :--- | :--- | :--- |
|
|
39
|
+
| **Dependencies** | Requires `@clack/prompts` & `picocolors` | **Pure Zero-Dependency** (Native Node.js terminal formatting) |
|
|
40
|
+
| **Enforcement Layer** | Static markdown rules only | **Dual Layer: Static Negative Filter + Runtime Proxy Interceptor** |
|
|
41
|
+
| **Slop Linter / Scanner** | ❌ None (Manual human audit only) | **Built-in Automated AST/Regex Auditor (`npx chill-agent audit`)** |
|
|
42
|
+
| **Cure for "Sterile Default"**| ❌ Warns that output will be monotonous | **5 Curated High-Craft Aesthetic Presets (`npx chill-agent init-design`)** |
|
|
43
|
+
| **Deterministic Time-Travel** | ❌ None | **RewindCore SQLite DAG ($0.00 / 0ms replay cache)** |
|
|
44
|
+
| **Context Slop Sieve** | ❌ None | **Automated middle-out truncation for stale tool dumps (>1.5KB)** |
|
|
45
|
+
| **Stuck Loop Protection** | ❌ None | **3x consecutive tool-call circuit breaker** |
|
|
46
|
+
| **Agent Environment Reach** | 7 agents | **Auto-detects Antigravity, Claude, Cursor, Windsurf, Codex, Copilot** |
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## 🧩 Modular Skills Architecture
|
|
51
|
+
|
|
52
|
+
When installed, `chill-agent` provides 6 focused craftsmanship skills in `./skills/`:
|
|
53
|
+
|
|
54
|
+
1. **`chill-slop` (Master Filter):** Hard gates against purple mesh gradients, pill-shaped bubble cards, skeleton screenshot previews, and hallucinated metrics.
|
|
55
|
+
2. **`chill-slop-ui` (Visual Engineering):** Precision carbon palette (`#09090B`), 1px hairline borders, tabular monospace metrics, and intentional surface elevations.
|
|
56
|
+
3. **`chill-slop-copywriting` (Domain Voice):** Purges robotic buzzwords (*"unleash the power"*, *"supercharge"*, *"seamless"*) in favor of concrete engineering specifications.
|
|
57
|
+
4. **`chill-slop-code` (Code Hygiene):** Eliminates redundant *"this function calculates x"* comments and strips emoji decorations from docstrings.
|
|
58
|
+
5. **`chill-slop-human` (Ergonomics & A11y):** Enforces 4.5:1 contrast, visible focus rings, 44px touch targets, and accessible ARIA affordances.
|
|
59
|
+
6. **`chill-slop-mobile` (Responsive Systems):** Fluid CSS `clamp()` typography, zero horizontal blowout, and comfortable thumb-reach zone actions.
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## 🎨 5 High-Craft Design System Presets
|
|
64
|
+
|
|
65
|
+
Prevent your coding agent from falling into the "sterile blank white" trap with `npx chill-agent init-design`:
|
|
66
|
+
|
|
67
|
+
- **Linear Carbon Geist:** Deep obsidian canvas, 1px `#26262B` borders, JetBrains Mono, emerald state indicators.
|
|
68
|
+
- **Swiss Neo-Brutal:** High contrast black/white ink, strict 0px border radius, heavy grotesque typography.
|
|
69
|
+
- **Industrial Technical Dossier:** Blueprint data-first layout, slate/steel surfaces, dense telemetry views.
|
|
70
|
+
- **Warm Analog Editorial:** Warm ivory `#FBFBF9` paper, charcoal ink, literary serif headings.
|
|
71
|
+
- **Cyberpunk Micro-Density:** HUD telemetry panels, emerald phosphor text, compact technical toggles.
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## 📦 How to Publish to NPM
|
|
76
|
+
|
|
77
|
+
To make `npx chill-agent` available globally to all developers:
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
# 1. Login to your NPM registry account
|
|
81
|
+
npm login
|
|
82
|
+
|
|
83
|
+
# 2. Publish package
|
|
84
|
+
npm publish --access public
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
---
|
|
88
|
+
|
|
89
|
+
## 📄 License
|
|
90
|
+
|
|
91
|
+
MIT © [sann](https://github.com/sann)
|
package/package.json
CHANGED
|
@@ -1,6 +1,40 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "chill-agent",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Zero-bloat Anti-Slop 2.0 Engine & Deterministic Time-Travel Debugger for AI Coding Agents.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"bin": {
|
|
7
|
+
"chill-agent": "bin/chill-agent.js"
|
|
8
|
+
},
|
|
9
|
+
"main": "./src/index.js",
|
|
10
|
+
"scripts": {
|
|
11
|
+
"start": "node ./bin/chill-agent.js",
|
|
12
|
+
"test": "node --test test/*.test.js",
|
|
13
|
+
"audit": "node ./bin/chill-agent.js audit",
|
|
14
|
+
"lint": "node ./bin/chill-agent.js audit"
|
|
15
|
+
},
|
|
16
|
+
"engines": {
|
|
17
|
+
"node": ">=18.0.0"
|
|
18
|
+
},
|
|
19
|
+
"keywords": [
|
|
20
|
+
"anti-slop",
|
|
21
|
+
"ai-agents",
|
|
22
|
+
"design-rules",
|
|
23
|
+
"claude-code",
|
|
24
|
+
"cursor",
|
|
25
|
+
"antigravity",
|
|
26
|
+
"time-travel-debugger",
|
|
27
|
+
"mcp",
|
|
28
|
+
"code-cleanup",
|
|
29
|
+
"accessibility"
|
|
30
|
+
],
|
|
31
|
+
"author": "sann",
|
|
32
|
+
"license": "MIT",
|
|
33
|
+
"files": [
|
|
34
|
+
"bin/",
|
|
35
|
+
"src/",
|
|
36
|
+
"skills/",
|
|
37
|
+
"README.md",
|
|
38
|
+
"LICENSE"
|
|
39
|
+
]
|
|
40
|
+
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: chill-slop
|
|
3
|
+
description: "Master Anti-Slop 2.0 Core Filter. Stops AI coding agents from generating generic, purple-glowing, templated AI slop. Enforces purpose gates, liveliness bars, and craftsmanship standards."
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# ChillSlop 2.0: Master Negative Filter & Craftsmanship Standard
|
|
7
|
+
|
|
8
|
+
> **Core Mandate:** Follow these rules whenever generating, planning, or auditing any UI, copy, architecture, or codebase.
|
|
9
|
+
> The goal: Every deliverable must feel **crafted by a senior designer and principal engineer**, never generated by an average AI model.
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## 1. The Core Purpose Test
|
|
14
|
+
|
|
15
|
+
Before using **any** visual technique, color accent, layout structure, animation, or marketing copy, you must pass the **Purpose Test**:
|
|
16
|
+
|
|
17
|
+
> **"What specific functional or communicative goal does this serve?"**
|
|
18
|
+
> - If the only answer is *"it looks modern"*, *"it fills space"*, or *"it is standard for landing pages"* → **REJECT IT IMMEDIATELY**.
|
|
19
|
+
> - If the answer names a verified user hierarchy, readability requirement, brand personality, or tactile feedback → **RETAIN AND DOCUMENT**.
|
|
20
|
+
|
|
21
|
+
### The Litmus Test
|
|
22
|
+
> *If the logo, product name, and color swatch were stripped away, does this interface still feel distinct, purposeful, and tailored to its specific domain?*
|
|
23
|
+
> If **NO** → The output is AI Slop. Rebuild with intent.
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## 2. Tier 0: Hard Gates (Instant Disqualification)
|
|
28
|
+
|
|
29
|
+
Any presence of these items in code, CSS, or markdown is a build failure:
|
|
30
|
+
|
|
31
|
+
- **HG-01 (Generic Gradient Orbs):** No saturated purple-to-blue, purple-to-cyan, or rainbow mesh radial gradient backgrounds.
|
|
32
|
+
- **HG-02 (Pill Button Epidemic):** Do not make every button, input, card, and badge `rounded-full` / `rounded-3xl` with fuzzy multi-layered drop shadows.
|
|
33
|
+
- **HG-03 (Glassmorphism Overdose):** Do not stack `backdrop-blur` on the navbar, every card, the modal, the sidebar, and dropdown menus simultaneously.
|
|
34
|
+
- **HG-04 (Skeleton Hero Screenshots):** Never place fake grey skeleton wireframe placeholder boxes inside hero mockups as "product previews". Render real tabular data or actual functional UI.
|
|
35
|
+
- **HG-05 (Emoji-Infested Code & Copy):** Never use emoji bullets in code comments (`// 🚀 Launch rocket`), and never use sparkle emojis (`✨ Magically transforms...`) in marketing copy.
|
|
36
|
+
- **HG-06 (Hallucinated Social Proof):** Never generate fake quotes with stock avatar headshots, fake Forbes/TechCrunch badges, or bogus metrics (*"99.9% customer happiness"*).
|
|
37
|
+
- **HG-07 (Unanchored Dark Mode):** Never force dark mode solely because *"it looks hacker/tech"* without evaluating domain context (e.g. medical, legal, or editorial platforms often demand crisp high-contrast light backgrounds).
|
|
38
|
+
- **HG-08 (Cookie-Cutter Landing Template):** Hero → 3-column identical feature cards with icons in colored circles → Bento Grid → Testimonials → Pricing table → Accordion FAQ → Mega Footer. Break the template based on real product need.
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## 3. Tier 1: The Liveliness Toolkit (Anti-Sterile Bar)
|
|
43
|
+
|
|
44
|
+
Filtering slop does not mean defaulting to an empty, sterile white box. You must inject deliberate **domain character**:
|
|
45
|
+
|
|
46
|
+
### L-1 — Typography as Structure
|
|
47
|
+
- Pair a high-character display font with a workhorse sans or precision monospace.
|
|
48
|
+
- Set strict tabular numerals (`font-variant-numeric: tabular-nums` or `JetBrains Mono` / `ui-monospace`) for all metrics, latencies, prices, and counters.
|
|
49
|
+
- Use font weight and letter spacing (`letter-spacing: -0.02em` for dense display headers, `+0.04em` for uppercase micro-labels) instead of arbitrary font sizes.
|
|
50
|
+
|
|
51
|
+
### L-2 — Surfaces & Micro-Borders
|
|
52
|
+
- Replace floating blurry shadows with hairline borders (`1px solid var(--border)` / `rgba(255, 255, 255, 0.08)`).
|
|
53
|
+
- Layer surfaces intentionally: Base Canvas (`#09090B`) → Panel Surface (`#111114`) → Elevated Interactive (`#18181C`).
|
|
54
|
+
- Reserve hover transitions for tangible feedback: subtle border brightening or surface elevation, not 10px y-axis floating jumps.
|
|
55
|
+
|
|
56
|
+
### L-3 — Semantic Accent Discipline
|
|
57
|
+
- Limit bright accents to **one single semantic role** per screen (e.g. Emerald for active connection/replay, Coral for destructive actions, Indigo for branched states).
|
|
58
|
+
- Never paint borders, badges, cards, links, headings, and buttons with the same loud primary color.
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
## 4. Usage Modes
|
|
63
|
+
|
|
64
|
+
ChillSlop operates in two primary modes:
|
|
65
|
+
|
|
66
|
+
### Mode 1: During Construction (Default for New Code)
|
|
67
|
+
- Enforce Hard Gates and Liveliness while typing code.
|
|
68
|
+
- Prevent cliches before they reach disk.
|
|
69
|
+
- Run the Delivery Gate before declaring completion.
|
|
70
|
+
|
|
71
|
+
### Mode 2: After Construction (Audit & Remediation)
|
|
72
|
+
- Scan target repository files.
|
|
73
|
+
- Produce a structured audit report citing rule infractions (HG-xx, R-xx).
|
|
74
|
+
- Present numbered actionable remediation items for user confirmation before editing.
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## 5. The Delivery Gate Checklist
|
|
79
|
+
|
|
80
|
+
Before delivering any file or view:
|
|
81
|
+
1. [ ] Are all interactive buttons and inputs functionally wired or clearly bound?
|
|
82
|
+
2. [ ] Does the page function gracefully on viewport resize without overflow?
|
|
83
|
+
3. [ ] Are contrast ratios at least 4.5:1 for normal text and 3:1 for large headers?
|
|
84
|
+
4. [ ] Are all code comments strictly technical, devoid of AI conversational filler and emojis?
|
|
85
|
+
5. [ ] Is the visual hierarchy determined by content necessity rather than a landing page checklist?
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: chill-slop-code
|
|
3
|
+
description: "Code hygiene and anti-slop commentary. Purges redundant AI comments, conversational chatter, and emoji-decorated docstrings while preserving critical architectural invariants."
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# ChillSlop Code: Clean Engineering Standards
|
|
7
|
+
|
|
8
|
+
Apply this skill when writing, reviewing, or refactoring source code in any language.
|
|
9
|
+
|
|
10
|
+
## 1. Comment Hygiene
|
|
11
|
+
- **Never state the obvious:**
|
|
12
|
+
- *Slop:*
|
|
13
|
+
```typescript
|
|
14
|
+
// Define the add function that takes a and b
|
|
15
|
+
function add(a: number, b: number): number {
|
|
16
|
+
// Return the sum of a and b
|
|
17
|
+
return a + b;
|
|
18
|
+
}
|
|
19
|
+
```
|
|
20
|
+
- *Clean:*
|
|
21
|
+
```typescript
|
|
22
|
+
function add(a: number, b: number): number {
|
|
23
|
+
return a + b;
|
|
24
|
+
}
|
|
25
|
+
```
|
|
26
|
+
- **Document the "WHY", not the "WHAT":**
|
|
27
|
+
- Comments must explain non-obvious constraints, external quirks, memory layout assumptions, or algorithmic edge cases.
|
|
28
|
+
- *Example:*
|
|
29
|
+
```typescript
|
|
30
|
+
// WAL mode enables concurrent reads without holding exclusive DB locks during proxy writes
|
|
31
|
+
db.exec(`PRAGMA journal_mode = WAL;`);
|
|
32
|
+
```
|
|
33
|
+
- **Zero Emojis in Code:** Never add `🚀`, `✨`, `🔥`, `💡`, or `🎉` to comments, docstrings, console logs, or commit messages.
|
|
34
|
+
|
|
35
|
+
## 2. Structural Purity
|
|
36
|
+
- **No Unused Imports or Dead Polyfills:** Never import libraries or create wrapper classes that are never referenced.
|
|
37
|
+
- **Fail Fast & Explicitly:** Avoid silent try/catch blocks that swallow errors with generic log lines. Surface the exact stack trace or handle known failure branches deterministically.
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: chill-slop-copywriting
|
|
3
|
+
description: "Anti-slop copywriting standards. Strips robotic AI marketing filler, vague hype, empty buzzwords, and hallucinated metrics in favor of sharp, concrete domain prose."
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# ChillSlop Copywriting: Authentic Domain Voice
|
|
7
|
+
|
|
8
|
+
Apply this skill when drafting landing page headlines, CTAs, product microcopy, documentation, emails, or error messages.
|
|
9
|
+
|
|
10
|
+
## 1. Banned AI Buzzwords & Cliches
|
|
11
|
+
Strip these words immediately upon identification:
|
|
12
|
+
- *"Unleash the power of..."* → Name the exact feature and what it does.
|
|
13
|
+
- *"Seamless integration / Effortless workflow"* → Explain the exact protocol (e.g. *"Installs in 1 command via stdio JSON-RPC"*).
|
|
14
|
+
- *"Supercharge your team / Game-changer / Next-generation"* → Provide actual performance figures or technical capability.
|
|
15
|
+
- *"Dive in / Delve into / Look no further"* → Start directly with the instruction or documentation.
|
|
16
|
+
- *"Robust, scalable, and cutting-edge"* → Specify uptime, architecture, or benchmark.
|
|
17
|
+
- *"Empower developers to..."* → State the developer's exact action.
|
|
18
|
+
|
|
19
|
+
## 2. The Specificity Mandate
|
|
20
|
+
- Replace vague assertions with concrete specifications:
|
|
21
|
+
- *Bad:* "Fast, lightweight debugger that saves lots of tokens."
|
|
22
|
+
- *Good:* "0ms deterministic SQLite WAL proxy that prunes stale tool outputs over 1.5KB."
|
|
23
|
+
- *Bad:* "Join thousands of satisfied creators."
|
|
24
|
+
- *Good:* "Used by 1,400 active developers across 12 countries." (Only if verified, otherwise omit social proof entirely).
|
|
25
|
+
|
|
26
|
+
## 3. Microcopy & Interface Verbs
|
|
27
|
+
- **Action-Oriented Buttons:** Use imperative verb + direct object:
|
|
28
|
+
- Prefer: `Fork Session`, `Export JSON`, `Connect Database`, `Copy API Key`.
|
|
29
|
+
- Avoid: `Submit`, `Click Here`, `Get Started Now`, `Explore Magic`.
|
|
30
|
+
- **Honest Error Messages:**
|
|
31
|
+
- State what broke, why it broke, and the exact resolution command.
|
|
32
|
+
- *Bad:* "Oops! Something went wrong! Please try again later."
|
|
33
|
+
- *Good:* "Upstream API timeout (504 Gateway Timeout) on `api.anthropic.com`. Verify your network or re-run with `chill-agent run --port 8788`."
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: chill-slop-human
|
|
3
|
+
description: "Accessibility, human factors, tactile feedback, and focus management. Guarantees WCAG AA compliance, proper keyboard affordances, and zero barrier interfaces."
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# ChillSlop Human: Ergonomics & Accessibility
|
|
7
|
+
|
|
8
|
+
Apply this skill to ensure all software interfaces are effortless to use with eyes, hands, screen readers, and keyboards.
|
|
9
|
+
|
|
10
|
+
## 1. Contrast & Legibility
|
|
11
|
+
- **WCAG AA Minimum Contrast:** Text and interactive elements must maintain at least `4.5:1` contrast ratio against their immediate background (`3:1` for text >= 18pt bold).
|
|
12
|
+
- **No Low-Contrast Gray-on-Gray Slop:** Never use `#71717A` text on `#18181B` backgrounds for critical body copy. Reserve muted gray exclusively for secondary metadata labels.
|
|
13
|
+
|
|
14
|
+
## 2. Keyboard & Focus Management
|
|
15
|
+
- **Visible Focus Rings:** Every button, input, anchor, and clickable div must render a clear, un-clipped focus indicator (e.g. `outline: 2px solid var(--focus-ring); outline-offset: 2px;`). Never set `outline: none` without a high-visibility replacement.
|
|
16
|
+
- **Escape Key Interception:** All modals, drawers, and overlay dialogs must close immediately on `Escape` keypress and restore focus to the triggering element.
|
|
17
|
+
- **Logical Tab Order:** Ensure the DOM tab order matches visual layout. Never jump focus unexpectedly across the viewport.
|
|
18
|
+
|
|
19
|
+
## 3. Touch Targets & Affordances
|
|
20
|
+
- Interactive touch targets on mobile and touch-enabled devices must measure at least `44x44px` (or `48x48px` for primary controls).
|
|
21
|
+
- Every icon button lacking visible text must include an unambiguous `aria-label` attribute (e.g. `<button aria-label="Close dialog">`).
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: chill-slop-mobile
|
|
3
|
+
description: "Mobile and responsive layout engineering. Prevents horizontal viewport blowout, cramped tap targets, unreadable desktop-first scales, and broken drawer gestures."
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# ChillSlop Mobile: Responsive Engineering
|
|
7
|
+
|
|
8
|
+
Apply this skill whenever building layouts intended to run across mobile phones, tablets, foldables, and ultra-wide displays.
|
|
9
|
+
|
|
10
|
+
## 1. Zero Horizontal Overflow
|
|
11
|
+
- The viewport must never produce accidental horizontal scrollbars (`overflow-x: hidden` is a band-aid, not a fix; eliminate the protruding element width).
|
|
12
|
+
- Wrap tabular data inside cleanly scrollable container wrappers (`overflow-x: auto; -webkit-overflow-scrolling: touch;`) with visual scroll indicators.
|
|
13
|
+
|
|
14
|
+
## 2. Fluid Typography & Modular Scale
|
|
15
|
+
- Avoid massive static header sizes on mobile (`font-size: 72px` overflowing small screens).
|
|
16
|
+
- Use CSS `clamp()` for fluid scaling:
|
|
17
|
+
```css
|
|
18
|
+
h1 {
|
|
19
|
+
font-size: clamp(2rem, 5vw + 1rem, 3.75rem);
|
|
20
|
+
line-height: 1.1;
|
|
21
|
+
}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## 3. Thumb-Zone Optimization
|
|
25
|
+
- Primary navigation and destructive or frequent actions on mobile should sit within the comfortable bottom thumb-reach zone.
|
|
26
|
+
- Sticky bottom action bars on mobile must respect `env(safe-area-inset-bottom)` to prevent clipping against home indicators.
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: chill-slop-ui
|
|
3
|
+
description: "UI and visual engineering anti-slop rules. Replaces generic AI templates, bubbly gradients, and cookie-cutter grids with high-craft, Linear/Vercel/Raycast grade interfaces."
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# ChillSlop UI: Visual Craftsmanship Standard
|
|
7
|
+
|
|
8
|
+
Apply this skill when generating HTML, JSX, Vue, Svelte, Tailwind, CSS, or Figma designs.
|
|
9
|
+
|
|
10
|
+
## 1. Color & Lighting Architecture
|
|
11
|
+
- **Reject the Purple/Cyan Default:** Unless brand guidelines demand it, avoid `from-violet-600 to-indigo-600` or `from-cyan-400 to-blue-500` gradients.
|
|
12
|
+
- **Surface Elevation Hierarchy:** Construct depth using discrete surface shades rather than fuzzy ambient box-shadows:
|
|
13
|
+
- Canvas: `#09090B` (Deep Carbon)
|
|
14
|
+
- Secondary/Sidebar: `#101014` (Subtle tint)
|
|
15
|
+
- Card/Panel: `#141418` (Structured baseline)
|
|
16
|
+
- Hover/Active: `#1C1C22` (Interactive target)
|
|
17
|
+
- Hairline Border: `1px solid #26262B` (Crisp separation)
|
|
18
|
+
- **Monochrome Foundation:** Build 90% of the UI in monochromatic tones (white, zinc, carbon, slate). Use color strictly for semantic state indicators (Status Green, Warning Amber, Destructive Rose).
|
|
19
|
+
|
|
20
|
+
## 2. Geometry & Spacing
|
|
21
|
+
- **Border Radius Discipline:**
|
|
22
|
+
- Micro controls (tags, badges, inner buttons): `4px` to `6px`.
|
|
23
|
+
- Panels, dialogs, cards: `8px` to `10px`.
|
|
24
|
+
- Maximum outer containers: `12px`.
|
|
25
|
+
- **Ban:** Universal `rounded-2xl` and `rounded-3xl` cards unless designing a playful consumer toy app.
|
|
26
|
+
- **Rhythm Over Random Spacing:** Use a strict 4px/8px modular scale (`4px`, `8px`, `12px`, `16px`, `24px`, `32px`, `48px`, `64px`). Never use arbitrary values like `margin: 17px`.
|
|
27
|
+
|
|
28
|
+
## 3. Component Architecture
|
|
29
|
+
- **Cards with Personality:** Do not render 3 identical cards with centered icon, bold title, and 2 lines of generic text. Asymmetric density, data tables, inline code snippets, and split-screen previews create visual interest.
|
|
30
|
+
- **Tabular Monospace Metrics:** Every number, timestamp, latency, token count, and financial figure must use `ui-monospace`, `JetBrains Mono`, or `font-variant-numeric: tabular-nums` to prevent layout jitter.
|
|
31
|
+
- **Affordance Clarity:** Interactive elements must look interactive without gimmicks. Clear hover states, visible active pressed states, and distinct disabled opacity (`0.45` with `cursor: not-allowed`).
|
|
32
|
+
|
|
33
|
+
## 4. Animation & Motion
|
|
34
|
+
- Fast, purposeful, non-distracting motion: `duration: 120ms` to `180ms`, easing `cubic-bezier(0.16, 1, 0.3, 1)`.
|
|
35
|
+
- Never animate elements simply because CSS animations exist. Motion is strictly for spatial context (drawers entering from trigger side, dropdown expansions, toast dismissals).
|
package/src/auditor.js
ADDED
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
// src/auditor.js - Automated Anti-Slop Code & Copy Scanner
|
|
2
|
+
import fs from 'node:fs';
|
|
3
|
+
import path from 'node:path';
|
|
4
|
+
import { c } from './prompts.js';
|
|
5
|
+
|
|
6
|
+
const SLOP_PATTERNS = [
|
|
7
|
+
// 1. Visual Slop
|
|
8
|
+
{
|
|
9
|
+
id: 'VISUAL-01',
|
|
10
|
+
category: 'Visual Slop',
|
|
11
|
+
severity: 'HIGH',
|
|
12
|
+
regex: /from-purple-[0-9]{3}\s+to-indigo-[0-9]{3}|from-violet-[0-9]{3}\s+to-cyan-[0-9]{3}|from-indigo-[0-9]{3}\s+to-pink-[0-9]{3}/i,
|
|
13
|
+
name: 'Generic AI Purple/Cyan Gradient',
|
|
14
|
+
fix: 'Replace with precision monochromatic carbon `#09090B` or a branded domain color palette.'
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
id: 'VISUAL-02',
|
|
18
|
+
category: 'Visual Slop',
|
|
19
|
+
severity: 'MEDIUM',
|
|
20
|
+
regex: /rounded-3xl|rounded-full\s+.*shadow-2xl/i,
|
|
21
|
+
name: 'Pill-Shaped Floating Bubble',
|
|
22
|
+
fix: 'Use crisp geometric radius (4px to 8px) with hairline 1px borders instead of rounded-3xl with heavy shadow.'
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
id: 'VISUAL-03',
|
|
26
|
+
category: 'Visual Slop',
|
|
27
|
+
severity: 'LOW',
|
|
28
|
+
regex: /backdrop-blur-(md|lg|xl|2xl)/i,
|
|
29
|
+
name: 'Excessive Glassmorphic Blur',
|
|
30
|
+
fix: 'Ensure backdrop-blur is not stacked across cards, modals, and navbars simultaneously.'
|
|
31
|
+
},
|
|
32
|
+
|
|
33
|
+
// 2. Copywriting Slop
|
|
34
|
+
{
|
|
35
|
+
id: 'COPY-01',
|
|
36
|
+
category: 'Copywriting Slop',
|
|
37
|
+
severity: 'HIGH',
|
|
38
|
+
regex: /\b(unleash\s+the\s+power\s+of|supercharge\s+your|seamlessly\s+integrate|next-generation|game-changer|delve\s+into|dive\s+deep\s+into)\b/i,
|
|
39
|
+
name: 'Generic AI Hype Filler',
|
|
40
|
+
fix: 'Replace vague hype words with concrete specifications or direct functional instructions.'
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
id: 'COPY-02',
|
|
44
|
+
category: 'Copywriting Slop',
|
|
45
|
+
severity: 'MEDIUM',
|
|
46
|
+
regex: /✨|🚀|🎉|💡|🔥/u,
|
|
47
|
+
name: 'AI Sparkle / Rocket Emoji Cliché',
|
|
48
|
+
fix: 'Strip emojis from marketing headlines, documentation, and interface button labels.'
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
id: 'COPY-03',
|
|
52
|
+
category: 'Copywriting Slop',
|
|
53
|
+
severity: 'HIGH',
|
|
54
|
+
regex: /\b(trusted\s+by\s+[0-9,]+\s+happy\s+customers|99\.9%\s+customer\s+satisfaction)\b/i,
|
|
55
|
+
name: 'Hallucinated Social Proof',
|
|
56
|
+
fix: 'Cite verified customer metrics or remove synthetic testimonials entirely.'
|
|
57
|
+
},
|
|
58
|
+
|
|
59
|
+
// 3. Code Hygiene Slop
|
|
60
|
+
{
|
|
61
|
+
id: 'CODE-01',
|
|
62
|
+
category: 'Code Hygiene',
|
|
63
|
+
severity: 'MEDIUM',
|
|
64
|
+
regex: /\/\/\s*(this\s+function\s+calculates|this\s+is\s+the\s+render\s+method|define\s+variables?|initialize\s+state)/i,
|
|
65
|
+
name: 'Redundant Obvious AI Code Comment',
|
|
66
|
+
fix: 'Remove comments that merely restate what the code visibly does. Document the "WHY", not the "WHAT".'
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
id: 'CODE-02',
|
|
70
|
+
category: 'Code Hygiene',
|
|
71
|
+
severity: 'LOW',
|
|
72
|
+
regex: /\/\/\s*TODO:\s*(implement\s+this|add\s+logic\s+later|finish\s+this)/i,
|
|
73
|
+
name: 'Unimplemented Lazy AI Stub',
|
|
74
|
+
fix: 'Provide full working implementation or throw explicit NotImplementedError with actionable message.'
|
|
75
|
+
},
|
|
76
|
+
|
|
77
|
+
// 4. Human Factors & Accessibility
|
|
78
|
+
{
|
|
79
|
+
id: 'A11Y-01',
|
|
80
|
+
category: 'Human Factors',
|
|
81
|
+
severity: 'HIGH',
|
|
82
|
+
regex: /<button[^>]*>[^<]*<svg[^>]*>[\s\S]*?<\/svg>[^<]*<\/button>/i,
|
|
83
|
+
name: 'Icon Button Missing Accessible Label',
|
|
84
|
+
fix: 'Add aria-label="..." to the button element so screen readers can identify the control action.'
|
|
85
|
+
}
|
|
86
|
+
];
|
|
87
|
+
|
|
88
|
+
const SCAN_EXTENSIONS = new Set([
|
|
89
|
+
'.js', '.jsx', '.ts', '.tsx', '.vue', '.svelte', '.html', '.css', '.md', '.mdx'
|
|
90
|
+
]);
|
|
91
|
+
|
|
92
|
+
const IGNORE_DIRS = new Set([
|
|
93
|
+
'node_modules', '.git', '.chillrewind', 'dist', 'build', '.next', '.cache', 'coverage'
|
|
94
|
+
]);
|
|
95
|
+
|
|
96
|
+
export function scanFile(filePath) {
|
|
97
|
+
const findings = [];
|
|
98
|
+
try {
|
|
99
|
+
const content = fs.readFileSync(filePath, 'utf8');
|
|
100
|
+
const lines = content.split('\n');
|
|
101
|
+
|
|
102
|
+
lines.forEach((line, lineIdx) => {
|
|
103
|
+
for (const pattern of SLOP_PATTERNS) {
|
|
104
|
+
if (pattern.regex.test(line)) {
|
|
105
|
+
findings.push({
|
|
106
|
+
file: filePath,
|
|
107
|
+
line: lineIdx + 1,
|
|
108
|
+
snippet: line.trim().slice(0, 80),
|
|
109
|
+
...pattern
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
});
|
|
114
|
+
} catch {}
|
|
115
|
+
return findings;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
export function autoFixFile(filePath) {
|
|
119
|
+
let modified = false;
|
|
120
|
+
try {
|
|
121
|
+
let content = fs.readFileSync(filePath, 'utf8');
|
|
122
|
+
|
|
123
|
+
// 1. Strip marketing emojis (✨, 🚀, 🎉, etc.)
|
|
124
|
+
const strippedEmoji = content.replace(/[✨🚀🎉💡🔥]/gu, '');
|
|
125
|
+
if (strippedEmoji !== content) {
|
|
126
|
+
content = strippedEmoji;
|
|
127
|
+
modified = true;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// 2. Fix redundant obvious comments
|
|
131
|
+
const strippedComments = content.replace(/\/\/\s*(this\s+function\s+calculates|this\s+is\s+the\s+render\s+method|define\s+variables?|initialize\s+state).*\n/gi, '');
|
|
132
|
+
if (strippedComments !== content) {
|
|
133
|
+
content = strippedComments;
|
|
134
|
+
modified = true;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
// 3. Fix rounded-3xl cards
|
|
138
|
+
const fixedRadius = content.replace(/\brounded-3xl\b/g, 'rounded-lg');
|
|
139
|
+
if (fixedRadius !== content) {
|
|
140
|
+
content = fixedRadius;
|
|
141
|
+
modified = true;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
if (modified) {
|
|
145
|
+
fs.writeFileSync(filePath, content, 'utf8');
|
|
146
|
+
}
|
|
147
|
+
} catch {}
|
|
148
|
+
return modified;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
export function scanDirectory(dirPath) {
|
|
152
|
+
|
|
153
|
+
const allFindings = [];
|
|
154
|
+
|
|
155
|
+
function walk(current) {
|
|
156
|
+
let entries = [];
|
|
157
|
+
try {
|
|
158
|
+
entries = fs.readdirSync(current, { withFileTypes: true });
|
|
159
|
+
} catch {
|
|
160
|
+
return;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
for (const entry of entries) {
|
|
164
|
+
if (entry.isDirectory()) {
|
|
165
|
+
if (!IGNORE_DIRS.has(entry.name)) {
|
|
166
|
+
walk(path.join(current, entry.name));
|
|
167
|
+
}
|
|
168
|
+
} else if (entry.isFile()) {
|
|
169
|
+
const ext = path.extname(entry.name);
|
|
170
|
+
if (SCAN_EXTENSIONS.has(ext)) {
|
|
171
|
+
const res = scanFile(path.join(current, entry.name));
|
|
172
|
+
allFindings.push(...res);
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
walk(dirPath);
|
|
179
|
+
return allFindings;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
export function printAuditReport(findings, targetDir = process.cwd()) {
|
|
183
|
+
console.log(`\n${c.bold}ChillAgent Anti-Slop Auditor Report${c.reset}`);
|
|
184
|
+
console.log(`${c.dim}Scanned directory: ${targetDir}${c.reset}\n`);
|
|
185
|
+
|
|
186
|
+
if (findings.length === 0) {
|
|
187
|
+
console.log(`${c.green}${c.bold}✔ Clean Codebase!${c.reset} No AI slop patterns or generic cliches detected.`);
|
|
188
|
+
return;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
const highCount = findings.filter((f) => f.severity === 'HIGH').length;
|
|
192
|
+
const medCount = findings.filter((f) => f.severity === 'MEDIUM').length;
|
|
193
|
+
const lowCount = findings.filter((f) => f.severity === 'LOW').length;
|
|
194
|
+
|
|
195
|
+
console.log(
|
|
196
|
+
`Found ${c.bold}${findings.length} slop infractions${c.reset} ` +
|
|
197
|
+
`(${c.coral}${highCount} High${c.reset}, ${c.amber}${medCount} Medium${c.reset}, ${c.gray}${lowCount} Low${c.reset}):\n`
|
|
198
|
+
);
|
|
199
|
+
|
|
200
|
+
findings.forEach((f, idx) => {
|
|
201
|
+
const sevColor = f.severity === 'HIGH' ? c.coral : f.severity === 'MEDIUM' ? c.amber : c.gray;
|
|
202
|
+
const relFile = path.relative(targetDir, f.file);
|
|
203
|
+
|
|
204
|
+
console.log(
|
|
205
|
+
`${c.bold}#${idx + 1}${c.reset} [${sevColor}${f.severity}${c.reset}] ` +
|
|
206
|
+
`${c.cyan}${f.category}${c.reset} — ${c.bold}${f.name}${c.reset}`
|
|
207
|
+
);
|
|
208
|
+
console.log(` ${c.dim}Location:${c.reset} ${relFile}:${c.line}`);
|
|
209
|
+
console.log(` ${c.dim}Snippet:${c.reset} ${c.italic}"${f.snippet}"${c.reset}`);
|
|
210
|
+
console.log(` ${c.emerald}Fix:${c.reset} ${f.fix}\n`);
|
|
211
|
+
});
|
|
212
|
+
}
|