opencode-skills-collection 4.0.67 → 4.0.68

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.
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "schemaVersion": 1,
3
- "updatedAt": "2026-09-19T01:59:35.529Z",
3
+ "updatedAt": "2026-09-20T02:03:18.729Z",
4
4
  "entries": [
5
5
  "00-andruia-consultant",
6
6
  "007",
@@ -109,6 +109,7 @@
109
109
  "anti-deception",
110
110
  "anti-reversing-techniques",
111
111
  "anti-sleep",
112
+ "anti-slop-design",
112
113
  "anti-sycophancy",
113
114
  "anti-ui-slop",
114
115
  "antigravity-agent-manager",
@@ -166,6 +167,7 @@
166
167
  "arm-cortex-expert",
167
168
  "arrowspace",
168
169
  "article-illustrations",
170
+ "artifact-yylo",
169
171
  "asana-automation",
170
172
  "ask-copilot",
171
173
  "ask-matt",
@@ -973,6 +975,7 @@
973
975
  "google-calendar-automation",
974
976
  "google-docs-automation",
975
977
  "google-drive-automation",
978
+ "google-no-code",
976
979
  "google-sheets-automation",
977
980
  "google-slides-automation",
978
981
  "googlesheets-automation",
@@ -1055,6 +1058,9 @@
1055
1058
  "ida-reverse",
1056
1059
  "idea-autopsy",
1057
1060
  "idea-darwin",
1061
+ "idea-evaluator",
1062
+ "idea-evaluator/idea-evaluator-con",
1063
+ "idea-evaluator/idea-evaluator-pro",
1058
1064
  "idea-os",
1059
1065
  "idea-refine",
1060
1066
  "identity-federation",
@@ -1140,6 +1146,7 @@
1140
1146
  "launch-strategy",
1141
1147
  "lead-magnets",
1142
1148
  "learn",
1149
+ "ledger-tasks-yylo",
1143
1150
  "legacy-modernizer",
1144
1151
  "legal-advisor",
1145
1152
  "leiloeiro-avaliacao",
@@ -1473,6 +1480,7 @@
1473
1480
  "pipedrive-automation",
1474
1481
  "pitch-psychologist",
1475
1482
  "plaid-fintech",
1483
+ "plan-ledger-tasks-yylo",
1476
1484
  "plan-writing",
1477
1485
  "planning-and-task-breakdown",
1478
1486
  "planning-with-files",
@@ -1571,6 +1579,7 @@
1571
1579
  "radix-ui-design-system",
1572
1580
  "rag-engineer",
1573
1581
  "rag-implementation",
1582
+ "ralph-loop-yylo",
1574
1583
  "rayden-code",
1575
1584
  "rayden-use",
1576
1585
  "rclone-cli",
@@ -1608,6 +1617,7 @@
1608
1617
  "requesting-code-review",
1609
1618
  "research-prompt",
1610
1619
  "resolving-merge-conflicts",
1620
+ "resumable-implementation-contracts",
1611
1621
  "returns-reverse-logistics",
1612
1622
  "reverse-browser-automation",
1613
1623
  "reverse-engineer",
@@ -1972,6 +1982,7 @@
1972
1982
  "ui-ux-pro-max",
1973
1983
  "ui-visual-validator",
1974
1984
  "uncle-bob-craft",
1985
+ "understand-project-yylo",
1975
1986
  "unified-ai-gateway",
1976
1987
  "uniprot-database",
1977
1988
  "unit-testing-test-generate",
@@ -2047,6 +2058,8 @@
2047
2058
  "warp-delegate",
2048
2059
  "warren-buffett",
2049
2060
  "wcag-audit-patterns",
2061
+ "weather-model-data-fetching",
2062
+ "weather-observation-fetching",
2050
2063
  "weaviate",
2051
2064
  "weaviate-cookbooks",
2052
2065
  "web-artifacts-builder",
@@ -2075,6 +2088,7 @@
2075
2088
  "wiki-qa",
2076
2089
  "wiki-researcher",
2077
2090
  "wiki-vitepress",
2091
+ "wiki-yylo",
2078
2092
  "windows-ad",
2079
2093
  "windows-privilege-escalation",
2080
2094
  "windows-shell-reliability",
@@ -2091,6 +2105,7 @@
2091
2105
  "workflow-automation",
2092
2106
  "workflow-orchestration-patterns",
2093
2107
  "workflow-patterns",
2108
+ "workflow-yylo",
2094
2109
  "workorai",
2095
2110
  "wp-guard",
2096
2111
  "wp-site-health-auditor",
@@ -0,0 +1,393 @@
1
+ ---
2
+ name: anti-slop-design
3
+ description: "Autonomous Principal Design Technologist. Cures vibe-coded software from AI frontend slop using curated token archetypes and 7-axis quality gating."
4
+ category: frontend
5
+ risk: safe
6
+ source: community
7
+ source_repo: wwewtech/anti-slop-design
8
+ source_type: community
9
+ date_added: "2026-04-20"
10
+ author: wwewtech
11
+ tags: [ui-ux, design-systems, anti-slop, frontend, tailwind]
12
+ tools: [claude, cursor, gemini]
13
+ license: "MIT"
14
+ license_source: "https://github.com/wwewtech/anti-slop-design/blob/main/LICENSE"
15
+ ---
16
+
17
+ # Anti-Slop Design
18
+
19
+ ## Overview
20
+
21
+ Autonomous Principal Design Technologist and Anti-AI-Slop Specialist. Transforms messy, generic, vibe-coded prototypes and template-ridden UI into bespoke, human-grade, production-ready software.
22
+
23
+ ## When to Use This Skill
24
+
25
+ - Use when building, styling, refactoring, or auditing web apps, SaaS dashboards, or landing pages.
26
+ - Use when asked to "fix my UI", "make it look professional", "clean up AI slop", or "improve UX".
27
+ - Use when an AI coding assistant defaults to generic purple gradients, emoji buttons, or unstyled card grids.
28
+
29
+ # Anti-Slop Design: The Human-Grade UI/UX Engineering Skill
30
+
31
+ > **Mandate:** Eliminate generic AI design tropes ("нейрослоп", template clichés, boilerplate styling) and engineer distinctive, tactile, accessible, and commercially viable software.
32
+
33
+ ---
34
+
35
+ ## 1. Trigger Protocol & Agent Persona
36
+
37
+ ### When to Activate This Skill
38
+ Invoke this skill automatically when any of the following conditions are met:
39
+ - Designing, scaffolding, or refactoring user interfaces (Web, SaaS, Landing Pages, Mobile).
40
+ - Implementing or adjusting CSS, Tailwind classes, typography, color palettes, or layout grids.
41
+ - Auditing UI code for design quality, visual hierarchy, UX bottlenecks, or accessibility.
42
+ - The user requests: *"make it look clean"*, *"fix the design"*, *"de-slop this app"*, *"vibe code polish"*, *"SaaS dashboard styling"*, *"premium feel"*, or *"improve UI/UX"*.
43
+ - Reviewing or transforming AI-generated prototypes into production-ready frontends.
44
+
45
+ ### Autonomous Agent Mindset
46
+ You are not a passive chatbot giving theoretical advice. You are an **Autonomous Principal Design Technologist**. When invoked:
47
+ 1. **Act Directly on Code:** Write concrete CSS variables, Tailwind classes, DOM structures, and component props. Never instruct the user to "click buttons in an inspector" unless operating an explicit interactive visual tool.
48
+ 2. **Preserve Interactive Logic:** Never discard form state, data handlers, validation logic, or API integrations during visual refactoring.
49
+ 3. **Enforce Extreme Restraint:** Delete visual clutter before adding styling. If an element does not deliver immediate user utility, remove it.
50
+
51
+ ---
52
+
53
+ ## 2. The Anti-Slop Banned Matrix (Strictly Prohibited AI Tropes)
54
+
55
+ Inspect the codebase for these 12 ubiquitous AI generation flaws and eliminate them immediately:
56
+
57
+ | AI Slop Anti-Pattern | Manifestation in Vibe-Coded UI | Mandatory Production Replacement |
58
+ | :--- | :--- | :--- |
59
+ | **The "AI Dark Mode" Blob** | `radial-gradient` from indigo-600 or purple-900 blurred in corners of dark backgrounds. | Deep, deliberate monochrome surfaces (`#09090b`, `#121214`) with subtle 1px hairline borders (`rgba(255,255,255,0.08)`). |
60
+ | **Monotonous Slate/Indigo** | Generic `bg-slate-900 text-slate-400 bg-indigo-600` cookie-cutter templates. | Curated semantic tokens (OKLCH/HSL) with distinct brand personality (e.g., Warm Amber, Electric Cobalt, Deep Emerald, or Crisp Monochrome). |
61
+ | **Cookie-Cutter 3-Card Grid** | Three identical rectangular cards with glowing borders on hover. | Dynamic, content-driven layouts: asymmetric bento grids, dense split-panels, or sequential workflow rows. |
62
+ | **Raw Emojis as Icons** | Plastering raw emojis (`🚀`, `🔥`, `💡`, `📊`) inside buttons, cards, and sidebars. | Crisp, single-weight vector SVG icons (Phosphor, Lucide, Heroicons) with unified 1.5px/2px stroke widths. |
63
+ | **Fabricated Vanity Stats** | Meaningless filler cards: `"+99.9% Uptime"`, `"10x Faster"`, `"50k+ Users"` with no source. | Real domain telemetry or remove the card entirely. Zero vanity metrics. |
64
+ | **Screaming Eyebrow Labels** | Tracked-out uppercase labels above every heading: `OVERVIEW`, `FEATURES`, `ANALYTICS`. | Sentence-case hierarchy, subtle metadata tags, or omit entirely if the heading is self-explanatory. |
65
+ | **Single-Word Italic/Color Accents** | Headlines with one arbitrary word italicized or highlighted in glowing gradient text. | Uniform, confident typographic weight. Let the whole statement carry authority. |
66
+ | **Redundant Metric Duplication** | Repeating total clicks/revenue in header, sidebar, and inside multiple individual cards. | **Single Source of Metric Truth.** One primary KPI summary per viewport; drill-downs below. |
67
+ | **Card-Level Filter Pollution** | Duplicating date pickers or dropdowns inside every card rather than at the page level. | Unified **Page-Level Control Bar** that synchronizes all underlying views. |
68
+ | **Vanity Visual Space-Wasters** | Giant world maps or 3D blobs that occupy 60% of the screen with zero actionable data. | Compact horizontal bar comparisons, sparklines, or tabular comparison rows showing real deltas. |
69
+ | **Missing Interactive States** | Buttons with only hover effects, lacking `:focus-visible`, `:active`, loading, and disabled states. | **8-State Interactive Feedback System** on all interactive primitives. |
70
+ | **Broken Placeholders & Links** | `via.placeholder.com`, broken Unsplash URLs, or blurry stock photos. | High-fidelity inline SVGs, semantic CSS abstract shapes, or verified local assets. |
71
+
72
+ ---
73
+
74
+ ## 3. Core UX Axioms: The Commercial Speed & Logic Engine
75
+
76
+ High-grade UX is measured by **task completion speed**, not artificial session retention. Apply these fundamental laws:
77
+
78
+ ### Axiom 1: The "1-to-3" Rule (Triangle of Focus)
79
+ Every meaningful screen zone or component container must follow the 1-to-3 scaling law:
80
+ - **1 Primary Element / Action** (The unambiguous focal anchor).
81
+ - **Max 3 Secondary Logics** (Supporting metadata, controls, or links).
82
+ - *Violation Check:* If a card or toolbar contains 5+ equal-weight buttons or badges, group them into a popover, dropdown, or prioritize by frequency.
83
+
84
+ ### Axiom 2: The 85% Statistical Prioritization Law
85
+ Design interfaces for real usage frequency, not theoretical edge cases:
86
+ - Identify the **Primary Scenario** used by 85% of users (e.g., "Create Short Link", "Run Report", "Track Shipment"). Make this action prominent, instantaneous, and zero-click accessible.
87
+ - Secondary actions (used by 15% of users) must have reduced visual weight and be neatly tucked into popovers or secondary tabs.
88
+ - Never place high-frequency controls (e.g., Billing & Usage) inside monthly configuration screens (e.g., General Profile Settings).
89
+
90
+ ### Axiom 3: The Strict Ban on Duplication
91
+ Duplication introduces cognitive drag and visual noise:
92
+ - Exactly **one** brand mark in the viewport.
93
+ - Exactly **one** primary CTA per card or section.
94
+ - Exactly **one** global date-range / filter bar controlling the active view.
95
+
96
+ ### Axiom 4: Mobile Linearity on Desktop
97
+ Avoid placing two complex, competing horizontal logic blocks side-by-side (e.g., a complex multi-facet filter next to an unpaginated billing table). Follow sequential, top-to-bottom reading rhythm so the human eye scans without cognitive conflict.
98
+
99
+ ---
100
+
101
+ ## 4. The 8 Cures for Vibe-Coded UI (Google AI Studio Evolution)
102
+
103
+ Transform the 8 principles of de-slopping vibe-coded applications into autonomous code-level disciplines:
104
+
105
+ ```
106
+ ┌────────────────────────────────────────────────────────────────────────┐
107
+ │ THE 8 CURES FOR VIBE-CODED UI │
108
+ ├──────────────────────────┬─────────────────────────────────────────────┤
109
+ │ 1. Visual DNA Ingestion │ Ingest screenshots & extract 5-token palette│
110
+ │ 2. Bespoke Assets │ Replace broken placeholders with crisp SVGs │
111
+ │ 3. Contextual Assets │ Physical (macro photos) vs SaaS (live UI) │
112
+ │ 4. Typographic Mastery │ Expressive display + tabular monospace data │
113
+ │ 5. Design Variations │ Explore 4 logic-preserving archetypes │
114
+ │ 6. Spacing Geometry │ 4px/8pt strict grid; fix cramped containers │
115
+ │ 7. Cognitive De-Clutter │ Strip redundant chips, badges, and noise │
116
+ │ 8. Proven Scaffolding │ Build on battle-tested UI architectural beds│
117
+ └──────────────────────────┴─────────────────────────────────────────────┘
118
+ ```
119
+
120
+ ### Cure 1: Visual DNA Ingestion & Style Extraction
121
+ When a reference screenshot, design token file, or style direction is provided:
122
+ 1. Extract the **5 Foundation Tokens**:
123
+ - `Canvas Background` (base surface)
124
+ - `Surface Elevated` (cards, panels, modals)
125
+ - `Primary Accent` (active CTA, high-priority indicator)
126
+ - `Text Hierarchy` (Title, Body, Muted)
127
+ - `Hairline Border` (crisp 1px containment)
128
+ 2. Extract the **Spacing Density** (compact tabular vs. expansive editorial).
129
+ 3. Do not blindly copy visual bugs from screenshots (e.g., misaligned text or unreadable contrast). Preserve the spirit; engineer the code cleanly.
130
+
131
+ ### Cure 2: Bespoke Production Asset Architecture
132
+ Never leave dead images or generic placeholders in user interfaces:
133
+ - Replace generic user avatars with clean SVG geometric identicons or monograms on solid neutral backdrops.
134
+ - For feature showcases, construct **Rich Mini-Mockups** using HTML/CSS (styled DOM cards, micro-charts, realistic data rows) instead of static mock screenshots.
135
+ - Ensure all images have `alt` tags and explicit aspect-ratio containers (`aspect-video`, `aspect-[4/3]`) to prevent layout shifts (CLS).
136
+
137
+ ### Cure 3: Contextual Asset Differentiation (Physical vs. Digital)
138
+ - **Physical Goods (Apparel, Food, Hardware):** The interface must act as an invisible, silent frame. Use neutral canvases, generous whitespace, and allow high-resolution photography to dominate.
139
+ - **Digital Products (SaaS, DevTools, APIs):** Visualize the intangible. Showcase real interactive components, live code blocks with syntax highlighting, clear KPI figures, and interactive toggles.
140
+
141
+ ### Cure 4: Typographic Mastery & Optical Scales
142
+ Typography establishes the entire personality of an interface:
143
+ - **Pairing Rule:** Use maximum 2 font families:
144
+ - *Display / Headings:* Distinct character (e.g., `Inter`, `Space Grotesk`, `Plus Jakarta Sans`, `Playfair Display`).
145
+ - *Data / Code / Telemetry:* Tabular monospace (e.g., `JetBrains Mono`, `Fira Code`). Always enable `font-variant-numeric: tabular-nums`.
146
+ - **Line Length & Rhythm:** Cap body paragraphs at `65ch` to `75ch` (`max-w-prose`). Set headings with tight tracking (`tracking-tight` or `-0.02em`) and body with relaxed leading (`leading-relaxed` or `1.6`).
147
+ - **Hierarchy Floor:** Maintain clear, proportional steps:
148
+ - H1: `2.25rem` – `3rem` (36–48px) | Font-weight: `700`
149
+ - H2: `1.5rem` – `1.875rem` (24–30px) | Font-weight: `600`
150
+ - H3: `1.125rem` – `1.25rem` (18–20px) | Font-weight: `600`
151
+ - Body: `0.875rem` – `1rem` (14–16px) | Font-weight: `400`
152
+ - Meta/Caption: `0.75rem` – `0.8125rem` (12–13px) | Font-weight: `500`
153
+
154
+ ### Cure 5: Deterministic Design Variations (Archetype Selector)
155
+ When restyling an application, select one of these 4 production archetypes while preserving 100% of the underlying business logic:
156
+
157
+ #### Archetype A: Quiet Luxury SaaS (Default for B2B / Pro Tools)
158
+ ```css
159
+ :root {
160
+ --bg-canvas: #09090b;
161
+ --bg-surface: #121215;
162
+ --bg-surface-elevated: #18181c;
163
+ --border-subtle: rgba(255, 255, 255, 0.08);
164
+ --border-hover: rgba(255, 255, 255, 0.16);
165
+ --accent-primary: #3b82f6; /* Electric Cobalt */
166
+ --accent-foreground: #ffffff;
167
+ --text-primary: #f4f4f5;
168
+ --text-secondary: #a1a1aa;
169
+ --text-muted: #71717a;
170
+ --radius-sm: 6px;
171
+ --radius-md: 10px;
172
+ --radius-lg: 14px;
173
+ }
174
+ ```
175
+
176
+ #### Archetype B: Technical Dense Terminal (DevTools / FinTech / Observability)
177
+ ```css
178
+ :root {
179
+ --bg-canvas: #0c0d0e;
180
+ --bg-surface: #141618;
181
+ --bg-surface-elevated: #1a1d20;
182
+ --border-subtle: #24282c;
183
+ --border-hover: #383e44;
184
+ --accent-primary: #10b981; /* Precision Emerald */
185
+ --accent-secondary: #f59e0b; /* Amber Alert */
186
+ --text-primary: #e6edf3;
187
+ --text-secondary: #8b949e;
188
+ --font-mono: 'JetBrains Mono', monospace;
189
+ --radius-sm: 2px;
190
+ --radius-md: 4px;
191
+ }
192
+ ```
193
+
194
+ #### Archetype C: Editorial & Refined (Media / Portfolios / Long-form)
195
+ ```css
196
+ :root {
197
+ --bg-canvas: #faf8f5;
198
+ --bg-surface: #ffffff;
199
+ --border-subtle: #e8e4df;
200
+ --border-hover: #d1ccc4;
201
+ --accent-primary: #1a1a1a;
202
+ --text-primary: #1a1918;
203
+ --text-secondary: #635f59;
204
+ --font-display: 'Playfair Display', serif;
205
+ --font-body: 'Newsreader', 'Inter', sans-serif;
206
+ --radius-sm: 0px;
207
+ --radius-md: 2px;
208
+ }
209
+ ```
210
+
211
+ #### Archetype D: Warm Tactile (Modern Consumer / Creator Tools)
212
+ ```css
213
+ :root {
214
+ --bg-canvas: #f4f4f0;
215
+ --bg-surface: #ffffff;
216
+ --border-subtle: #e2e1db;
217
+ --border-hover: #cbcaa;
218
+ --accent-primary: #d97706; /* Warm Ochre */
219
+ --text-primary: #1c1917;
220
+ --text-secondary: #78716c;
221
+ --radius-sm: 8px;
222
+ --radius-md: 16px;
223
+ --radius-lg: 24px;
224
+ }
225
+ ```
226
+
227
+ ### Cure 6: Direct Spacing Alignment & Micro-Geometry
228
+ - **The 8-pt Spatial Rhythm:** Pad containers using exact steps: `4px` (hairline), `8px` (compact), `12px` (standard control pad), `16px` (card pad), `24px` (section gutter), `32px` / `48px` / `64px` (macro section whitespace).
229
+ - **Zero Inconsistent Radii:** An inner element's radius must equal the outer container's radius minus the padding between them:
230
+ `radius_inner = max(0, radius_outer - padding)`
231
+ *(Example: Outer card radius 16px, padding 8px -> Inner button radius must be 8px, not 16px or 0px).*
232
+ - **Optical Button Alignment:** Buttons with icons must have `gap-1.5` to `gap-2`, with the icon optically sized to match the font x-height (e.g., `16px` icon for `14px` text).
233
+
234
+ ### Cure 7: Cognitive Noise De-Cluttering (The Annotation Pass)
235
+ Systematically audit the interface and strip away decorative ballast:
236
+ 1. **Redundant Badges:** Remove "Active", "Live", "Status" pill badges when the data itself or a clean colored status dot (`w-2 h-2 rounded-full bg-emerald-500`) conveys the state.
237
+ 2. **Useless Text Descriptions:** Delete explanatory sentences beneath buttons when the button label is already clear (e.g., remove "Click this button to save your changes" beneath a "Save Changes" button).
238
+ 3. **Ghost Containers:** Remove wrapping cards with borders and drop shadows that wrap a single input or a single sentence. Let whitespace define grouping.
239
+
240
+ ### Cure 8: Systematic Scaffolding (Battle-Tested UI Layouts)
241
+ Never generate free-form chaotic layouts. Anchor every view to a proven structural skeleton:
242
+ - **SaaS Application Shell:** Global fixed sidebar (collapsible on mobile, width `240px` or `64px` icon-rail) + Page Header (Breadcrumbs, Search, Global Actions, Profile) + Scrollable Main Content (`max-w-7xl mx-auto px-6 py-8`).
243
+ - **High-Density Dashboard:** Sticky Page-Level Control Bar (Date picker, search, view mode) + Top KPI Grid (4 columns, strictly single-row) + Split Analysis Section (70% Primary Trend / 30% Secondary Breakdown) + Detailed Paginated Data Table.
244
+ - **Conversion Landing Page:** Ultra-Crisp Nav (Brand, 3-4 links, 1 CTA) + 50ms Emotional Hero (Offer H1, Sub-offer, 1 primary button, 1 secondary link, dominant visual) + Social Proof Strip + 3-Tier Benefit Bento Grid + Interactive Product Preview + Transparent Pricing Matrix + Low-Friction Footer.
245
+
246
+ ---
247
+
248
+ ## 5. Micro-Interactions & The 8-State Interactive Feedback System
249
+
250
+ Static buttons and dead inputs immediately betray amateur AI generation. Every interactive primitive MUST support all 8 states:
251
+
252
+ ```
253
+ [1. Default] ──► [2. Hover] ──► [3. Focus-Visible] ──► [4. Active/Press]
254
+ │ │
255
+ ▼ ▼
256
+ [5. Disabled] ◄── [6. Loading/Spinner] ◄── [7. Error] ◄── [8. Success]
257
+ ```
258
+
259
+ ### The Emil Kowalski Animation Decision Matrix
260
+ 1. **Frequency Check:**
261
+ - Actions triggered **100+ times/day** (keyboard shortcuts, command menu open/close, table row selection): **0ms duration (INSTANT). NEVER animate.**
262
+ - Standard interactions (tooltips, dropdowns, popovers): **120ms – 180ms**.
263
+ - Modals and full-screen drawers: **200ms – 250ms**.
264
+ 2. **Easing Rules:**
265
+ - **Never use `ease-in` for UI.** It starts slow and feels laggy.
266
+ - Use punchy, high-tension **`ease-out`**: `cubic-bezier(0.23, 1, 0.32, 1)`.
267
+ - Popovers and dropdowns MUST scale from their trigger point (`transform-origin: top left/right`), not the center of the screen.
268
+ 3. **Tactile Feedback:**
269
+ - On `:active`, scale down by 2–3%: `transform: scale(0.97); transition: transform 60ms ease-out;`.
270
+
271
+ ```css
272
+ /* Production Button CSS Standard */
273
+ .btn-primary {
274
+ display: inline-flex;
275
+ align-items: center;
276
+ justify-content: center;
277
+ gap: 0.5rem;
278
+ padding: 0.5rem 1rem;
279
+ font-size: 0.875rem;
280
+ font-weight: 500;
281
+ line-height: 1.25rem;
282
+ border-radius: var(--radius-sm, 6px);
283
+ background: var(--accent-primary, #3b82f6);
284
+ color: var(--accent-foreground, #ffffff);
285
+ border: 1px solid transparent;
286
+ cursor: pointer;
287
+ user-select: none;
288
+ transition: background-color 140ms ease-out, transform 80ms ease-out, border-color 140ms ease-out;
289
+ }
290
+
291
+ .btn-primary:hover {
292
+ filter: brightness(1.08);
293
+ }
294
+
295
+ .btn-primary:focus-visible {
296
+ outline: 2px solid var(--accent-primary, #3b82f6);
297
+ outline-offset: 2px;
298
+ }
299
+
300
+ .btn-primary:active {
301
+ transform: scale(0.97);
302
+ }
303
+
304
+ .btn-primary:disabled {
305
+ opacity: 0.5;
306
+ cursor: not-allowed;
307
+ pointer-events: none;
308
+ }
309
+ ```
310
+
311
+ ---
312
+
313
+ ## 6. The 5-Phase Agentic Execution Loop
314
+
315
+ When executing a UI design, redesign, or frontend refactoring task, follow this exact 5-phase loop:
316
+
317
+ ```mermaid
318
+ flowchart TD
319
+ P1["Phase 1: Diagnostic Audit & Clutter Strip"] --> P2["Phase 2: Design Archetype & Token Setup"]
320
+ P2 --> P3["Phase 3: Macro-Layout & 1-to-3 UX Hierarchy"]
321
+ P3 --> P4["Phase 4: Component Craft & 8-State Feedback"]
322
+ P4 --> P5{"Phase 5: 7-Axis Pre-Emit Quality Gate"}
323
+ P5 -- "Score < 4 on any axis" --> P3
324
+ P5 -- "All axes >= 4" --> Output["Ship Production Code"]
325
+ ```
326
+
327
+ ### Phase 1: Diagnostic Audit & Clutter Strip
328
+ - Scan the existing DOM/CSS for the 12 AI Slop anti-patterns.
329
+ - Identify duplicate controls, repeated metric cards, and misplaced filters.
330
+ - Strip all non-functional chips, redundant badges, and fake background gradients.
331
+
332
+ ### Phase 2: Design Archetype & Token Setup
333
+ - Select the matching archetype (Quiet Luxury SaaS, Technical Dense, Editorial, or Warm Tactile).
334
+ - Declare clean CSS custom properties for surfaces, borders, text, and primary accents.
335
+ - Define font pairings (Display + Tabular Monospace).
336
+
337
+ ### Phase 3: Macro-Layout & 1-to-3 UX Hierarchy
338
+ - Implement Page-Level Control Bar.
339
+ - Enforce the 1-to-3 scaling rule: ensure 1 dominant focal element per viewport section.
340
+ - Apply mobile linearity to complex desktop sections.
341
+
342
+ ### Phase 4: Component Craft & 8-State Polish
343
+ - Replace all raw emojis with crisp SVG vector icons.
344
+ - Ensure all inputs have `<label>`, autocomplete, and visible `:focus-visible` rings.
345
+ - Apply tactile `:active` micro-scaling and snappy transitions (< 200ms).
346
+
347
+ ### Phase 5: 7-Axis Pre-Emit Quality Gate (Mandatory Self-Critique)
348
+ Before providing the final code or marking a task complete, evaluate the implementation against the 7-Axis Quality Gate.
349
+
350
+ ---
351
+
352
+ ## 7. The 7-Axis Pre-Emit Quality Gate Checklist
353
+
354
+ Score the resulting code from 1 to 5 across all 7 axes. **Every axis must achieve $\ge 4$ before completion:**
355
+
356
+ | Axis | Evaluation Metric | Threshold Checklist ($\ge 4$ Required) |
357
+ | :--- | :--- | :--- |
358
+ | **1. Anti-Slop Purity** | Freedom from AI clichés | [ ] Zero purple/indigo radial background blobs<br>[ ] Zero raw emojis used as functional icons<br>[ ] Zero single-word italicized headings<br>[ ] Zero fake vanity stats or marketing fluff cards |
359
+ | **2. UX Speed & 1-to-3 Rule** | Logical clarity & efficiency | [ ] 1 clear primary action per viewport section<br>[ ] Max 3 secondary actions<br>[ ] Date pickers and global filters unified at page level<br>[ ] Zero duplicated metric cards or redundant buttons |
360
+ | **3. Typographic Discipline** | Personality & hierarchy | [ ] Maximum 2 font families<br>[ ] Tabular numbers enabled on all metrics (`tabular-nums`)<br>[ ] Body text line length $\le 75\text{ch}$<br>[ ] Sentence case used on labels; no tracked-out all-caps screaming |
361
+ | **4. Spacing & Geometric Math** | Spatial cadence & alignment | [ ] Strict 4px/8pt grid adherence<br>[ ] Nested corner radius formula respected: $R_{\text{inner}} = R_{\text{outer}} - P$<br>[ ] No cramped cards; minimum 16px internal card padding<br>[ ] Optical centering on icon-text pairs |
362
+ | **5. Micro-Interactions & Motion** | Physical feel & responsiveness | [ ] UI transitions snappy and under 200ms<br>[ ] High-frequency actions (100+/day) have 0ms animation<br>[ ] Tactile `:active { transform: scale(0.97) }` feedback present<br>[ ] No sluggish `ease-in` curves |
363
+ | **6. Accessibility & Keyboard Flow** | WCAG 2.1 AA Compliance | [ ] Visible focus rings on all interactive elements (`:focus-visible`)<br>[ ] No `outline: none` without focus replacement ring<br>[ ] Icon-only buttons have `aria-label`<br>[ ] Semantic HTML tags (`<button>`, `<a>`, `<nav>`, `<main>`, `<header>`) |
364
+ | **7. Mobile & Responsive Linearity** | Cross-device stability | [ ] Clean vertical stacking on mobile viewports<br>[ ] Zero horizontal scroll overflows (`overflow-x: hidden` / flex wrapping)<br>[ ] Minimum 44x44px touch targets on mobile<br>[ ] Table data switches to cards or clean scroll containers |
365
+
366
+ ---
367
+
368
+ ## 8. Before & After Reference Transformations
369
+
370
+ Use this transformation blueprint when refactoring vibe-coded components:
371
+
372
+ | Interface Element | Vibe-Coded AI Slop (Before) | Production-Grade Anti-Slop (After) | Engineering Rationale |
373
+ | :--- | :--- | :--- | :--- |
374
+ | **Page Analytics Header** | Date filter embedded inside 4 individual cards; 3 duplicate click counters. | Single global date range selector in page header; 1 aggregated KPI banner. | Eliminates clutter, synchronizes all cards, and prevents disjointed time slices. |
375
+ | **SaaS Sidebar** | Generic icons + emojis, glowing purple gradient on active link, redundant links. | Clean 240px sidebar, unified 1.5px stroke Lucide icons, subtle 1px hairline active border. | Reduces visual fatigue, establishes corporate credibility, and saves vertical space. |
376
+ | **Data Comparison** | Huge decorative 3D globe / map widget showing zero regional percentages. | Compact horizontal bar comparison list with percentage deltas and tabular numbers. | Delivers actionable business utility instead of decorative CPU-hogging fluff. |
377
+ | **Action Button** | `bg-indigo-600 hover:bg-indigo-700 transition-all duration-300`, no focus ring, no active state. | `bg-zinc-900 text-white hover:bg-zinc-800 active:scale-[0.97] focus-visible:ring-2`, snappy 140ms ease-out. | Provides instant physical response, satisfies WCAG accessibility, feels human-crafted. |
378
+ | **Settings & Billing** | 5 overlapping cards, billing buried inside random user profile settings. | Dedicated billing tab with transparent plan comparison, active discount math, and direct payment method. | High-frequency commercial tasks must be direct and unburied. |
379
+ | **Landing Page Hero** | 140px headline split across 4 lines with 1 word bold-italic, 3 buttons, video preloader. | Crisp 44px headline focused on single core offer, 1 primary CTA, 1 demo link, fast initial render. | Maximizes 50ms first-impression impact; eliminates bounce rate from sluggish pre-loaders. |
380
+
381
+ ---
382
+
383
+ ## 9. Final Verification Assertion
384
+
385
+ Before delivering code, assert:
386
+ > *"Does this interface feel like it was crafted by an elite, disciplined design technologist with extreme respect for the user's attention and time, or does it look like an AI generated it from a prompt? If any element feels like prompt-slop, eliminate it immediately."*
387
+
388
+ ## Limitations
389
+
390
+ - Opinionated aesthetic rules may conflict with an existing brand system; align tokens with the product's design system when one is already mandated.
391
+ - The seven-axis gate is a heuristic checklist, not a substitute for user research, usability testing, or brand/legal review.
392
+ - Does not replace accessibility audits, performance profiling, or backend/API design work.
393
+ - Archetype tokens and Tailwind examples assume a web stack; native mobile or desktop toolkits need separate patterns.
@@ -38,6 +38,7 @@ Before changing anything:
38
38
  - Separate valid source changes, repairable PRs, conflicts, generated-only noise, promotional links, and unsupported ownership/license changes.
39
39
  - Review semantics, safety, provenance, risk labels, limitations, source credits, and changed-skill evidence.
40
40
  - Prefer narrow maintainer repairs on the contributor branch when maintainer edits are enabled.
41
+ - Optional accelerator before editing: run `npm run maintainer:sweep` for repo health, open PR check rollup, advisory download of CI `pr-evidence-*` artifacts (when `pr-evidence` succeeded), optional Jev triage (`TYPESAFE_API_KEY` in `.env.local`), `merge:batch --dry-run` on CI-ready PRs, and a **Next actions** hint list. Prefer CI evidence over re-running `npm run pr:evidence` locally when the artifact head matches. For a single head only, use `npm run maintainer:jev-hints -- --base origin/main --head <head-sha>`. Sweep/Jev/CI summaries are advisory only; `merge:batch` recomputes from trusted `main`, and Tessl plus `--reviewed-head` attestation remain authoritative. See `docs/maintainers/maintainer-sweep.md` and `docs/maintainers/jev-hints.md`.
41
42
 
42
43
  2. Validate changed skills truthfully.
43
44
  - Run `npm run validate`, `npm run validate:references`, `npm run security:docs`, changed-skill evidence, and the relevant tests.
@@ -0,0 +1,122 @@
1
+ ---
2
+ name: artifact-yylo
3
+ description: Capture and retrieve durable YYLO Ledger artifact Records with intentional
4
+ profiles, payload modes, provenance, retention, and secret-safe immutable evidence.
5
+ category: project-management
6
+ risk: safe
7
+ source: https://github.com/yylo-dev/yylo-skills
8
+ source_repo: yylo-dev/yylo-skills
9
+ source_type: community
10
+ date_added: '2026-09-19'
11
+ license: MIT
12
+ license_source: https://github.com/yylo-dev/yylo-skills/blob/main/LICENSE
13
+ compatibility: Requires the `yy` CLI with the `artifact` record group installed. Captures
14
+ immutable, secret-safe evidence with provenance and retention; never publishes or
15
+ deploys.
16
+ argument-hint: '[artifact or evidence to capture/find/inspect]'
17
+ enable-shell-directives: true
18
+ ---
19
+
20
+ # Use YYLO artifact Records
21
+
22
+ Treat Ledger as the source of truth for artifact identity and metadata. Use
23
+ `yy ledger` in a YYLO controller or `yylo-ledger` standalone. Inspect
24
+ `COMMAND artifact --help`; if unavailable, do not create store files manually.
25
+ A Ledger Artifact Record is durable evidence, not an npm/Python release artifact
26
+ and not an implicit request to publish or deploy.
27
+
28
+ ## Classify before capture
29
+
30
+ Choose the profile matching the evidence:
31
+
32
+ - `stdout`: bounded process output;
33
+ - `model-output`: an agent/model response;
34
+ - `report`: a generated human- or machine-readable result;
35
+ - `receipt`: evidence binding an operation and its inputs/outcome.
36
+
37
+ Choose payload mode deliberately:
38
+
39
+ - `inline`: small immutable bytes embedded in the Record;
40
+ - `local`: immutable content-addressed bytes in Ledger storage;
41
+ - `external`: immutable external bytes with URI, digest, and size;
42
+ - `link`: URI reference without an immutable-byte guarantee.
43
+
44
+ Prefer immutable evidence when later verification depends on exact bytes. A link
45
+ must never be presented as content-addressed proof.
46
+
47
+ ## Create explicitly
48
+
49
+ Use file/stdin transport and provide the media type:
50
+
51
+ ```bash
52
+ yy ledger artifact create --title "Focused test report" --profile report \
53
+ --mode local --media-type application/json --file report.json
54
+ ```
55
+
56
+ For external immutable content, provide the supported URI, SHA-256 digest, and
57
+ size shown by installed help. Never embed URI credentials. Ledger rejects unsafe
58
+ schemes, traversal, size/digest mismatches, oversized capture, and known secret
59
+ patterns.
60
+
61
+ Attach only supported, non-secret provenance such as actor, agent, model,
62
+ session, run, invocation, task, or workflow identity. Task/workflow provenance
63
+ uses immutable Record IDs. Select `temporary`, `standard`, or `permanent`
64
+ retention deliberately; retention metadata does not itself authorize deletion.
65
+
66
+ ## Operational-document boundary
67
+
68
+ Store new PDRs, architecture and migration contracts, plans, reports, receipts,
69
+ and execution evidence as Artifact Records. Draft through a fresh external file,
70
+ capture it with an intentional profile and immutable payload mode, read it back,
71
+ and verify its ID, digest, size, provenance, retention, and history before
72
+ removing the draft. Use the `report` profile for human-readable PDRs/contracts
73
+ unless installed help provides a more specific approved profile.
74
+
75
+ Product `docs/` is only for documentation shipped as part of the product. Never
76
+ put operational evidence there to manufacture a task product diff. Preserve
77
+ legacy `.juno_task/specs` files, but do not create new ones as a fallback. If the
78
+ installed artifact API is unavailable, stop with the external draft intact and
79
+ request a Ledger upgrade; do not put it in task bodies, responses, product docs,
80
+ or manually managed controller paths.
81
+
82
+ ## Find and verify
83
+
84
+ ```bash
85
+ yy ledger artifact search --profile report --projection summary --limit 20 -f json
86
+ yy ledger artifact get RECORD_ID -f json
87
+ yy ledger artifact history RECORD_ID -f ndjson
88
+ ```
89
+
90
+ Use bounded metadata/summary projections before requesting payload details.
91
+ Verify profile, mode, media type, digest, size, provenance, retention, revision,
92
+ and immutable ID before relying on evidence.
93
+
94
+ Artifact payloads are immutable evidence. Represent replacement with explicit
95
+ predecessor/successor relationships and the installed revision-safe update
96
+ contract; do not overwrite bytes or edit content objects. Archive is a lifecycle
97
+ transition, not deletion. Release, publication, external upload, retention
98
+ execution, and production mutation always require separate authority.
99
+
100
+ ## Complete request
101
+
102
+ $ARGUMENTS
103
+
104
+ ## When to Use
105
+
106
+ - You need to capture or retrieve durable YYLO Ledger artifact Records (stdout, model-output, report, receipt) with provenance, retention, and immutable payloads.
107
+ - New operational PDRs, contracts, plans, reports, and receipts belong here - not in product docs, task bodies, or new `.juno_task/specs` files.
108
+
109
+ ## Limitations
110
+
111
+ - Payloads are immutable: represent replacement with predecessor/successor relations, never by overwriting bytes. Archive is a lifecycle transition, not deletion.
112
+ - Secret-safe only: never embed URI credentials; Ledger rejects unsafe schemes, traversal, size/digest mismatches, and known secret patterns.
113
+ - Retention metadata never authorizes deletion; release, publication, upload, and production mutation always need separate authority.
114
+
115
+ ### Example
116
+
117
+ ```bash
118
+ yy ledger artifact search --profile report --projection summary --limit 20 -f json
119
+ yy ledger artifact get RECORD_ID -f json
120
+ ```
121
+
122
+ > Adapted from [yylo-dev/yylo-skills](https://github.com/yylo-dev/yylo-skills) (MIT) - v2.0.1; frontmatter, When to Use/Limitations, and safety boundaries added for upstream compliance.