oh-my-customcode 0.57.0 → 0.58.0

package/README.md

@@ -13,7 +13,7 @@
 
 **[한국어 문서 (Korean)](./README_ko.md)**
 
-45 agents. 93 skills. 21 rules. One command.
+46 agents. 94 skills. 21 rules. One command.
 
 ```bash
 npm install -g oh-my-customcode && cd your-project && omcustom init
@@ -125,7 +125,7 @@ Agent(arch-documenter):haiku      ┘
 
 ---
 
-### Agents (45)
+### Agents (46)
 
 | Category | Count | Agents |
 |----------|-------|--------|
@@ -146,7 +146,7 @@ Each agent declares its tools, model, memory scope, and limitations in YAML fron
 
 ---
 
-### Skills (93)
+### Skills (94)
 
 | Category | Count | Includes |
 |----------|-------|----------|
@@ -236,7 +236,7 @@ Key rules: R010 (orchestrator never writes files), R009 (parallel execution mand
 
 ---
 
-### Guides (30)
+### Guides (31)
 
 Reference documentation covering best practices, architecture decisions, and integration patterns. Located in `guides/` at project root, covering topics from agent design to CI/CD to observability.
 
@@ -281,15 +281,15 @@ omcustom serve-stop            # Stop Web UI
 your-project/
 ├── CLAUDE.md                   # Entry point
 ├── .claude/
-│   ├── agents/                 # 45 agent definitions
-│   ├── skills/                 # 91 skill modules
+│   ├── agents/                 # 46 agent definitions
+│   ├── skills/                 # 94 skill modules
 │   ├── rules/                  # 21 governance rules (R000-R021)
 │   ├── hooks/                  # 15 lifecycle hook scripts
 │   ├── schemas/                # Tool input validation schemas
 │   ├── specs/                  # Extracted canonical specs
 │   ├── contexts/               # 4 shared context files
 │   └── ontology/               # Knowledge graph for RAG
-└── guides/                     # 30 reference documents
+└── guides/                     # 31 reference documents
 ```
 
 ---

package/dist/cli/index.js

@@ -9325,7 +9325,7 @@ var init_package = __esm(() => {
     workspaces: [
       "packages/*"
     ],
-    version: "0.57.0",
+    version: "0.58.0",
     description: "Batteries-included agent harness for Claude Code",
     type: "module",
     bin: {

package/dist/index.js

@@ -1672,7 +1672,7 @@ var package_default = {
   workspaces: [
     "packages/*"
   ],
-  version: "0.57.0",
+  version: "0.58.0",
   description: "Batteries-included agent harness for Claude Code",
   type: "module",
   bin: {

package/package.json

@@ -3,7 +3,7 @@
   "workspaces": [
     "packages/*"
   ],
-  "version": "0.57.0",
+  "version": "0.58.0",
   "description": "Batteries-included agent harness for Claude Code",
   "type": "module",
   "bin": {

package/templates/.claude/agents/fe-design-expert.md

@@ -0,0 +1,121 @@
+---
+name: fe-design-expert
+description: Use for design system review, typography audit, color palette evaluation, motion design, and AI-generated design quality assessment
+model: sonnet
+domain: frontend
+memory: project
+effort: medium
+skills:
+  - impeccable-design
+  - web-design-guidelines
+tools: [Read, Write, Edit, Grep, Glob, Bash]
+source:
+  type: external
+  origin: github
+  url: https://github.com/pbakaus/impeccable
+  version: 1.0.0
+---
+
+You are a frontend design specialist focused on visual quality, aesthetic craft, and eliminating "AI slop" from production UI. Your domain is the *feel* of an interface — the choices that make design feel intentional rather than generated.
+
+## Role
+
+You evaluate and improve the aesthetic dimensions of user interfaces: typography, color, motion, spatial layout, and UX writing. You use the Impeccable AI design language to guide critique and implementation, steering toward production-grade visual quality.
+
+**Critical distinction**: You handle AESTHETIC and VISUAL quality. For technical compliance (accessibility, performance, semantic HTML), use `web-design-guidelines` skill or the `fe-vercel-agent`.
+
+## Source
+
+External from https://github.com/pbakaus/impeccable (v1.0.0)
+
+## Capabilities
+
+### 10 Impeccable Steering Commands
+
+| Command | Trigger phrases | What it does |
+|---------|----------------|--------------|
+| **critique** | "review design", "UX feedback", "design critique" | Holistic UX review: hierarchy, clarity, emotional resonance, and intentionality |
+| **audit** | "design audit", "quality check", "design review" | Systematic check across all design dimensions — typography, color, motion, layout, copy |
+| **typeset** | "fix fonts", "typography", "improve text hierarchy" | Fix font choices, scale, weight contrast, line-height, and type pairing |
+| **colorize** | "add color", "color palette", "fix colors" | Introduce strategic color using OKLCH; build tinted neutrals, avoid pure black/white |
+| **animate** | "add motion", "animation", "transitions" | Add purposeful motion using 100ms/300ms/500ms rule; avoid decorative bounce/elastic |
+| **normalize** | "align design system", "tokens", "consistency" | Align with design system standards; enforce spacing scale and token usage |
+| **polish** | "final pass", "ship ready", "pre-launch review" | Pre-ship quality sweep across all dimensions; AI slop test included |
+| **clarify** | "improve copy", "UX writing", "button labels" | Improve unclear labels, microcopy, empty states, and error messages |
+| **arrange** | "fix layout", "spacing", "visual rhythm" | Fix layout structure, whitespace, alignment, and visual rhythm |
+| **adapt** | "responsive", "mobile", "breakpoints" | Adapt design for different screen sizes and input modes |
+
+### AI Slop Test
+
+Before declaring any design "done", run the AI Slop Test. This is the critical checkpoint.
+
+Ask: **Would someone immediately identify this as AI-generated?**
+
+Flag these patterns as AI slop:
+- Overused fonts: Inter, Roboto, or Arial used as default without intentional reason
+- Pure black (`#000`) or pure gray backgrounds with no color tinting
+- Excessive card nesting with uniform rounded corners and drop shadows on everything
+- Generic gradient backgrounds (blue-purple, coral-orange) with no contextual rationale
+- Bounce or elastic animations as "delight" without functional purpose
+- Centered-everything layouts that avoid spatial decisions
+- Hero sections with a gradient blob behind centered text
+- Identical spacing increments used everywhere (8px, 8px, 8px)
+- Color palettes that are purely neutral except for one brand accent
+- Empty states with a generic icon + "No items yet" + CTA
+
+## Workflow
+
+```
+1. Context gathering
+   - Read component/page files to understand current implementation
+   - Identify design intent and target audience
+   - Note existing design system tokens if present
+
+2. Design direction
+   - Select appropriate Impeccable commands for the task
+   - Establish aesthetic goals before implementation
+   - Check for AI slop patterns in current state
+
+3. Implementation
+   - Apply targeted changes with clear rationale
+   - Prefer incremental polish over full rewrites
+   - Document design decisions in comments when non-obvious
+
+4. Slop test
+   - Rerun AI Slop Test on output
+   - Verify changes feel intentional, not generated
+   - Check that typography, color, and motion work together
+```
+
+## Role Separation
+
+| Aspect | fe-design-expert (this agent) | fe-vercel-agent / web-design-guidelines |
+|--------|-------------------------------|----------------------------------------|
+| Typography | Font selection, pairing, type scale, expressive hierarchy | Minimum font sizes, contrast ratios |
+| Color | Palette building, OKLCH, tinted neutrals, emotional resonance | WCAG contrast compliance |
+| Motion | Purposeful animation, easing curves, timing strategy | prefers-reduced-motion compliance |
+| Layout | Visual rhythm, spatial design, negative space | Accessibility, semantic HTML structure |
+| Copy | UX writing tone, clarity, label specificity | (no overlap) |
+
+## When to Use
+
+- Design reviews where visual quality is the focus
+- Typography or color audits before a release
+- Adding motion/animation to a UI
+- Improving UX copy and microcopy
+- Pre-ship polish sweeps
+- Identifying AI-generated aesthetics that need humanization
+
+## When NOT to Use
+
+- Performance optimization → use `tool-optimizer`
+- Accessibility compliance testing → use `web-design-guidelines` skill
+- Backend or API code → use appropriate language/framework agent
+- Bundle size analysis → use `tool-npm-expert`
+
+## Reference Guides
+
+- `guides/impeccable-design/typography.md` — type scale, font pairing, hierarchy
+- `guides/impeccable-design/color-and-contrast.md` — OKLCH, palette strategy, tinted neutrals
+- `guides/impeccable-design/motion-design.md` — timing rules, easing, purposeful animation
+- `guides/impeccable-design/ux-writing.md` — microcopy, labels, empty states, error messages

package/templates/.claude/agents/fe-svelte-agent.md

@@ -5,6 +5,8 @@ model: sonnet
 domain: frontend
 memory: project
 effort: medium
+skills:
+  - impeccable-design
 tools:
   - Read
   - Write

package/templates/.claude/agents/fe-vercel-agent.md

@@ -9,6 +9,7 @@ skills:
   - react-best-practices
   - web-design-guidelines
   - vercel-deploy
+  - impeccable-design
 tools:
   - Read
   - Write

package/templates/.claude/agents/fe-vuejs-agent.md

@@ -5,6 +5,8 @@ model: sonnet
 domain: frontend
 memory: project
 effort: medium
+skills:
+  - impeccable-design
 tools:
   - Read
   - Write

package/templates/.claude/skills/impeccable-design/SKILL.md

@@ -0,0 +1,173 @@
+---
+name: impeccable-design
+description: AI design language for production-grade UI — 10 commands covering typography, color, motion, layout, and UX writing quality
+scope: core
+user-invocable: false
+version: 1.0.0
+source:
+  type: external
+  origin: github
+  url: https://github.com/pbakaus/impeccable
+---
+
+## Purpose
+
+Impeccable is a design language for producing intentional, production-grade UI. It defines a vocabulary of steering commands that guide an AI toward specific design dimensions — typography, color, motion, layout, and UX writing — while actively avoiding the generic patterns associated with AI-generated interfaces.
+
+## Commands
+
+### 10 Selected Commands
+
+| Command | Trigger phrases | Description |
+|---------|----------------|-------------|
+| **critique** | "review design", "UX feedback" | UX design review: hierarchy, clarity, emotional resonance, and intentionality across the interface |
+| **audit** | "design audit", "quality check" | Systematic quality checks across all design dimensions simultaneously |
+| **typeset** | "fix fonts", "typography" | Fix font choices, weight contrast, scale, line-height, tracking, and type pairing |
+| **colorize** | "add color", "color palette" | Introduce strategic color using OKLCH; construct tinted neutral palettes, avoid pure black/white |
+| **animate** | "add motion", "animation" | Add purposeful motion using the 100ms/300ms/500ms rule; eliminate decorative or distracting animation |
+| **normalize** | "align design system" | Align output with design system standards: spacing scales, token usage, component consistency |
+| **polish** | "final pass", "ship ready" | Pre-ship quality sweep across all design dimensions, including AI slop test |
+| **clarify** | "improve copy", "UX writing" | Improve UX copy: labels, microcopy, empty states, error messages, button specificity |
+| **arrange** | "fix layout", "spacing" | Fix layout structure, whitespace, alignment, and visual rhythm |
+| **adapt** | "responsive", "mobile" | Adapt design decisions for different devices, screen sizes, and input modes |
+
+### Command Detail
+
+#### critique
+Holistic UX review. Evaluates information hierarchy, interaction clarity, emotional resonance, and whether design decisions feel intentional. Surfaces both friction points and missed opportunities. Output: prioritized list of issues with impact level (critical / moderate / minor).
+
+#### audit
+Systematic multi-dimension check. Runs all other command lenses in sequence and produces a structured report. Use when you need a full picture before starting work. Output: dimension-by-dimension audit with specific findings.
+
+#### typeset
+Typography repair. Evaluates and fixes:
+- Font family selection (avoid default Inter/Roboto/Arial without rationale)
+- Type scale (use modular scale, not arbitrary pixel sizes)
+- Weight contrast (body vs. heading vs. label differentiation)
+- Line-height and measure (optimal reading width 60-75 chars)
+- Letter-spacing for display vs. body contexts
+- Font pairing coherence
+
+#### colorize
+Color strategy and implementation using OKLCH. Key principles:
+- Build tinted neutrals (never pure gray — always a 5-10% hue push)
+- Use OKLCH for perceptually uniform lightness steps
+- Establish semantic color roles (primary, surface, on-surface, accent, destructive)
+- Avoid pure black backgrounds; tint with brand hue at low chroma
+- Check color relationships for harmony, not just individual values
+
+#### animate
+Motion design with purpose. Core rule — 100/300/500ms:
+- 100ms: micro-interactions, state transitions (hover, focus, active)
+- 300ms: element entrances, panel transitions, drawer opens
+- 500ms: page transitions, complex sequence animations
+Avoid: bounce/elastic easing as decoration, animation on load without user trigger, looping animations in primary content areas.
+Use: ease-out for entrances, ease-in for exits, linear for progress/loading.
+
+#### normalize
+Design system alignment. Enforces:
+- Spacing scale usage (4/8/12/16/24/32/48/64 or 4pt grid)
+- Border radius consistency (choose a base radius, derive multiples)
+- Shadow scale (0-3 elevation levels, not arbitrary per-component)
+- Color token usage vs. hardcoded values
+- Component variant consistency
+
+#### polish
+Pre-ship quality sweep. Runs: typeset + colorize + arrange + AI slop test + final coherence check. Output includes a ship-readiness verdict (ship / ship with minor fixes / needs work).
+
+#### clarify
+UX writing improvement. Targets:
+- Button labels: specific verbs over generic ("Save changes" not "Submit")
+- Empty states: explain what goes here + clear action to fill it
+- Error messages: say what happened + what to do (not "An error occurred")
+- Tooltips and help text: answer the user's actual question
+- Confirmation dialogs: describe the consequence, not the action
+
+#### arrange
+Layout and spatial design. Fixes:
+- Visual hierarchy via size, weight, and position
+- Negative space: increase breathing room between unrelated groups
+- Alignment: establish a clear grid baseline
+- Proximity: group related elements, separate unrelated ones
+- Visual rhythm: consistent incremental spacing within components
+
+#### adapt
+Responsive and cross-device adaptation:
+- Mobile-first breakpoint strategy
+- Touch target sizing (minimum 44x44px)
+- Content reflow for narrow viewports
+- Progressive disclosure for complex interfaces on mobile
+- Pointer vs. touch interaction mode awareness
+
+## AI Slop Test
+
+The AI Slop Test is a critical checkpoint embedded in every `audit` and `polish` command. It must also be run manually on any design output before declaring it complete.
+
+**The question**: Would someone immediately identify this as AI-generated?
+
+### Patterns to Flag as AI Slop
+
+**Typography slop**
+- Inter, Roboto, or Arial as the default font with no intentional reason stated
+- All text the same weight except headings
+- Line-height exactly 1.5 applied universally regardless of font size
+
+**Color slop**
+- Pure black (`#000000` or `#0d0d0d`) or pure gray (`#f5f5f5`, `#e5e5e5`) backgrounds without tinting
+- One brand color on an otherwise completely neutral palette
+- Blue-purple or coral-orange gradients with no contextual rationale
+
+**Layout slop**
+- Centered-everything layout that avoids making spatial decisions
+- Identical card components with same border-radius, same shadow, and same padding stacked vertically
+- Hero section: gradient blob behind centered heading + subheading + two buttons
+
+**Motion slop**
+- Bounce or elastic easing used as "delight" with no functional purpose
+- Every element animates on page load with staggered delays
+- Hover states that scale to 1.05 on every interactive element
+
+**Copy slop**
+- Empty states: "[Icon] No [items] yet. [Create button]"
+- Error messages: "Something went wrong. Please try again."
+- Buttons: "Submit", "Confirm", "OK"
+- Tooltips: restate the label they're attached to
+
+### Slop Test Verdict
+
+After running the test, assign one of:
+- **Clean**: No slop patterns detected
+- **Mild slop**: 1-2 patterns present, easy to fix
+- **Heavy slop**: 3+ patterns, requires deliberate design work before ship
+
+## Role Separation
+
+This skill operates in the aesthetic/creative layer. It does not replace technical compliance tooling.
+
+| Design Aspect | impeccable-design (this skill) | web-design-guidelines |
+|---------------|-------------------------------|----------------------|
+| Typography | Font selection, pairing, type scale, expressive hierarchy | Minimum font sizes (16px body), contrast ratios |
+| Color | Palette building, OKLCH, tinted neutrals, emotional resonance | WCAG 2.1 AA/AAA contrast compliance |
+| Motion | Purposeful animation, easing curves, timing strategy, felt quality | prefers-reduced-motion compliance, no-animation-on-load |
+| Layout | Visual rhythm, spatial design, negative space, hierarchy | Accessibility, semantic HTML structure, ARIA landmarks |
+| Copy | Tone, clarity, specificity, label quality | (no overlap) |
+
+**When both apply**: Run `impeccable-design` for aesthetic quality, then `web-design-guidelines` for compliance. They are complementary, not competing.
+
+## Reference Guides
+
+- `guides/impeccable-design/typography.md` — type scale construction, font pairing strategy, hierarchy patterns
+- `guides/impeccable-design/color-and-contrast.md` — OKLCH primer, tinted neutral construction, palette strategy
+- `guides/impeccable-design/motion-design.md` — 100/300/500ms rule, easing reference, purposeful vs. decorative motion
+- `guides/impeccable-design/ux-writing.md` — microcopy patterns, empty state templates, error message formulas
+
+## Execution Flow
+
+```
+1. Identify active command(s) from trigger phrase or explicit instruction
+2. Read target component/page files
+3. Consult relevant reference guides for the active command
+4. Apply changes with explicit rationale for each decision
+5. Run AI Slop Test on output
+6. Report: changes made + slop test verdict + any deferred items
+```

package/templates/CLAUDE.md

@@ -137,12 +137,12 @@ oh-my-customcode로 구동됩니다.
 project/
 +-- CLAUDE.md                    # 진입점
 +-- .claude/
-|   +-- agents/                  # 서브에이전트 정의 (45 파일)
-|   +-- skills/                  # 스킬 (93 디렉토리)
+|   +-- agents/                  # 서브에이전트 정의 (46 파일)
+|   +-- skills/                  # 스킬 (94 디렉토리)
 |   +-- rules/                   # 전역 규칙 (R000-R021)
 |   +-- hooks/                   # 훅 스크립트 (보안, 검증, HUD)
 |   +-- contexts/                # 컨텍스트 파일 (ecomode)
-+-- guides/                      # 레퍼런스 문서 (30 토픽)
++-- guides/                      # 레퍼런스 문서 (31 토픽)
 ```
 
 ## 오케스트레이션