@ryuenn3123/agentic-senior-core 6.15.0 → 6.15.1
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/.agents/plugins/agentic-senior-core/.codex-plugin/plugin.json +1 -1
- package/.agents/plugins/agentic-senior-core/plugin.json +1 -1
- package/.agents/plugins/agentic-senior-core/skills/asc-ui/SKILL.md +61 -14
- package/gemini-extension.json +1 -1
- package/package.json +1 -1
- package/plugin.yaml +1 -1
|
@@ -66,20 +66,67 @@ AI frequently creates "localization slop" by mixing languages, fabricating awkwa
|
|
|
66
66
|
|
|
67
67
|
---
|
|
68
68
|
|
|
69
|
-
## 3. Visual
|
|
70
|
-
|
|
71
|
-
AI
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
- **
|
|
77
|
-
- **No
|
|
78
|
-
|
|
79
|
-
###
|
|
80
|
-
|
|
81
|
-
- **
|
|
82
|
-
- **
|
|
69
|
+
## 3. Visual Craft & Generative Layout Engineering
|
|
70
|
+
|
|
71
|
+
AI default interfaces suffer from **Distributional Convergence** (regression to the statistical average of training data). Without disciplined direction, models default to either the *AI Starter Pack* (purple gradients, 3 identical cards, floating drop shadows) or the *Sterile Default* (flat, depressing white wireframes with zero character).
|
|
72
|
+
|
|
73
|
+
Follow these design engineering heuristics to construct purposeful, high-craft digital interfaces:
|
|
74
|
+
|
|
75
|
+
### The Anti-Sterile & Anti-Template Rule
|
|
76
|
+
- **Never Replace Slop with Sterile Voids:** Stripping all decoration does not equal good design. An interface must possess tactile depth, distinct typographic rhythm, and clear surface relationships.
|
|
77
|
+
- **No Second-Order Template Clones:** Never force every screen into a trendy Bento Grid or dark-mode clone. Choose layout geometry derived strictly from the **data shape** and **user task**.
|
|
78
|
+
|
|
79
|
+
### 1. Form Follows Data Shape (Layout Inference)
|
|
80
|
+
Analyze the primary data model and user goal before declaring any container markup:
|
|
81
|
+
- **Quantitative / Comparative Data (Metrics, ledgers, logs, transactions):**
|
|
82
|
+
- *Archetype:* **Dense Data Matrix**.
|
|
83
|
+
- *Pattern:* High-density tables or compact list rows with sticky headers, hairline borders (`border-b border-border/40`), zebra striping or hover highlights, and right-aligned metrics using `tabular-nums font-mono`.
|
|
84
|
+
- *Forbidden:* Packaging individual transaction records into giant cards with fluffy padding.
|
|
85
|
+
- **Relational / Hierarchical Entities (Settings, file explorers, entity management):**
|
|
86
|
+
- *Archetype:* **Master-Detail Two-Pane Canvas**.
|
|
87
|
+
- *Pattern:* Contextual fixed-width left rail (navigation/entity list) paired with a fluid, high-density right canvas for inspection and action.
|
|
88
|
+
- **Procedural / Single-Task Flows (Onboarding, checkouts, complex multi-step forms):**
|
|
89
|
+
- *Archetype:* **Focused Single-Task Stream**.
|
|
90
|
+
- *Pattern:* Centered single-column container (`max-w-xl` / `max-w-2xl`) with progressive disclosure, clear step indicators, and zero peripheral sidebar noise to prevent distraction.
|
|
91
|
+
- **Temporal / Event-Driven Records (Audit logs, status updates, activity history):**
|
|
92
|
+
- *Archetype:* **Linear Timeline Ledger**.
|
|
93
|
+
- *Pattern:* Vertical line rail with timestamp anchors, compact status chips, and contextual user badges.
|
|
94
|
+
- **High-Impact Narrative / Showcase (Landing pages, project overviews):**
|
|
95
|
+
- *Archetype:* **Asymmetric Visual Anchor**.
|
|
96
|
+
- *Pattern:* 7-column editorial narrative anchor (heavy typography + primary action) offset against a 5-column interactive preview or live metric widget.
|
|
97
|
+
|
|
98
|
+
### 2. The Single Focal Anchor Principle (Anti-Cardocalypse)
|
|
99
|
+
- **Eliminate Equal-Weight Monotony:** Never place 3 or 4 cards with identical dimensions, identical icons, and identical visual weight side by side.
|
|
100
|
+
- **Establish One Primary Focal Point:** Every screen or section must possess exactly ONE visual hero that pulls the eye first (e.g., the primary telemetry chart, the key operational metric, or the main action trigger).
|
|
101
|
+
- **Subordinate Supporting Elements:** All surrounding widgets must intentionally recede: use lower contrast text (`text-muted-foreground`), lighter borders, or muted background surfaces (`bg-muted/40`).
|
|
102
|
+
|
|
103
|
+
### 3. Tactile Surface Craft & Stepped Tones (Beyond Drop Shadows)
|
|
104
|
+
Avoid excessive fuzzy drop shadows (`shadow-lg`, `shadow-xl`) that make UI float disconnected from reality. Build physical depth via border-driven architecture and stepped surfaces:
|
|
105
|
+
- **Stepped Surface Tones (3-Tier Depth):**
|
|
106
|
+
- *Base Canvas:* Neutral floor (`bg-slate-50` in light; `bg-zinc-950` / `bg-neutral-950` in dark).
|
|
107
|
+
- *Structural Containers / Cards:* Elevated surface (`bg-white` in light; `bg-zinc-900` / `bg-neutral-900` in dark).
|
|
108
|
+
- *Inset / Subdued Wells:* Recessed areas for search bars, code blocks, or secondary filters (`bg-slate-100/70` in light; `bg-zinc-800/40` in dark).
|
|
109
|
+
- **Hairline Alpha Borders:** Separate structural surfaces with crisp 1px borders using opacity: `border-slate-200/80` (light) or `border-zinc-800` / `border-white/[0.08]` (dark).
|
|
110
|
+
- **Physical Top-Edge Inset:** For dark surfaces, provide a crisp physical sheen using an inset highlight: `shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]` instead of exterior glows.
|
|
111
|
+
|
|
112
|
+
### 4. Color Discipline & The 60-30-10 Rule
|
|
113
|
+
- **Lock the Palette to 3-5 Tokens:** Never scatter disparate colors across cards.
|
|
114
|
+
- **60% Dominant Neutral:** Canvas background and large negative space (tinted neutral like slate, zinc, or warm stone; never stark dead `#000000` or `#FFFFFF`).
|
|
115
|
+
- **30% Structural Neutral:** Card surfaces, borders, navigation bars, and dividers.
|
|
116
|
+
- **10% Purposeful Accent:** Dedicated brand accent color.
|
|
117
|
+
- **Accent Exclusivity:** The accent hue is reserved strictly for interactive triggers (Primary CTA, active tab indicator, unread dot, selected checkbox). **NEVER** use the accent color as card wallpaper, gradient fills, or decorative borders.
|
|
118
|
+
|
|
119
|
+
### 5. Micro-Typography & Scannability
|
|
120
|
+
- **Weight Contrast Before Size Jumps:** Build visual hierarchy by combining font weight (`font-bold` vs `font-normal`) and tracking (`tracking-tight` on large headings; `tracking-normal` on body) before inflating font size to absurd dimensions.
|
|
121
|
+
- **Tabular Numerals Everywhere:** Every metric, balance, percentage, timestamp, and count **MUST** use `tabular-nums` (and preferably `font-mono` where appropriate) to prevent optical horizontal jitter when values update.
|
|
122
|
+
- **Eyebrow Micro-Labels:** Anchor section headers and data clusters with compact category tags: `text-[11px] font-semibold uppercase tracking-wider text-muted-foreground`.
|
|
123
|
+
|
|
124
|
+
### 6. The Banned AI Visual Starter Pack
|
|
125
|
+
Explicitly forbid these generic AI clichés:
|
|
126
|
+
- **No Purple-to-Cyan/Indigo Gradients:** Ban unprompted glowing violet/teal hero washes.
|
|
127
|
+
- **No Gratuitous Glassmorphism:** Never slap `backdrop-blur-md bg-white/10` across functional tables and forms where it ruins text contrast.
|
|
128
|
+
- **No Bouncy/Distracting Hover Scales:** Avoid `hover:scale-105` or springy transforms on utilitarian buttons. Use snappy, mechanical micro-feedback (`transition-colors duration-150` or `active:scale-[0.98]`).
|
|
129
|
+
- **No Meaningless Generic Badges:** Eliminate fake floating pills like "AI Powered" or generic "Beta" chips scattered for decoration.
|
|
83
130
|
|
|
84
131
|
---
|
|
85
132
|
|
package/gemini-extension.json
CHANGED
package/package.json
CHANGED
package/plugin.yaml
CHANGED