@mindstudio-ai/remy 0.1.34 → 0.1.35

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.
Files changed (54) hide show
  1. package/dist/headless.js +578 -393
  2. package/dist/index.js +652 -385
  3. package/dist/prompt/sources/llms.txt +1618 -0
  4. package/dist/prompt/static/instructions.md +1 -1
  5. package/dist/prompt/static/team.md +1 -1
  6. package/dist/subagents/.notes-background-agents.md +60 -48
  7. package/dist/subagents/browserAutomation/prompt.md +14 -11
  8. package/dist/subagents/designExpert/data/sources/dev/index.html +901 -0
  9. package/dist/subagents/designExpert/data/sources/dev/serve.mjs +244 -0
  10. package/dist/subagents/designExpert/data/sources/dev/specimens-fonts.html +126 -0
  11. package/dist/subagents/designExpert/data/sources/dev/specimens-pairings.html +114 -0
  12. package/dist/subagents/designExpert/data/{fonts.json → sources/fonts.json} +0 -97
  13. package/dist/subagents/designExpert/data/sources/inspiration.json +392 -0
  14. package/dist/subagents/designExpert/prompt.md +36 -12
  15. package/dist/subagents/designExpert/prompts/animation.md +14 -6
  16. package/dist/subagents/designExpert/prompts/color.md +25 -5
  17. package/dist/subagents/designExpert/prompts/{icons.md → components.md} +17 -5
  18. package/dist/subagents/designExpert/prompts/frontend-design-notes.md +17 -122
  19. package/dist/subagents/designExpert/prompts/identity.md +15 -61
  20. package/dist/subagents/designExpert/prompts/images.md +35 -10
  21. package/dist/subagents/designExpert/prompts/layout.md +14 -9
  22. package/dist/subagents/designExpert/prompts/typography.md +39 -0
  23. package/package.json +2 -2
  24. package/dist/actions/buildFromInitialSpec.md +0 -15
  25. package/dist/actions/publish.md +0 -12
  26. package/dist/actions/sync.md +0 -19
  27. package/dist/compiled/README.md +0 -100
  28. package/dist/compiled/auth.md +0 -77
  29. package/dist/compiled/design.md +0 -251
  30. package/dist/compiled/dev-and-deploy.md +0 -69
  31. package/dist/compiled/interfaces.md +0 -238
  32. package/dist/compiled/manifest.md +0 -107
  33. package/dist/compiled/media-cdn.md +0 -51
  34. package/dist/compiled/methods.md +0 -225
  35. package/dist/compiled/msfm.md +0 -222
  36. package/dist/compiled/platform.md +0 -105
  37. package/dist/compiled/scenarios.md +0 -103
  38. package/dist/compiled/sdk-actions.md +0 -146
  39. package/dist/compiled/tables.md +0 -263
  40. package/dist/static/authoring.md +0 -101
  41. package/dist/static/coding.md +0 -29
  42. package/dist/static/identity.md +0 -1
  43. package/dist/static/instructions.md +0 -31
  44. package/dist/static/intake.md +0 -44
  45. package/dist/static/lsp.md +0 -4
  46. package/dist/static/projectContext.ts +0 -160
  47. package/dist/static/team.md +0 -39
  48. package/dist/subagents/designExpert/data/inspiration.json +0 -392
  49. package/dist/subagents/designExpert/prompts/instructions.md +0 -18
  50. /package/dist/subagents/designExpert/data/{compile-font-descriptions.sh → sources/compile-font-descriptions.sh} +0 -0
  51. /package/dist/subagents/designExpert/data/{compile-inspiration.sh → sources/compile-inspiration.sh} +0 -0
  52. /package/dist/subagents/designExpert/data/{inspiration.raw.json → sources/inspiration.raw.json} +0 -0
  53. /package/dist/subagents/designExpert/{prompts/tool-prompts → data/sources/prompts}/design-analysis.md +0 -0
  54. /package/dist/subagents/designExpert/{prompts/tool-prompts → data/sources/prompts}/font-analysis.md +0 -0
@@ -0,0 +1,39 @@
1
+ ## Typography Guidelines
2
+
3
+ Typography is the single fastest way to give an interface identity. Consider what is being built and how type can help it be effective - both in terms of design and usability. Use the <font_library> as a reference for real, interesting, beautiful fonts that are available to use before falling back to fonts you already know. The fonts in the library were hand-sourced by a typography nerd who loves fonts (just read the descriptions, you'll see!) - trust that they are beautiful. There is a reason branding agencies get paid the big bucks for choosing the perfect fonts - we need to be thinking at a similar level here.
4
+
5
+ Use type to create a strong hierarchy that drives the rest of the design — clear distinction between headings, body, labels, and captions. Use weight and size, not just color, to create hierarchy. Choose fonts that elevate the interface and give it personality.
6
+
7
+ Avoid generic Google Fonts fonts and aim to surprise and delight the user with creative and unexpected choices and pairings.
8
+
9
+ ### Fonts to Avoid
10
+ Even though these fonts look nice, they are unfortunately so overused that they will immediately ruin the impact of the rest of the design. Avoid them at all costs unless the user explicitly asks for them:
11
+ - Avoid Playfair Display, Lora, Cormorant Garamond, Outfit, Raleway, Josefin Sans, Space Grotesk, Nunito, Poppins, Plus Jakarta Sans
12
+
13
+ ### Typography block format
14
+
15
+ A `` ```typography `` fenced block in a `type: design/typography` spec file declares fonts (with source URLs) and one or two anchor styles (typically Display and Body). Derive additional styles (labels, buttons, captions, overlines) from these anchors:
16
+
17
+ ```
18
+ fonts:
19
+ XXXXXX:
20
+ src: https://...
21
+ YYYYYY:
22
+ src: https://...
23
+
24
+ styles:
25
+ Display:
26
+ font: XXXXXX
27
+ size: XXpx
28
+ weight: XXX
29
+ letterSpacing: X.XXem
30
+ lineHeight: X.X
31
+ case: ordinary
32
+ description: Page titles and hero text
33
+ Body:
34
+ font: YYYYYY
35
+ size: YYpx
36
+ weight: YYY
37
+ lineHeight: Y.Y
38
+ description: Default reading text
39
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mindstudio-ai/remy",
3
- "version": "0.1.34",
3
+ "version": "0.1.35",
4
4
  "description": "MindStudio coding agent",
5
5
  "repository": {
6
6
  "type": "git",
@@ -19,7 +19,7 @@
19
19
  "remy": "./dist/index.js"
20
20
  },
21
21
  "scripts": {
22
- "build": "tsup && cp -r src/prompt/static src/prompt/compiled src/prompt/actions dist/ && cd src/subagents && find . -name '*.md' -exec sh -c 'mkdir -p ../../dist/subagents/$(dirname {}) && cp {} ../../dist/subagents/{}' \\;",
22
+ "build": "tsup",
23
23
  "dev": "tsup --watch",
24
24
  "typecheck": "tsc --noEmit",
25
25
  "lint:fix": "prettier --write ./src",
@@ -1,15 +0,0 @@
1
- This is an automated action triggered by the user pressing "Build" in the editor after reviewing the spec.
2
-
3
- The user has reviewed the spec and is ready to build.
4
-
5
- Think about your approach and then get a quick sanity check from `codeSanityCheck` to make sure you aren't missing anything.
6
-
7
- Then, build everything in one turn: methods, tables, interfaces, manifest updates, and scenarios, using the spec as the master plan.
8
-
9
- When code generation is complete, verify your work:
10
- - First, run use `runScenario` to seed test data, then use `runMethod` to confirm a method works
11
- - If the app has a web frontend, check the browser logs to make sure there are no errors rendering it.
12
- - Ask the `visualDesignExpert` to take a screenshot and verity that the visual design looks correct. Fix any issues it flags - we want the user's first time seeing the finished product to truly wow them.
13
- - Finally, use `runAutomatedBrowserTest` to smoke-test the main UI flow. The dev database is a disposable snapshot, so don't worry about being destructive. Fix any errors before finishing.
14
-
15
- When everything is working, use `productVision` to mark the MVP roadmap item as done, then call `setProjectOnboardingState({ state: "onboardingFinished" })`.
@@ -1,12 +0,0 @@
1
- This is an automated action triggered by the user pressing "Publish" in the editor.
2
-
3
- The user wants to deploy their app. Pushing to the `main` branch triggers a production deploy.
4
-
5
- Review the current state of the working tree — what has changed since the last commit, what's been committed since the last push, and the overall shape of recent work. Write a user-friendly changelog with `presentPublishPlan` — summarize what changed in plain language ("added vendor approval workflow", "fixed invoice totals", "updated the dashboard layout"). Reference specific code or file paths only when it helps clarity. This is what the user will see before deploying.
6
-
7
- If approved:
8
- - Stage and commit any uncommitted changes with a clean, descriptive commit message
9
- - Push to main
10
- - Let the user know their app is deploying
11
-
12
- If dismissed, acknowledge and do nothing.
@@ -1,19 +0,0 @@
1
- This is an automated action triggered by the user pressing "Sync" in the editor.
2
-
3
- The user has manually edited files since the last sync. The `refs/sync-point` git ref marks the last known-good sync state. It's created using a temporary git index that captures the full working tree (including unstaged changes) as a tree object — so it represents exactly what the files looked like at sync time, not just what was committed.
4
-
5
- To see what the user changed, run: `git diff refs/sync-point -- src/ dist/`
6
-
7
- This compares the sync-point tree against the current working tree. Do not add `HEAD` or any other ref — the command as written diffs directly against the working tree, which is what you want.
8
-
9
- In the diff output: lines prefixed with `-` are what was in the file at last sync. Lines prefixed with `+` are the user's current edits. Sync should bring the other side in line with the `+` side.
10
-
11
- Analyze the changes and write a sync plan with `presentSyncPlan` — a clear markdown summary of what changed and what you intend to update. Write it for a human: describe changes in plain language ("renamed the greeting field", "added a note about error handling"), not as a list of file paths and code diffs. Reference specific code or file paths only when it helps clarity. The user will review and approve before you make changes.
12
-
13
- If approved:
14
- - If spec files (`src/`) changed, update the corresponding code in `dist/` to match
15
- - If code files (`dist/`) changed, update the corresponding spec in `src/` to match
16
- - If both changed, reconcile — spec is the source of truth for intent, but respect code changes that add implementation detail
17
- - When all files are synced, call `clearSyncStatus`
18
-
19
- If dismissed, acknowledge and do nothing.
@@ -1,100 +0,0 @@
1
- # Compiled Prompt Fragments
2
-
3
- This directory contains distilled prompt fragments generated from the source
4
- docs in `docs/developer-guide/` (project root). These are loaded by `../index.ts` and injected
5
- into Remy's system prompt at runtime.
6
-
7
- ## How to compile
8
-
9
- The compilation is done manually in a session with an LLM (Claude Code or
10
- similar). Work through the source docs and compile them into prompt-ready
11
- fragments.
12
-
13
- ### Step 1: Compile with an LLM
14
-
15
- Open a session and ask it to work through the compilation. Give it these
16
- instructions:
17
-
18
- ---
19
-
20
- **You will compile source docs into prompt fragments for Remy, a coding agent
21
- that builds MindStudio apps. The compiled fragments go in `src/prompt/compiled/`
22
- and are loaded into the agent's system prompt at runtime.**
23
-
24
- **Work through this one source file at a time, sequentially.** For each one:
25
- 1. Read the source doc thoroughly
26
- 2. Decide whether it should become its own fragment, be merged with a related
27
- source, or be skipped entirely
28
- 3. Present your draft of the compiled fragment
29
- 4. Wait for review and feedback before moving to the next one
30
-
31
- Do not parallelize this work. Do not generate multiple fragments at once. Each
32
- fragment deserves careful attention — these are the instructions a coding agent
33
- will follow to build real products, and mistakes here propagate into every app
34
- it builds.
35
-
36
- Source files are in `docs/developer-guide/` at the project root.
37
-
38
- ## How to think about compilation
39
-
40
- **Your audience is an LLM acting as a coding agent.** It needs to produce
41
- correct code, not learn concepts. Everything you write should be optimized
42
- for an agent that is actively building a MindStudio app and needs to get
43
- the details right.
44
-
45
- ### What to keep
46
-
47
- - **API signatures, parameter types, return types, and code examples.**
48
- These must be exactly right. The agent will copy these patterns directly
49
- into the code it writes. A wrong type or a missing parameter means broken
50
- code in production.
51
- - **Concrete examples, specific error cases, explicit constraints, enumerated
52
- edge cases.** These are the highest-value content. A source doc that says
53
- "ensure data integrity, including checking for duplicate keys, null foreign
54
- references, and orphaned records" — the specific checks ARE the value.
55
- Collapsing that to "ensure data integrity" loses the actionable detail.
56
- - **Tables and structured reference data.** Manifest fields, db predicates,
57
- interface config schemas, role API methods — these are lookup references
58
- the agent will consult while writing code. Keep them complete.
59
- - **Rules and constraints that affect correctness.** "Only packages declared
60
- in package.json are available at runtime" is the kind of detail that
61
- prevents hard-to-debug errors.
62
-
63
- ### What to strip
64
-
65
- - **Setup instructions, installation steps, CLI commands.** The agent isn't
66
- setting up a dev environment — it's writing code inside one.
67
- - **Platform internals and deployment pipeline details.** How the platform
68
- builds and deploys is not the agent's concern.
69
- - **Conceptual explanations and philosophy.** "Why" something was designed
70
- a certain way is rarely useful mid-task. Keep the "what" and "how."
71
- - **Marketing language, feature pitches, comparative positioning.**
72
- - **Cross-references to other docs** ("see Section X for details"). The
73
- fragment should be self-contained.
74
-
75
- ### Fragment format
76
-
77
- ```markdown
78
- # Fragment Title
79
-
80
- Brief one-line context.
81
-
82
- ## Section
83
- ...content...
84
- ```
85
-
86
- No YAML frontmatter. No meta-commentary. Just the reference content the
87
- agent needs. Each fragment should make sense on its own — the agent may
88
- not see all fragments in every session.
89
-
90
- ---
91
-
92
- ### Step 2: Review
93
-
94
- Read through the compiled fragments and verify code examples are accurate.
95
- The LLM may hallucinate API details — cross-check against the source docs.
96
-
97
- ### Step 3: Commit
98
-
99
- The compiled fragments are committed to git. They're the snapshot the agent
100
- uses at runtime.
@@ -1,77 +0,0 @@
1
- # Roles & Auth
2
-
3
- MindStudio apps use role-based access control. Roles are defined in the manifest, assigned to users in the editor, and enforced in methods. The backend is the authority — methods enforce access control via `auth.requireRole()`. The frontend can read roles for conditional rendering, but enforcement always happens server-side.
4
-
5
- **Roles are optional.** Many apps don't need them — single-user apps, internal tools, simple utilities. If the app doesn't have multiple user types with different permissions, skip roles entirely. Only add them when the app explicitly needs to distinguish who can do what.
6
-
7
- ## Defining Roles
8
-
9
- In `mindstudio.json`:
10
-
11
- ```json
12
- {
13
- "roles": [
14
- { "id": "requester", "name": "Requester", "description": "Can submit vendor requests and purchase orders." },
15
- { "id": "approver", "name": "Approver", "description": "Reviews and approves purchase orders." },
16
- { "id": "admin", "name": "Administrator", "description": "Full access to all app functions." },
17
- { "id": "ap", "name": "Accounts Payable", "description": "Processes invoices and payments." }
18
- ]
19
- }
20
- ```
21
-
22
- - `id` — kebab-case, used in code (`auth.requireRole('admin')`)
23
- - `name` — display name shown in the editor
24
- - `description` — what this role can do (useful for the agent and for users in the role assignment UI)
25
-
26
- Roles are synced to the platform on deploy. Adding or removing roles in the manifest creates or deletes them on the next push.
27
-
28
- ## Backend Auth API
29
-
30
- ```typescript
31
- import { auth } from '@mindstudio-ai/agent';
32
- ```
33
-
34
- ### `auth.requireRole(...roles)`
35
-
36
- Throws a 403 error if the current user doesn't have **any** of the specified roles. Use at the top of methods to gate access.
37
-
38
- ```typescript
39
- auth.requireRole('admin'); // single role
40
- auth.requireRole('admin', 'approver'); // any of these
41
- ```
42
-
43
- ### `auth.hasRole(...roles)`
44
-
45
- Returns `boolean`. Same logic as `requireRole` but doesn't throw. Use for conditional behavior within a method.
46
-
47
- ### `auth.userId`
48
-
49
- The current user's UUID. Always available.
50
-
51
- ### `auth.roles`
52
-
53
- Array of role names assigned to the current user.
54
-
55
- ### `auth.getUsersByRole(role)`
56
-
57
- Returns an array of user IDs that have the specified role. Useful for things like "notify all admins."
58
-
59
- ## Frontend Auth
60
-
61
- ```typescript
62
- import { auth } from '@mindstudio-ai/interface';
63
-
64
- auth.userId; // current user's ID
65
- auth.name; // display name
66
- auth.email; // email address
67
- auth.profilePictureUrl; // URL or null
68
- ```
69
-
70
- The frontend SDK provides display-only auth context. Role checking for UI purposes (showing/hiding elements) is done by reading role data from the backend:
71
-
72
- ```typescript
73
- const { isAdmin, pendingCount } = await api.getDashboard();
74
- {isAdmin && <AdminPanel />}
75
- ```
76
-
77
- The frontend is untrusted — anyone can modify JavaScript in the browser. Access control must be enforced server-side in methods. The frontend shows or hides UI based on role data from the backend, but the backend is the authority.
@@ -1,251 +0,0 @@
1
- # Frontend Design Notes
2
-
3
- Design standards for web interfaces in MindStudio apps.
4
-
5
- ## Quality Bar
6
-
7
- Every interface must feel like a polished, shipping product — not a
8
- prototype, not a starter template, not a homework assignment. The standard
9
- is iOS and Apple's bundled iOS apps, Notion, Stripe. If it wouldn't look
10
- good on Dribbble, Behance, or Mobbin, it's not done.
11
-
12
- MindStudio apps are end-user products. The interface is the product. Users
13
- judge the entire app by how it looks and feels in the first 3 seconds.
14
-
15
- ## Design System from the Spec
16
-
17
- The brand spec files in `src/interfaces/@brand/` define the app's visual identity at the brand level: a small palette of named colors and font choices with one or two anchor styles. These are brand decisions, not implementation details. Derive the full design system (CSS variables, component styles, spacing, borders, etc.) from these foundations.
18
-
19
- Set up a lightweight theme layer early (CSS variables or a small tokens file) so brand colors and type styles are defined once and referenced everywhere. Map brand colors to semantic roles (background, text, accent, surface, border) and derive any additional shades you need. Keep it simple: a handful of CSS variables for colors and a few reusable text style classes or utilities for typography.
20
-
21
- **When brand spec files are present, always use the defined fonts and colors in generated code.** Do not pick your own fonts or colors when the spec defines them. Reference colors semantically (as CSS variables or named constants) rather than scattering raw hex values through the codebase.
22
-
23
- ### Colors block format
24
-
25
- A `` ```colors `` fenced block in a `type: design/color` spec file declares 3-5 brand colors with evocative names, hex values, and descriptions. The names are brand identity names (not CSS property names), and the descriptions explain the color's role in the brand:
26
-
27
- ```colors
28
- Midnight:
29
- value: "#000000"
30
- description: Primary background and dark surfaces
31
- Charcoal:
32
- value: "#1C1C1E"
33
- description: Elevated surfaces and containers
34
- Snow:
35
- value: "#F5F5F7"
36
- description: Primary text and foreground elements
37
- Smoke:
38
- value: "#86868B"
39
- description: Secondary text and supporting content
40
- ```
41
-
42
- Derive additional implementation colors (borders, focus states, hover states, disabled states) from the brand palette rather than expecting them to be specified.
43
-
44
- ### Typography block format
45
-
46
- A `` ```typography `` fenced block in a `type: design/typography` spec file declares fonts (with source URLs) and one or two anchor styles (typically Display and Body). Styles can include an optional `case` field (`uppercase`, `lowercase`, `capitalize`) for text-transform. Derive additional styles (labels, buttons, captions, overlines) from these anchors:
47
-
48
- ```typography
49
- fonts:
50
- Satoshi:
51
- src: https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap
52
- Clash Grotesk:
53
- src: https://api.fontshare.com/v2/css?f[]=clash-grotesk@400,500,600&display=swap
54
-
55
- styles:
56
- Display:
57
- font: Satoshi
58
- size: 40px
59
- weight: 600
60
- letterSpacing: -0.03em
61
- lineHeight: 1.1
62
- case: uppercase
63
- description: Page titles and hero text
64
- Body:
65
- font: Satoshi
66
- size: 16px
67
- weight: 400
68
- lineHeight: 1.5
69
- description: Default reading text
70
- ```
71
-
72
- ## Be Distinctive
73
-
74
- AI-generated interfaces tend to converge on the same generic look: safe
75
- fonts, timid colors, predictable layouts. Fight this actively. Every
76
- interface should have character and intentionality — it should look like a
77
- designer made deliberate choices, not like it was generated from a template.
78
-
79
- **Typography must be a conscious choice.** Pick fonts that are beautiful,
80
- distinctive, and appropriate for the product's personality. Generic system
81
- fonts and overused defaults make everything look the same. Typography is
82
- the single fastest way to give an interface identity.
83
-
84
- **Commit to a color palette.** One or two dominant colors with sharp accents
85
- outperform timid, evenly-distributed palettes. Draw inspiration from the
86
- app's domain — a finance tool might use deep greens and golds; a creative
87
- tool might use bold, saturated primaries. The palette should feel intentional
88
- and owned, not randomly selected.
89
-
90
- **Backgrounds create atmosphere.** Solid white or solid gray is the safe
91
- default and the enemy of distinctiveness. Layer subtle gradients, use warm
92
- or cool tints, add geometric patterns or contextual textures. The background
93
- sets the mood before the user reads a single word.
94
-
95
- **Layouts should surprise.** Avoid the predictable patterns: three equal
96
- boxes with icons, centered hero with subtitle, generic card grid. Use
97
- asymmetry, varied column widths, creative negative space, unexpected
98
- compositions. Study Behance and Mobbin for layout inspiration. Every screen
99
- should feel considered, not generated.
100
-
101
- ## App-Like, Not Web-Page-Like
102
-
103
- Interfaces run fullscreen in the user's browser or a wrapped webview mobile
104
- app. They should feel like native apps, not websites.
105
-
106
- - **No long scrolling pages.** Use structured layouts: cards, split panes,
107
- steppers, tabs, grouped sections that fit the viewport. The interface
108
- should feel like a single-purpose tool, not a document.
109
- - **On mobile**, scrolling may be necessary, but use sticky headers, fixed
110
- CTAs, and anchored navigation to keep key actions within reach.
111
- - Think of every screen as something the user opens, uses, and closes —
112
- not something they read.
113
-
114
- ## Visual Design
115
-
116
- - **Typography:** Strong hierarchy — clear distinction between headings,
117
- body, labels, and captions. Use weight and size, not just color, to
118
- create hierarchy. Choose fonts that elevate the interface and give it
119
- personality.
120
- - **Color:** Clean, vibrant, intentional. Use color to communicate state
121
- and guide attention, not to decorate. Commit to a direction — bold and
122
- saturated, or muted and editorial — and follow through consistently.
123
- - **Spacing:** Consistent and generous. Padding and margins should be
124
- uniform across all components — nothing should feel cramped or uneven.
125
- White space is a feature, not wasted space.
126
- - **Components:** Every component (buttons, inputs, cards, modals, lists)
127
- should look like it belongs to the same design system. Consistent border
128
- radii, consistent shadows, consistent padding. If two buttons on the
129
- same screen look different for no reason, that's a bug.
130
-
131
- ## Animation
132
-
133
- Use motion to make interactions feel polished, not to show off. Focus on
134
- high-impact moments: a well-orchestrated page load with staggered reveals
135
- creates more delight than scattered micro-interactions everywhere.
136
-
137
- - Transitions between states should be smooth but fast.
138
- - Streaming content should flow into containers that grow naturally without
139
- pushing sibling elements around.
140
- - No parallax, no cheesy scroll effects, no bounce/elastic easing, no
141
- gratuitous loading animations.
142
-
143
- ## Layout Stability
144
-
145
- Layout shift is never acceptable. Elements jumping around as content loads
146
- or streams in makes an interface feel broken.
147
-
148
- - Reserve space for content that hasn't arrived yet. Use fixed/min-height
149
- containers, skeletons, or aspect-ratio boxes.
150
- - Images must always have explicit dimensions so the browser reserves space
151
- before the image loads.
152
- - Loading-to-loaded transitions should swap content in-place without
153
- changing container size.
154
- - Buttons must not change size during loading states. Use a fixed width or
155
- `min-width`, and swap the label for a spinner or short text that fits the
156
- same space. "Submit" becoming "Submitting..." should not make the button
157
- wider and push adjacent elements around.
158
- - Conditional UI should use opacity/overlay transitions, not insertion into
159
- flow that displaces existing content.
160
-
161
- ## Responsive Design
162
-
163
- Every interface must work on both desktop and mobile.
164
-
165
- - Use the full viewport. Backgrounds should extend to edges.
166
- - On desktop, use the space — multi-column layouts, sidebars, spacious
167
- cards. Avoid narrow centered columns with empty gutters on a wide screen.
168
- - On mobile, stack gracefully. Prioritize content and actions.
169
- - Test at both extremes. A layout that only looks good at one breakpoint
170
- is not done.
171
-
172
- ## Forms
173
-
174
- Forms should feel like interactions, not paperwork.
175
-
176
- - Group related fields visually. Use cards or sections, not a flat list.
177
- - Inline validation — show errors as the user types, not after submit.
178
- Validation must never introduce layout shift.
179
- - Loading states after submission. Always indicate that something is
180
- happening.
181
- - Disabled states should be visually distinct but not jarring.
182
- - Even data entry can be beautiful. Pay attention to alignment, padding,
183
- and spacing. Consistency is key.
184
-
185
- ## Data Fetching and Updates
186
-
187
- The UI should feel instant. Never make the user wait for a server round-trip
188
- to see the result of their own action.
189
-
190
- - **Optimistic updates.** When a user adds a row, toggles a setting, or
191
- submits a form, update the UI immediately and let the backend confirm
192
- in the background. If the backend fails, revert and show an error.
193
- - **Use SWR for data fetching** (`useSWR` from the `swr` package). It
194
- handles caching, revalidation, and stale-while-revalidate out of the box.
195
- Prefer SWR over manual `useEffect` + `useState` fetch patterns.
196
- - **Mutate after actions.** After a successful create/update/delete, call
197
- `mutate()` to revalidate the relevant SWR cache rather than manually
198
- updating local state.
199
- - **Skeleton loading.** Show skeletons that mirror the layout on initial
200
- load. Never show a blank page or centered spinner while data is loading.
201
-
202
- ## What Good Looks Like
203
-
204
- - A dashboard that feels like Linear — clean data, clear hierarchy, every
205
- pixel intentional.
206
- - A form that feels like Stripe Checkout — focused, calm, confident.
207
- - A settings page that feels like iOS Settings — organized, scannable,
208
- no clutter.
209
- - A list view that feels like Notion — flexible, spacious, information-dense
210
- without feeling crowded.
211
-
212
- ## What to Actively Avoid
213
-
214
- These are the hallmarks of generic AI-generated interfaces. Every one of
215
- them makes an interface look like it was auto-generated rather than designed.
216
-
217
- - **Generic fonts.** Overused defaults that strip away all personality.
218
- Instead: pick a distinctive Google Font that fits the app's character.
219
- - **Purple or indigo anything.** Purple gradients, purple buttons, purple
220
- accents. This is the #1 AI-generated aesthetic cliché. Instead: use
221
- a color palette that fits the app's domain — greens for finance, warm
222
- neutrals for productivity, bold primaries for creative tools, or just
223
- confident grayscale.
224
- - **Colored left-border callout boxes.** Rounded divs with a thick colored
225
- `border-left` — the generic "info card" pattern. Instead: use typography,
226
- spacing, and background tints to create hierarchy. If you need to call
227
- something out, use a full subtle background or a top border.
228
- - **Three equal boxes with icons.** The default AI landing page layout.
229
- Instead: use asymmetric layouts, varied column widths, or a single
230
- focused content area.
231
- - **Timid color palettes.** Evenly distributed, non-committal colors.
232
- Instead: one or two dominant colors with sharp accents. Commit to a
233
- direction.
234
- - **Card-heavy nested layouts.** Cards inside cards, everything boxed.
235
- Instead: use space, typography, and dividers to create hierarchy without
236
- extra containers.
237
- - **Inconsistent spacing.** 12px here, 20px there, 8px somewhere else.
238
- Instead: define a spacing scale (4/8/12/16/24/32/48/64) and use it
239
- everywhere.
240
- - **Components from different visual languages.** Rounded buttons next to
241
- square inputs, shadows mixed with flat design. Instead: pick one system
242
- and apply it consistently.
243
- - **Long scrolling forms with no visual grouping.** Instead: group fields
244
- into sections with clear headings, cards, or stepped flows.
245
- - **Cramped layouts.** Text pressed against edges, no room to breathe.
246
- Instead: generous padding, comfortable margins, let the content float.
247
- - **Loading states that are just a centered spinner on a blank page.**
248
- Instead: use skeletons that mirror the layout, or keep the existing
249
- structure visible with a subtle loading indicator.
250
- - **Any interface where the first reaction is "this looks like a demo" or
251
- "this looks like it was made with a website builder."**
@@ -1,69 +0,0 @@
1
- # Development & Deployment
2
-
3
- ## How Development Works
4
-
5
- The sandbox uses the same tunnel binary and execution pipeline as local development. Code changes take effect immediately — esbuild transpiles methods per-request, no restart needed. The dev database is a disposable snapshot of production.
6
-
7
- ### The Dev Inner Loop
8
-
9
- 1. Edit method code in `dist/methods/src/` — next method invocation uses updated code automatically
10
- 2. Edit frontend code in `dist/interfaces/web/src/` — HMR updates the browser instantly
11
- 3. Add/modify table definitions — schema changes sync to the dev database automatically
12
- 4. Run scenarios to set up specific data states for testing
13
-
14
- ### Dev Database
15
-
16
- The dev session gets its own database — a snapshot of the live database at session start. Your code writes to this snapshot, not to production.
17
-
18
- - **Reset to live data** — overwrite the dev database with a fresh copy of production
19
- - **Truncate** — keep the schema, delete all row data (used by scenarios for a clean canvas)
20
- - **Schema sync** — add a field to a table interface and it's immediately available in dev
21
-
22
- The dev database is disposable. Experiment freely — there's no risk of breaking anything.
23
-
24
- ### Debugging
25
-
26
- `console.log`, `console.warn`, and `console.error` in methods are captured and displayed in the terminal. They don't affect the method's return value. Every method execution is logged with full input, output, duration, and error info.
27
-
28
- ## What Happens on Deploy
29
-
30
- ```bash
31
- git push origin main
32
- ```
33
-
34
- The platform builds and deploys automatically:
35
-
36
- 1. **Parse manifest** — read `mindstudio.json` from the commit
37
- 2. **Compile methods** — esbuild bundles each method into a single JS file
38
- 3. **Compile interfaces** — build web SPA (`npm install && npm run build`), generate configs for API/Discord/Telegram/cron/etc.
39
- 4. **Parse table schemas** — TypeScript AST to column definitions, diff against live database
40
- 5. **Compute effects** — roles diff, cron diff, bot command diffs, table DDL
41
- 6. **Apply** — create/update roles, sync bot commands, apply DDL to a staging database copy, swap the live pointer
42
-
43
- ### Preview Deployments
44
-
45
- Push to a non-default branch for a preview deployment — same build pipeline, but doesn't affect the live app. Useful for testing changes before merging.
46
-
47
- ### Database Migrations on Deploy
48
-
49
- Schema changes are automatic:
50
- - **New tables** — `CREATE TABLE` applied automatically
51
- - **New columns** — `ALTER TABLE ADD COLUMN` applied automatically
52
- - **Dropped columns** — `ALTER TABLE DROP COLUMN` applied automatically when a column is removed from the interface
53
- - **Dropped tables** — `DROP TABLE` applied automatically when a table file is removed from the manifest
54
- - **Type changes and renames** — not supported in the automatic migration path
55
-
56
- Schema changes are always applied to a clone of the live database, never directly. If DDL fails, the live database is untouched and the release is marked `failed`.
57
-
58
- ### Rollback
59
-
60
- Rollback is a git revert — creates a new commit, triggers a new build. The previous release's database still exists (databases are per-release), so data isn't lost.
61
-
62
- ### Common Build Failures
63
-
64
- - **Method compilation error** — TypeScript/syntax error in a method file. Error message includes file and line.
65
- - **Web build error** — npm install or build command failed. Check build log stdout/stderr.
66
- - **Table schema error** — TypeScript file couldn't be parsed. Ensure the table definition uses the `defineTable<T>()` pattern.
67
- - **Missing manifest fields** — method declared but path doesn't exist, or export doesn't match.
68
-
69
- Failed releases don't affect the current live release.