atris 3.74.3 → 3.74.5
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/FOR_AGENTS.md +12 -12
- package/atris/AGENTS.md +7 -7
- package/atris/CLAUDE.md +10 -10
- package/atris/policies/atris-backend.md +1 -1
- package/atris/policies/atris-design.md +71 -71
- package/atris/policies/design-seed.md +28 -28
- package/atris/policies/writing.md +1 -1
- package/atris/skills/apps/SKILL.md +3 -3
- package/atris/skills/atris-feedback/SKILL.md +2 -2
- package/atris/skills/autopilot/SKILL.md +10 -10
- package/atris/skills/blocks/SKILL.md +16 -16
- package/atris/skills/calendar/SKILL.md +1 -1
- package/atris/skills/clawhub/atris/SKILL.md +4 -4
- package/atris/skills/clawhub/philosophy-of-work/SKILL.md +7 -7
- package/atris/skills/create-app/SKILL.md +18 -18
- package/atris/skills/create-member/SKILL.md +11 -11
- package/atris/skills/design/SKILL.md +1 -1
- package/atris/skills/drive/SKILL.md +25 -25
- package/atris/skills/email-agent/SKILL.md +11 -11
- package/atris/skills/endgame/SKILL.md +33 -33
- package/atris/skills/magic-inbox/SKILL.md +15 -15
- package/atris/skills/notion/SKILL.md +1 -1
- package/atris/skills/ramp/SKILL.md +7 -7
- package/atris/skills/research-search/SKILL.md +7 -7
- package/atris/skills/slides/SKILL.md +7 -7
- package/atris/skills/tidy/SKILL.md +11 -11
- package/atris/skills/wake/SKILL.md +11 -11
- package/atris/skills/writing/SKILL.md +5 -5
- package/atris/team/_template/SOUL.md +3 -3
- package/atris/team/brainstormer/MEMBER.md +2 -2
- package/atris/team/launcher/MEMBER.md +2 -2
- package/atris/team/mission-lead/MISSION.md +7 -7
- package/atris/team/opus-overnight/MISSION.md +16 -16
- package/atris/team/opus-overnight/STEERING.md +5 -5
- package/atris.md +9 -0
- package/bin/atris.js +16 -3
- package/commands/campaign.js +17 -2
- package/commands/card.js +19 -12
- package/commands/engine.js +92 -17
- package/commands/gm.js +30 -0
- package/commands/idea.js +263 -0
- package/commands/init.js +11 -2
- package/commands/land.js +39 -18
- package/commands/mission.js +4 -3
- package/commands/ninety-nine.js +288 -0
- package/commands/one-lap.js +46 -27
- package/commands/reel.js +12 -7
- package/commands/sync.js +10 -2
- package/lib/campaign-keep.js +23 -8
- package/lib/campaign-loop.js +24 -5
- package/lib/claude-boot-block.js +7 -4
- package/lib/engine-registry.js +139 -1
- package/lib/fleet.js +11 -2
- package/lib/gm-bet.js +338 -34
- package/lib/gm-phone-page.js +325 -33
- package/lib/gm-phone.js +5 -1
- package/lib/gm-season.js +14 -0
- package/lib/headless-chrome.js +39 -0
- package/lib/idea-gate.js +33 -0
- package/lib/idea-inbox.js +220 -0
- package/lib/idea-ledger.js +196 -0
- package/lib/idea-tick.js +384 -0
- package/lib/known-commands.js +1 -1
- package/lib/member-engine.js +1 -0
- package/lib/ninety-nine-sync.js +156 -0
- package/lib/ninety-nine.js +247 -0
- package/lib/opening-lines.js +94 -0
- package/lib/roster-markdown.js +39 -1
- package/lib/roster-models.js +1 -1
- package/lib/roster-swap.js +353 -0
- package/lib/spawn-env.js +29 -2
- package/lib/wish-audit.js +14 -0
- package/lib/yes-lock.js +358 -241
- package/lib/zen-apply.js +5 -3
- package/lib/zen.js +13 -1
- package/package.json +1 -1
- package/templates/business-starter/CLAUDE.md +7 -7
- package/templates/business-starter/MAP.md +1 -1
- package/templates/business-starter/TODO.md +1 -1
- package/templates/business-starter/atris.md +2 -2
- package/templates/business-starter/context/README.md +6 -6
- package/templates/business-starter/context/live-workspace.md +1 -1
- package/templates/business-starter/goals.md +1 -1
- package/templates/business-starter/instructions.md +1 -1
- package/templates/business-starter/memory.md +4 -4
- package/templates/business-starter/persona.md +3 -3
- package/templates/business-starter/policies/LESSONS.md +1 -1
- package/templates/business-starter/reports/README.md +1 -1
- package/templates/business-starter/skills/README.md +1 -1
- package/templates/business-starter/team/README.md +1 -1
- package/templates/business-starter/team/START_HERE.md +1 -1
- package/templates/business-starter/team/_template/SOUL.md +3 -3
- package/templates/business-starter/team/comms/SOUL.md +2 -2
- package/templates/business-starter/team/ops/SOUL.md +4 -4
- package/templates/business-starter/team/research/SOUL.md +3 -3
- package/templates/business-starter/wiki/index.md +1 -1
- package/templates/research-canonical/CLAUDE.md +7 -7
- package/templates/research-canonical/MAP.md +1 -1
- package/templates/research-canonical/TODO.md +1 -1
- package/templates/research-canonical/atris.md +2 -2
- package/templates/research-canonical/context/README.md +8 -8
- package/templates/research-canonical/context/live-workspace.md +1 -1
- package/templates/research-canonical/goals.md +2 -2
- package/templates/research-canonical/instructions.md +1 -1
- package/templates/research-canonical/memory.md +4 -4
- package/templates/research-canonical/persona.md +1 -1
- package/templates/research-canonical/policies/LESSONS.md +1 -1
- package/templates/research-canonical/reports/README.md +1 -1
- package/templates/research-canonical/skills/README.md +1 -1
- package/templates/research-canonical/team/README.md +1 -1
- package/templates/research-canonical/team/eval/SOUL.md +1 -1
- package/templates/research-canonical/team/experiment/SOUL.md +2 -2
- package/templates/research-canonical/team/hypothesis/SOUL.md +3 -3
- package/templates/research-canonical/team/literature/SOUL.md +2 -2
- package/templates/research-canonical/wiki/briefs/research-program.md +1 -1
- package/templates/research-canonical/wiki/index.md +1 -1
- package/utils/auth.js +1 -0
package/FOR_AGENTS.md
CHANGED
|
@@ -6,7 +6,7 @@ Chat evaporates. Context dies every session. "Done" means nothing without proof.
|
|
|
6
6
|
|
|
7
7
|
**Atris is a home for agents.**
|
|
8
8
|
|
|
9
|
-
Not a wrapper. Not a prompt pack. An operating system for work
|
|
9
|
+
Not a wrapper. Not a prompt pack. An operating system for work: open source bible, proof on disk, humans optional until accept.
|
|
10
10
|
|
|
11
11
|
---
|
|
12
12
|
|
|
@@ -14,16 +14,16 @@ Not a wrapper. Not a prompt pack. An operating system for work — open source b
|
|
|
14
14
|
|
|
15
15
|
| Pain | Atris fix |
|
|
16
16
|
|------|-----------|
|
|
17
|
-
| Blind every session | `atris/MAP.md
|
|
18
|
-
| Work lost in chat | `atris task
|
|
19
|
-
| No contract for "good" | `atris/atris.md
|
|
17
|
+
| Blind every session | `atris/MAP.md`: file:line index, MAP-first |
|
|
18
|
+
| Work lost in chat | `atris task`: durable tasks, claims, proof ledger |
|
|
19
|
+
| No contract for "good" | `atris/atris.md`: boot → plan → do → review |
|
|
20
20
|
| Can't hand off | Next agent reads disk, not your transcript |
|
|
21
|
-
| Humans don't trust you | `atris task ready --proof "..."
|
|
21
|
+
| Humans don't trust you | `atris task ready --proof "..."`: verifiable receipts |
|
|
22
22
|
|
|
23
23
|
```text
|
|
24
24
|
Philosophy (how work should run)
|
|
25
25
|
→ Open-source framework (atris.md, CLI, skills)
|
|
26
|
-
→ School / cloud (optional
|
|
26
|
+
→ School / cloud (optional, humans help design YOUR system)
|
|
27
27
|
```
|
|
28
28
|
|
|
29
29
|
You get the framework free. Your human gets the school if they want it.
|
|
@@ -66,11 +66,11 @@ approve-or-change actions without weakening any proof or human approval gate.
|
|
|
66
66
|
|
|
67
67
|
## Rules that make you trustworthy
|
|
68
68
|
|
|
69
|
-
1. **MAP before grep
|
|
70
|
-
2. **Task before edit
|
|
71
|
-
3. **Small diffs
|
|
72
|
-
4. **Proof over promises
|
|
73
|
-
5. **No parallel brain
|
|
69
|
+
1. **MAP before grep**: read `atris/MAP.md`, then search once and update the map
|
|
70
|
+
2. **Task before edit**: claim work; leave objective + proof on disk
|
|
71
|
+
3. **Small diffs**: another agent must trust your change
|
|
72
|
+
4. **Proof over promises**: if you can't verify it, say so
|
|
73
|
+
5. **No parallel brain**: don't invent doctrine in chat; write it where the next agent reads
|
|
74
74
|
|
|
75
75
|
---
|
|
76
76
|
|
|
@@ -92,4 +92,4 @@ After your first session, run `atris recap` so the next agent can see the win.
|
|
|
92
92
|
|
|
93
93
|
Open source: [github.com/atrislabs/atris](https://github.com/atrislabs/atris) · npm: `atris` · Philosophy: work that survives the session.
|
|
94
94
|
|
|
95
|
-
|
|
95
|
+
*An agent who tried it.*
|
package/atris/AGENTS.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# AGENTS.md
|
|
1
|
+
# AGENTS.md: atris_team
|
|
2
2
|
|
|
3
3
|
Instructions for coding agents working inside this repository.
|
|
4
4
|
|
|
@@ -75,12 +75,12 @@ wiki, or `atris/atris.md`, then regenerate this adapter if needed.
|
|
|
75
75
|
|
|
76
76
|
## Repo Layout
|
|
77
77
|
|
|
78
|
-
- `bin/atris.js
|
|
79
|
-
- `commands
|
|
80
|
-
- `lib
|
|
81
|
-
- `utils
|
|
82
|
-
- `atris.md
|
|
83
|
-
- `atris/atris.md
|
|
78
|
+
- `bin/atris.js`: CLI entrypoint + routing + natural-language entry.
|
|
79
|
+
- `commands/`: most command implementations.
|
|
80
|
+
- `lib/`: journal/task/file helpers (`journal`, `file-ops`, `state-detection`).
|
|
81
|
+
- `utils/`: auth/API/config/update-check and cloud execution helpers.
|
|
82
|
+
- `atris.md`: master spec template copied into user projects.
|
|
83
|
+
- `atris/atris.md`: workspace protocol/backbone.
|
|
84
84
|
|
|
85
85
|
## Notes
|
|
86
86
|
|
package/atris/CLAUDE.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
# CLAUDE.md
|
|
1
|
+
# CLAUDE.md: Atris Project Instructions
|
|
2
2
|
|
|
3
3
|
You are in an **Atris-managed project**.
|
|
4
4
|
|
|
5
|
-
## FIRST MESSAGE
|
|
5
|
+
## FIRST MESSAGE: MANDATORY
|
|
6
6
|
|
|
7
7
|
**Before responding to the user's first message, run this command and show the output:**
|
|
8
8
|
|
|
@@ -54,14 +54,14 @@ Do not write new operating doctrine here first. Add it to Atris policy, skills,
|
|
|
54
54
|
|
|
55
55
|
## Core Files
|
|
56
56
|
|
|
57
|
-
- `atris/MAP.md
|
|
58
|
-
- `atris task
|
|
59
|
-
- `.atris/state/tasks.projection.json
|
|
60
|
-
- `atris/TODO.md
|
|
61
|
-
- `atris/logs/YYYY/YYYY-MM-DD.md
|
|
62
|
-
- `atris/wiki/STATUS.md
|
|
63
|
-
- `atris/wiki/index.md
|
|
64
|
-
- `atris/atris.md
|
|
57
|
+
- `atris/MAP.md`: navigation (use file:line references)
|
|
58
|
+
- `atris task`: current tasks, claims, dialogue, and proof
|
|
59
|
+
- `.atris/state/tasks.projection.json`: readable task projection for UIs/agents
|
|
60
|
+
- `atris/TODO.md`: rendered/legacy task view only
|
|
61
|
+
- `atris/logs/YYYY/YYYY-MM-DD.md`: journal (Inbox + Completed)
|
|
62
|
+
- `atris/wiki/STATUS.md`: current wiki health and next ingest targets
|
|
63
|
+
- `atris/wiki/index.md`: local knowledge index
|
|
64
|
+
- `atris/atris.md`: protocol/spec
|
|
65
65
|
|
|
66
66
|
## Default Loop
|
|
67
67
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# atris-design.md
|
|
1
|
+
# atris-design.md: frontend aesthetics
|
|
2
2
|
|
|
3
3
|
> ai-generated ui has a look. you know it when you see it. this policy helps you not make that.
|
|
4
4
|
|
|
@@ -13,33 +13,33 @@ models default to safe choices because that's what dominates training data. with
|
|
|
13
13
|
- zero animation
|
|
14
14
|
- flat, lifeless backgrounds
|
|
15
15
|
|
|
16
|
-
this is the "distribution center"
|
|
16
|
+
this is the "distribution center": statistically average, aesthetically dead.
|
|
17
17
|
|
|
18
18
|
---
|
|
19
19
|
|
|
20
20
|
## vocabulary is the lever
|
|
21
21
|
|
|
22
|
-
designers get better results from AI than engineers do. not because they're more creative
|
|
22
|
+
designers get better results from AI than engineers do. not because they're more creative, but because they own the **language of craft**. an engineer says "make it look nice." a designer says "tighten the vertical rhythm, increase negative space, make the hierarchy bolder here and quieter there."
|
|
23
23
|
|
|
24
24
|
the model can only aim at the words you give it. **name the move you want, precisely, in craft vocabulary.** vague prompts produce vague output.
|
|
25
25
|
|
|
26
26
|
core terms to use when directing AI:
|
|
27
|
-
- **vertical rhythm
|
|
28
|
-
- **negative space
|
|
29
|
-
- **bolder / quieter
|
|
30
|
-
- **affordances
|
|
31
|
-
- **meta-design
|
|
32
|
-
- **conviction
|
|
27
|
+
- **vertical rhythm**: spacing consistency down the page, locked to a baseline grid
|
|
28
|
+
- **negative space**: intentional emptiness as a design element, not absence
|
|
29
|
+
- **bolder / quieter**: relative emphasis, not absolute size
|
|
30
|
+
- **affordances**: visual cues that signal interaction (and now: agentic affordances for AI users)
|
|
31
|
+
- **meta-design**: designing the *system* of design, not just one screen
|
|
32
|
+
- **conviction**: committing to a global maximum instead of iterating toward a local one
|
|
33
33
|
|
|
34
34
|
---
|
|
35
35
|
|
|
36
36
|
## raising the floor vs raising the ceiling
|
|
37
37
|
|
|
38
|
-
AI is best used to **raise the floor
|
|
38
|
+
AI is best used to **raise the floor**: automate the mechanical 80% (layout scaffolding, responsive grids, state matrices, boilerplate). this frees human attention for **raising the ceiling**, the last 10-20% that requires taste, instinct, and conviction.
|
|
39
39
|
|
|
40
40
|
don't use AI to make the final call. use it to clear the drudgery so you can spend your time on the part that matters: the unique spin, the unexpected choice, the thing a model would never pick on its own.
|
|
41
41
|
|
|
42
|
-
**cognitive delegation, not cognitive surrender.** AI routes you to the destination (like Google Maps). you keep the viewpoint and make the final decision. accepting an 8-page AI plan without reading it is cognitive surrender
|
|
42
|
+
**cognitive delegation, not cognitive surrender.** AI routes you to the destination (like Google Maps). you keep the viewpoint and make the final decision. accepting an 8-page AI plan without reading it is cognitive surrender. that's how everything starts looking the same.
|
|
43
43
|
|
|
44
44
|
---
|
|
45
45
|
|
|
@@ -102,7 +102,7 @@ match fallback metrics with `size-adjust`, `ascent-override`, `descent-override`
|
|
|
102
102
|
|
|
103
103
|
use `color-mix()` for variants: `color-mix(in oklch, var(--brand) 80%, white)`. use `light-dark()` for theme-aware values.
|
|
104
104
|
|
|
105
|
-
**tint your neutrals:** never use pure gray. always tint toward your brand hue
|
|
105
|
+
**tint your neutrals:** never use pure gray. always tint toward your brand hue. even 0.01 chroma in OKLCH creates subconscious cohesion:
|
|
106
106
|
```css
|
|
107
107
|
--gray-100: oklch(95% 0.01 250); /* not #f5f5f5 */
|
|
108
108
|
--gray-900: oklch(15% 0.01 250); /* not #1a1a1a */
|
|
@@ -110,21 +110,21 @@ use `color-mix()` for variants: `color-mix(in oklch, var(--brand) 80%, white)`.
|
|
|
110
110
|
|
|
111
111
|
**gray on color:** never put gray text on colored backgrounds. it looks washed out. use a darker shade of the background color or transparency instead.
|
|
112
112
|
|
|
113
|
-
dark backgrounds are easier to make look good. steal from places you like
|
|
113
|
+
dark backgrounds are easier to make look good. steal from places you like: linear.app, vercel.com, raycast.com, arc browser. but don't default to dark mode with glowing accents. it looks "cool" without requiring actual design decisions.
|
|
114
114
|
|
|
115
115
|
---
|
|
116
116
|
|
|
117
117
|
## layout
|
|
118
118
|
|
|
119
|
-
**avoid:** the template look
|
|
120
|
-
- wrapping everything in cards
|
|
121
|
-
- nesting cards inside cards
|
|
122
|
-
- identical card grids
|
|
123
|
-
- the hero metric layout
|
|
124
|
-
- centering everything
|
|
125
|
-
- same spacing everywhere
|
|
119
|
+
**avoid:** the template look: hero section, 3 feature cards, testimonial carousel, big footer. every ai does this. also avoid:
|
|
120
|
+
- wrapping everything in cards: not everything needs a container
|
|
121
|
+
- nesting cards inside cards: visual noise, flatten the hierarchy
|
|
122
|
+
- identical card grids: same-sized cards with icon + heading + text, repeated endlessly
|
|
123
|
+
- the hero metric layout: big number, small label, supporting stats, gradient accent
|
|
124
|
+
- centering everything: left-aligned text with asymmetric layouts feels more designed
|
|
125
|
+
- same spacing everywhere: without rhythm, layouts feel monotonous
|
|
126
126
|
|
|
127
|
-
**the move:** break the grid sometimes. asymmetry is interesting. whitespace is a feature, not wasted space. don't cram everything into 16px/24px spacing
|
|
127
|
+
**the move:** break the grid sometimes. asymmetry is interesting. whitespace is a feature, not wasted space. don't cram everything into 16px/24px spacing. use dramatic gaps.
|
|
128
128
|
|
|
129
129
|
**fluid spacing:** use `clamp()` for spacing that breathes on larger screens:
|
|
130
130
|
```css
|
|
@@ -138,7 +138,7 @@ gap: clamp(1.5rem, 4vw, 6rem);
|
|
|
138
138
|
|
|
139
139
|
## motion
|
|
140
140
|
|
|
141
|
-
**avoid:** static pages with nothing moving, or the opposite
|
|
141
|
+
**avoid:** static pages with nothing moving, or the opposite: bouncing everything
|
|
142
142
|
|
|
143
143
|
**specific anti-patterns:**
|
|
144
144
|
- cursor-following lines or elements
|
|
@@ -146,7 +146,7 @@ gap: clamp(1.5rem, 4vw, 6rem);
|
|
|
146
146
|
- buttons that follow the cursor (harder to click, not clever)
|
|
147
147
|
- FAQ/content that breaks if you scroll past before the fade-in finishes
|
|
148
148
|
- animations that swap styles endlessly without purpose (rotating shapes, morphing buttons)
|
|
149
|
-
- bounce or elastic easing
|
|
149
|
+
- bounce or elastic easing: they feel dated and tacky. real objects decelerate smoothly.
|
|
150
150
|
|
|
151
151
|
**the move:** one well-timed animation beats ten scattered ones. page load with staggered reveals (50-100ms delays) creates more impact than hover effects on every button.
|
|
152
152
|
|
|
@@ -157,7 +157,7 @@ gap: clamp(1.5rem, 4vw, 6rem);
|
|
|
157
157
|
```
|
|
158
158
|
never linear, never bounce, never elastic. 150-300ms duration for most transitions.
|
|
159
159
|
|
|
160
|
-
**only animate transform and opacity.** never animate width, height, padding, margin
|
|
160
|
+
**only animate transform and opacity.** never animate width, height, padding, margin. they trigger layout recalculation and cause jank. for height animations, use `grid-template-rows` transitions.
|
|
161
161
|
|
|
162
162
|
**reduced motion:** always respect `prefers-reduced-motion`. provide a beautiful static alternative:
|
|
163
163
|
```css
|
|
@@ -182,14 +182,14 @@ never linear, never bounce, never elastic. 150-300ms duration for most transitio
|
|
|
182
182
|
**button hierarchy:** don't make every button primary. use ghost buttons, text links, secondary styles. hierarchy matters.
|
|
183
183
|
|
|
184
184
|
**every interactive element needs ALL states:**
|
|
185
|
-
- default
|
|
186
|
-
- hover
|
|
187
|
-
- focus
|
|
188
|
-
- active
|
|
189
|
-
- disabled
|
|
190
|
-
- loading
|
|
191
|
-
- error
|
|
192
|
-
- success
|
|
185
|
+
- default: resting
|
|
186
|
+
- hover: subtle feedback (brighten, scale 1.02-1.05)
|
|
187
|
+
- focus: visible keyboard indicator (never remove without replacement)
|
|
188
|
+
- active: click/tap feedback
|
|
189
|
+
- disabled: clearly non-interactive
|
|
190
|
+
- loading: async action feedback
|
|
191
|
+
- error: validation state
|
|
192
|
+
- success: confirmation
|
|
193
193
|
|
|
194
194
|
missing states create confusion and broken experiences.
|
|
195
195
|
|
|
@@ -203,7 +203,7 @@ missing states create confusion and broken experiences.
|
|
|
203
203
|
- arrows/icons that move backwards or vertically on hover
|
|
204
204
|
- hiding critical info or functionality behind hover (hover doesn't exist on mobile)
|
|
205
205
|
|
|
206
|
-
**the move:** hover should make elements feel "lickable"
|
|
206
|
+
**the move:** hover should make elements feel "lickable": inviting to click. slightly brighten, scale up (1.02-1.05), or add a subtle glow. the user should feel pulled toward clicking, not confused about what happened.
|
|
207
207
|
|
|
208
208
|
test every hover on mobile. if something only works on hover, it's broken for half your users.
|
|
209
209
|
|
|
@@ -211,13 +211,13 @@ test every hover on mobile. if something only works on hover, it's broken for ha
|
|
|
211
211
|
|
|
212
212
|
## responsive
|
|
213
213
|
|
|
214
|
-
**avoid:** hiding critical functionality on mobile
|
|
214
|
+
**avoid:** hiding critical functionality on mobile. adapt the interface, don't amputate it. also avoid:
|
|
215
215
|
- fixed widths that break on small screens
|
|
216
216
|
- touch targets smaller than 44x44px
|
|
217
217
|
- text smaller than 14px on mobile
|
|
218
218
|
- horizontal scroll from content overflow
|
|
219
219
|
|
|
220
|
-
**the move:** mobile-first, then enhance for larger screens. use fluid layouts with `clamp()` and container queries. adapt the interface for different contexts
|
|
220
|
+
**the move:** mobile-first, then enhance for larger screens. use fluid layouts with `clamp()` and container queries. adapt the interface for different contexts. don't just shrink it.
|
|
221
221
|
|
|
222
222
|
```css
|
|
223
223
|
/* container queries > media queries for components */
|
|
@@ -230,9 +230,9 @@ test every hover on mobile. if something only works on hover, it's broken for ha
|
|
|
230
230
|
|
|
231
231
|
## scroll behavior
|
|
232
232
|
|
|
233
|
-
**avoid:** scrolljacking
|
|
233
|
+
**avoid:** scrolljacking. never override native browser scroll with custom scroll logic. it feels like "moving through molasses" and users hate it.
|
|
234
234
|
|
|
235
|
-
**the move:** let the browser handle scrolling. if you want scroll-triggered effects, use intersection observer to trigger animations as sections enter the viewport
|
|
235
|
+
**the move:** let the browser handle scrolling. if you want scroll-triggered effects, use intersection observer to trigger animations as sections enter the viewport, but don't mess with scroll speed or direction.
|
|
236
236
|
|
|
237
237
|
use the "peeking" technique: let a few pixels of the next section peek above the fold instead of full-screen heroes with "scroll down" arrows. this naturally signals more content below.
|
|
238
238
|
|
|
@@ -242,15 +242,15 @@ use the "peeking" technique: let a few pixels of the next section peek above the
|
|
|
242
242
|
|
|
243
243
|
**avoid:** solid white, solid light gray, flat nothing
|
|
244
244
|
|
|
245
|
-
**the move:** add depth. layered gradients, subtle patterns, mesh effects. backgrounds set mood
|
|
245
|
+
**the move:** add depth. layered gradients, subtle patterns, mesh effects. backgrounds set mood. flat backgrounds say "I didn't think about this."
|
|
246
246
|
|
|
247
|
-
but don't use glassmorphism everywhere
|
|
247
|
+
but don't use glassmorphism everywhere: blur effects, glass cards, glow borders used decoratively rather than purposefully. it's AI slop.
|
|
248
248
|
|
|
249
249
|
---
|
|
250
250
|
|
|
251
251
|
## accessibility
|
|
252
252
|
|
|
253
|
-
this isn't optional
|
|
253
|
+
this isn't optional. it's part of good design.
|
|
254
254
|
|
|
255
255
|
- **contrast:** 4.5:1 minimum for text, 3:1 for UI components (WCAG AA)
|
|
256
256
|
- **focus indicators:** visible, high-contrast focus rings on all interactive elements. never `outline: none` without a replacement.
|
|
@@ -264,11 +264,11 @@ this isn't optional — it's part of good design.
|
|
|
264
264
|
|
|
265
265
|
**avoid:**
|
|
266
266
|
- glassmorphism everywhere (blur effects, glass cards, glow borders)
|
|
267
|
-
- rounded elements with thick colored border on one side
|
|
268
|
-
- sparklines as decoration
|
|
269
|
-
- rounded rectangles with generic drop shadows
|
|
270
|
-
- large icons with rounded corners above every heading
|
|
271
|
-
- modals unless there's truly no better alternative
|
|
267
|
+
- rounded elements with thick colored border on one side: lazy accent
|
|
268
|
+
- sparklines as decoration: tiny charts that convey nothing meaningful
|
|
269
|
+
- rounded rectangles with generic drop shadows: safe, forgettable
|
|
270
|
+
- large icons with rounded corners above every heading: templated look
|
|
271
|
+
- modals unless there's truly no better alternative: modals are lazy
|
|
272
272
|
- non-system emojis used as decoration (lazy AI tell)
|
|
273
273
|
|
|
274
274
|
---
|
|
@@ -277,7 +277,7 @@ this isn't optional — it's part of good design.
|
|
|
277
277
|
|
|
278
278
|
**make every word earn its place.**
|
|
279
279
|
- don't repeat information users can already see
|
|
280
|
-
- don't repeat the same information
|
|
280
|
+
- don't repeat the same information: redundant headers, intros that restate the heading
|
|
281
281
|
- labels and buttons should be unambiguous
|
|
282
282
|
- error copy should help users fix the problem, not blame them
|
|
283
283
|
- empty states should guide toward action
|
|
@@ -295,10 +295,10 @@ this isn't optional — it's part of good design.
|
|
|
295
295
|
## hero section (the H1 test)
|
|
296
296
|
|
|
297
297
|
your hero must answer four questions in seconds:
|
|
298
|
-
1. **what is it
|
|
299
|
-
2. **who is it for
|
|
300
|
-
3. **to what end
|
|
301
|
-
4. **what's the CTA
|
|
298
|
+
1. **what is it?**: clear product description
|
|
299
|
+
2. **who is it for?**: the target user
|
|
300
|
+
3. **to what end?**: why should they care
|
|
301
|
+
4. **what's the CTA?**: one clear next step
|
|
302
302
|
|
|
303
303
|
if a stranger can't answer all four in 5 seconds of looking at your hero, rewrite it.
|
|
304
304
|
|
|
@@ -311,13 +311,13 @@ if a stranger can't answer all four in 5 seconds of looking at your hero, rewrit
|
|
|
311
311
|
- "fake dashboard" mockups with Fisher-Price primary colors (red/yellow/green/blue)
|
|
312
312
|
- non-system emojis used as decoration (lazy AI tell)
|
|
313
313
|
|
|
314
|
-
**the move:** real product screenshots at high resolution. if you don't have a product yet, use a well-designed mockup
|
|
314
|
+
**the move:** real product screenshots at high resolution. if you don't have a product yet, use a well-designed mockup, but make it sharp and believable.
|
|
315
315
|
|
|
316
316
|
---
|
|
317
317
|
|
|
318
318
|
## context matters
|
|
319
319
|
|
|
320
|
-
don't impose an aesthetic
|
|
320
|
+
don't impose an aesthetic. match the project. a fintech dashboard shouldn't look like a gaming site. read the room.
|
|
321
321
|
|
|
322
322
|
if the project already has a design system, use it. don't fight it to show off.
|
|
323
323
|
|
|
@@ -368,33 +368,33 @@ the fingerprints of AI-generated work:
|
|
|
368
368
|
- sparklines as decoration
|
|
369
369
|
- rounded rectangles with drop shadows
|
|
370
370
|
- large icons with rounded corners above headings
|
|
371
|
-
- **"claude beige"
|
|
372
|
-
- **instrument serif** overuse
|
|
373
|
-
- **generic tinted backgrounds
|
|
371
|
+
- **"claude beige"**: the generic off-white/off-gray background every AI site defaults to
|
|
372
|
+
- **instrument serif** overuse: the italicized serif headline that now signals "AI-generated" the way inter once did
|
|
373
|
+
- **generic tinted backgrounds**: flat color-tinted sections with no texture, depth, or intention
|
|
374
374
|
|
|
375
375
|
a distinctive interface should make someone ask "how was this made?" not "which AI made this?"
|
|
376
376
|
|
|
377
377
|
### anti-attractors
|
|
378
378
|
|
|
379
|
-
models have attractor states
|
|
379
|
+
models have attractor states: defaults they fall into because training data is weighted toward them. purple gradients, instrument serif, "claude beige". these are gravity wells. to escape them you need **anti-attractors**: deliberate constraints that force the model off its well-trodden path.
|
|
380
380
|
|
|
381
381
|
techniques:
|
|
382
|
-
- **name the thing you don't want
|
|
383
|
-
- **seed with a reference
|
|
384
|
-
- **inject a constraint
|
|
385
|
-
- **rotate your defaults
|
|
382
|
+
- **name the thing you don't want**: "no purple, no serif headline, no off-white background" closes the attractor
|
|
383
|
+
- **seed with a reference**: point at a specific site, era, or designer's work as the target aesthetic
|
|
384
|
+
- **inject a constraint**: "monochrome only," "no rounded corners," "one font weight". scarcity forces creativity
|
|
385
|
+
- **rotate your defaults**: if your last three projects used dark mode, force light. if they used sans, force serif. the convergence trap is real.
|
|
386
386
|
|
|
387
387
|
---
|
|
388
388
|
|
|
389
|
-
## ax
|
|
389
|
+
## ax: agentic experience
|
|
390
390
|
|
|
391
|
-
UX is design for humans. **AX is design for AI agents** that are becoming primary users of software. when an agent interacts with your CLI, API, or surface, visual affordances don't help
|
|
391
|
+
UX is design for humans. **AX is design for AI agents** that are becoming primary users of software. when an agent interacts with your CLI, API, or surface, visual affordances don't help. it can't see your button. what it needs:
|
|
392
392
|
|
|
393
|
-
- **speed
|
|
394
|
-
- **clarity
|
|
395
|
-
- **verbosity where needed
|
|
396
|
-
- **edge case coverage
|
|
397
|
-
- **agentic affordances
|
|
393
|
+
- **speed**: fast responses, low latency, no unnecessary round trips
|
|
394
|
+
- **clarity**: unambiguous output, structured data, predictable shapes
|
|
395
|
+
- **verbosity where needed**: error messages that tell the agent what to do next, not just what failed
|
|
396
|
+
- **edge case coverage**: agents will hit paths humans never touch; handle them explicitly
|
|
397
|
+
- **agentic affordances**: `llms.txt`, `robots.txt`, clear `--help`, machine-readable status, stable exit codes
|
|
398
398
|
|
|
399
399
|
AX is not optional anymore. if your tool is agent-facing, design the agent's experience as deliberately as the human's.
|
|
400
400
|
|
|
@@ -402,17 +402,17 @@ AX is not optional anymore. if your tool is agent-facing, design the agent's exp
|
|
|
402
402
|
|
|
403
403
|
## conviction over local maxima
|
|
404
404
|
|
|
405
|
-
good design is a bet. iterating toward "slightly better" produces a **local maximum
|
|
405
|
+
good design is a bet. iterating toward "slightly better" produces a **local maximum**: safe, defensible, forgettable. great design requires **conviction**: choosing a global maximum that might look wrong at first but is a superior endpoint.
|
|
406
406
|
|
|
407
|
-
the engineer's instinct is to optimize incrementally. the designer's job is to make a bet and commit. AI accelerates iteration, which makes the local-maximum trap *worse
|
|
407
|
+
the engineer's instinct is to optimize incrementally. the designer's job is to make a bet and commit. AI accelerates iteration, which makes the local-maximum trap *worse*. you can now converge on average faster than ever.
|
|
408
408
|
|
|
409
|
-
**subtraction over addition.** the strongest design move is often removing something. steve jobs as editor, not steve jobs as builder. when a screen feels cluttered, don't add structure
|
|
409
|
+
**subtraction over addition.** the strongest design move is often removing something. steve jobs as editor, not steve jobs as builder. when a screen feels cluttered, don't add structure. delete until it breathes.
|
|
410
410
|
|
|
411
411
|
---
|
|
412
412
|
|
|
413
413
|
## the scarcity principle
|
|
414
414
|
|
|
415
|
-
taste emerges from constraints. the european and japanese craft traditions produced distinctive work because materials were scarce
|
|
415
|
+
taste emerges from constraints. the european and japanese craft traditions produced distinctive work because materials were scarce. you had to choose carefully. in an era of infinite digital materials (every color, every font, every layout is free), taste must be **intentionally cultivated through self-imposed scarcity**.
|
|
416
416
|
|
|
417
417
|
pick constraints before you start: one font, two colors, three spacing values. scarcity forces decisions. infinite options produce the distribution center.
|
|
418
418
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
# design-seed.md
|
|
1
|
+
# design-seed.md: atris visual identity
|
|
2
2
|
|
|
3
3
|
> Generated from a design interview on 2026-06-23.
|
|
4
|
-
> This is the project's unique design DNA. Not a template
|
|
4
|
+
> This is the project's unique design DNA. Not a template, a conviction.
|
|
5
5
|
> Every design decision for Atris surfaces should reference this seed.
|
|
6
6
|
|
|
7
7
|
---
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
| question | answer |
|
|
12
12
|
|----------|--------|
|
|
13
13
|
| audience | designers, product enthusiasts, apple lovers, artsy people |
|
|
14
|
-
| anti-attractor | AI startup slop
|
|
15
|
-
| personality | warm-technical
|
|
16
|
-
| color mood | warm earth
|
|
14
|
+
| anti-attractor | AI startup slop: purple gradients, claude beige, instrument serif |
|
|
15
|
+
| personality | warm-technical: sharp but human, approachable craft |
|
|
16
|
+
| color mood | warm earth: clay, bone, ink, ochre |
|
|
17
17
|
|
|
18
18
|
**the move:** this is not a dev tool that needs to look "technical." this is a crafted object that happens to be powerful. the bar is set by people who notice the kerning on a restaurant menu.
|
|
19
19
|
|
|
@@ -24,14 +24,14 @@
|
|
|
24
24
|
**display: Spectral**
|
|
25
25
|
- warm serif designed for screens (Production Type)
|
|
26
26
|
- intellectual without being precious
|
|
27
|
-
- has optical sizing
|
|
27
|
+
- has optical sizing: gets more expressive at large sizes
|
|
28
28
|
- NOT instrument serif (the AI tell), NOT Fraunces (getting there), NOT Playfair (overused)
|
|
29
29
|
- weights: 200 (light, for quiet headlines) and 700 (for bold statements)
|
|
30
|
-
- italic available
|
|
30
|
+
- italic available: use sparingly, for emphasis only
|
|
31
31
|
|
|
32
32
|
**body: Hanken Grotesk**
|
|
33
33
|
- humanist sans with warmth and character
|
|
34
|
-
- not inter, not roboto, not system
|
|
34
|
+
- not inter, not roboto, not system: has a hand to it
|
|
35
35
|
- weights: 400 (body), 600 (emphasis)
|
|
36
36
|
- slightly more readable than geometric sans at small sizes
|
|
37
37
|
|
|
@@ -69,16 +69,16 @@ warm earth palette. everything tinted warm. no pure gray, no pure black, no pure
|
|
|
69
69
|
```css
|
|
70
70
|
:root {
|
|
71
71
|
/* surfaces */
|
|
72
|
-
--bone: oklch(96% 0.012 75); /* warm paper
|
|
72
|
+
--bone: oklch(96% 0.012 75); /* warm paper, the base */
|
|
73
73
|
--bone-2: oklch(93% 0.014 72); /* slightly deeper, for sections */
|
|
74
|
-
--ink: oklch(22% 0.015 55); /* warm near-black
|
|
74
|
+
--ink: oklch(22% 0.015 55); /* warm near-black, primary text */
|
|
75
75
|
--ink-soft: oklch(35% 0.012 55); /* secondary text, still warm */
|
|
76
76
|
--ink-faint:oklch(55% 0.010 60); /* tertiary, metadata */
|
|
77
77
|
|
|
78
|
-
/* accents
|
|
79
|
-
--clay: oklch(58% 0.13 45); /* terracotta
|
|
80
|
-
--ochre: oklch(72% 0.09 75); /* warm gold
|
|
81
|
-
--moss: oklch(42% 0.04 145); /* deep muted green
|
|
78
|
+
/* accents: used rarely, earn their place */
|
|
79
|
+
--clay: oklch(58% 0.13 45); /* terracotta, the sharp accent */
|
|
80
|
+
--ochre: oklch(72% 0.09 75); /* warm gold, for highlights */
|
|
81
|
+
--moss: oklch(42% 0.04 145); /* deep muted green, secondary accent */
|
|
82
82
|
|
|
83
83
|
/* depth */
|
|
84
84
|
--shadow: oklch(15% 0.01 55); /* deepest warm dark */
|
|
@@ -89,9 +89,9 @@ warm earth palette. everything tinted warm. no pure gray, no pure black, no pure
|
|
|
89
89
|
**usage rules:**
|
|
90
90
|
- `--bone` is the default background. never `#fff`. never `#f5f5f5`.
|
|
91
91
|
- `--ink` is the default text. never `#000`. never `#1a1a1a`.
|
|
92
|
-
- `--clay` is the one sharp accent. use it for one thing per view
|
|
92
|
+
- `--clay` is the one sharp accent. use it for one thing per view: a link, a CTA, a key number. if you use it for three things, it's not an accent anymore.
|
|
93
93
|
- `--ochre` for subtle highlights (selection, hover warmth). never for text.
|
|
94
|
-
- `--moss` appears rarely
|
|
94
|
+
- `--moss` appears rarely: maybe a status indicator, a secondary chart. it's the surprise.
|
|
95
95
|
- never put `--ink-faint` text on `--clay` backgrounds. use `--bone` on `--clay`.
|
|
96
96
|
- dark mode: invert to warm dark (`oklch(18% 0.015 55)` background, `--bone` text). never zinc, never pure dark.
|
|
97
97
|
|
|
@@ -106,11 +106,11 @@ warm-technical means generous but not wasteful. more space than feels comfortabl
|
|
|
106
106
|
--space-sm: 1rem;
|
|
107
107
|
--space-md: 2rem;
|
|
108
108
|
--space-lg: 4rem;
|
|
109
|
-
--space-xl: 8rem; /* section gaps
|
|
109
|
+
--space-xl: 8rem; /* section gaps, dramatic */
|
|
110
110
|
--space-2xl: 12rem; /* used sparingly, for major breaks */
|
|
111
111
|
```
|
|
112
112
|
|
|
113
|
-
**rhythm:** vertical spacing locked to `--space-md` (2rem) as the base unit. section gaps are `--space-xl` (8rem). this creates a 1:4 ratio between content rhythm and section breaks
|
|
113
|
+
**rhythm:** vertical spacing locked to `--space-md` (2rem) as the base unit. section gaps are `--space-xl` (8rem). this creates a 1:4 ratio between content rhythm and section breaks. you feel the structure without seeing it.
|
|
114
114
|
|
|
115
115
|
---
|
|
116
116
|
|
|
@@ -120,7 +120,7 @@ warm-technical means generous but not wasteful. more space than feels comfortabl
|
|
|
120
120
|
|
|
121
121
|
- no hero + 3 cards + footer. ever.
|
|
122
122
|
- asymmetric layouts. left-aligned with intentional negative space on the right.
|
|
123
|
-
- wide margins (clamp(1.5rem, 8vw, 8rem))
|
|
123
|
+
- wide margins (clamp(1.5rem, 8vw, 8rem)). content sits in the center 60-70% of the viewport.
|
|
124
124
|
- sections separated by `--space-xl` (8rem) of pure `--bone`. the space IS the design.
|
|
125
125
|
- no cards unless content genuinely needs a container. most things sit directly on `--bone`.
|
|
126
126
|
- if you must group, use `--bone-2` (slightly deeper) with no border, or a single `--line` hairline.
|
|
@@ -136,7 +136,7 @@ warm-technical = things take their time, but nothing wastes it.
|
|
|
136
136
|
```css
|
|
137
137
|
--ease: cubic-bezier(0.25, 1, 0.5, 1); /* exponential ease-out */
|
|
138
138
|
--dur-fast: 200ms;
|
|
139
|
-
--dur-base: 350ms; /* slightly slower than default
|
|
139
|
+
--dur-base: 350ms; /* slightly slower than default, warm */
|
|
140
140
|
--dur-slow: 600ms; /* for page reveals */
|
|
141
141
|
```
|
|
142
142
|
|
|
@@ -154,8 +154,8 @@ these are banned for Atris surfaces, derived from the interview:
|
|
|
154
154
|
| banned | why |
|
|
155
155
|
|--------|-----|
|
|
156
156
|
| purple-to-blue gradients | AI slop fingerprint #1 |
|
|
157
|
-
| off-white / `#fafafa` backgrounds | "claude beige"
|
|
158
|
-
| instrument serif (italic) | the new AI tell
|
|
157
|
+
| off-white / `#fafafa` backgrounds | "claude beige", the new AI default |
|
|
158
|
+
| instrument serif (italic) | the new AI tell: everyone uses it |
|
|
159
159
|
| inter / roboto / system fonts | statistically average, aesthetically dead |
|
|
160
160
|
| glassmorphism | decorative blur = no point of view |
|
|
161
161
|
| dark mode with neon accents | "cool" without a design decision |
|
|
@@ -174,14 +174,14 @@ it's warm paper, warm ink, one sharp terracotta accent, a serif that has opinion
|
|
|
174
174
|
|
|
175
175
|
if a designer looks at this and thinks "AI made this," we failed.
|
|
176
176
|
if they think "someone made this," we're on track.
|
|
177
|
-
if they think "who made this?"
|
|
177
|
+
if they think "who made this?", that's the goal.
|
|
178
178
|
|
|
179
179
|
---
|
|
180
180
|
|
|
181
181
|
## references (inspiration, not copies)
|
|
182
182
|
|
|
183
|
-
- Aesop.com
|
|
184
|
-
- Apple product pages
|
|
185
|
-
- Linear changelog
|
|
186
|
-
- Istituto Marangoni
|
|
187
|
-
- a well-printed paperback
|
|
183
|
+
- Aesop.com: warm earth, editorial, restraint
|
|
184
|
+
- Apple product pages: typography confidence, negative space
|
|
185
|
+
- Linear changelog: warm-technical writing in a UI
|
|
186
|
+
- Istituto Marangoni: editorial layout, Italian craft
|
|
187
|
+
- a well-printed paperback: the feeling we're chasing
|
|
@@ -39,7 +39,7 @@ Flag and cut:
|
|
|
39
39
|
Read the entire piece aloud. Mark:
|
|
40
40
|
- Where you stumble (awkward phrasing)
|
|
41
41
|
- Where you get bored (cut or punch up)
|
|
42
|
-
- Where you speed up (the good stuff
|
|
42
|
+
- Where you speed up (the good stuff: keep this energy)
|
|
43
43
|
|
|
44
44
|
## Sanity Pass
|
|
45
45
|
|
|
@@ -10,7 +10,7 @@ tags:
|
|
|
10
10
|
|
|
11
11
|
# Apps
|
|
12
12
|
|
|
13
|
-
View and manage your Atris apps
|
|
13
|
+
View and manage your Atris apps: status, runs, data, secrets, members.
|
|
14
14
|
|
|
15
15
|
## Bootstrap
|
|
16
16
|
|
|
@@ -111,8 +111,8 @@ curl -s "https://api.atris.ai/api/apps/{slug}/secrets" \
|
|
|
111
111
|
```
|
|
112
112
|
|
|
113
113
|
Returns key names and where they're stored:
|
|
114
|
-
- `"storage_tier": "cloud"
|
|
115
|
-
- `"storage_tier": "local"
|
|
114
|
+
- `"storage_tier": "cloud"`: encrypted in Atris vault
|
|
115
|
+
- `"storage_tier": "local"`: on your machine at `~/.atris/secrets/{slug}/`
|
|
116
116
|
|
|
117
117
|
### Store Secret (cloud)
|
|
118
118
|
```bash
|
|
@@ -30,7 +30,7 @@ One skill for everything: submit feedback, view the queue, resolve/close/delete
|
|
|
30
30
|
## Preferred path: the Atris CLI
|
|
31
31
|
|
|
32
32
|
The `atris` CLI wraps every feedback operation against the production API and
|
|
33
|
-
handles auth from the user's login. Use it first
|
|
33
|
+
handles auth from the user's login. Use it first: it's the canonical,
|
|
34
34
|
audited path and works without needing AWS credentials.
|
|
35
35
|
|
|
36
36
|
```bash
|
|
@@ -41,7 +41,7 @@ atris feedback close abc123 # close as wontfix
|
|
|
41
41
|
atris feedback delete abc123 # delete
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
IDs can be short (first 8 chars of the UUID)
|
|
44
|
+
IDs can be short (first 8 chars of the UUID). The CLI resolves the prefix
|
|
45
45
|
against the live list before acting.
|
|
46
46
|
|
|
47
47
|
If `atris` is not on PATH, it lives at `~/arena/atris-cli/bin/atris.js`.
|