Skip to content

Commit 75c9948

Browse files
tadejrebernjaktadejrebernjak
committed
task: update docs
1 parent e3ea686 commit 75c9948

File tree

4 files changed

+97
-62
lines changed

4 files changed

+97
-62
lines changed

‎README.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,7 @@ This template supports two distinct development workflows:
1919

2020
**When to use:** Starting a new project where the backend doesn't exist yet. You'll develop the frontend with a temporary Supabase backend, then generate an OpenAPI specification for the backend team to implement.
2121

22-
**Get started:**
23-
24-
```
25-
http://bolt.new/github.com/povio/bolt-rn-template
26-
```
22+
**Get started:** http://bolt.new/github.com/povio/bolt-rn-template
2723

2824
📖 **[Read the full Mode 1 documentation](docs/bolt/1_supabase.md)**
2925

@@ -33,16 +29,20 @@ http://bolt.new/github.com/povio/bolt-rn-template
3329

3430
**When to use:** Backend is already developed or being developed in parallel and is deployed with an accessible OpenAPI specification endpoint.
3531

36-
**Get started:**
37-
38-
```
39-
http://bolt.new/github.com/povio/bolt-rn-template/tree/external-be
40-
```
32+
**Get started:** http://bolt.new/github.com/povio/bolt-rn-template/tree/external-be
4133

4234
📖 **[Read the full Mode 2 documentation](docs/bolt/2_external_api.md)**
4335

4436
---
4537

38+
## Prompting & Design Guide
39+
40+
**Essential reading:** Best practices for prompting Bolt effectively, choosing AI models, using planning mode, and implementing designs.
41+
42+
📖 **[Read the Prompting Guide](docs/bolt/3_prompting_design.md)**
43+
44+
---
45+
4646
## Reference Examples
4747

4848
The template comes with a pre-implemented example "flowers" feature with screens, modules and a data layer. This code can be used as a reference for yourself and Bolt. The code can be removed if Bolt does not remove it automatically.
@@ -51,7 +51,7 @@ The template comes with a pre-implemented example "flowers" feature with screens
5151

5252
## Additional Resources
5353

54-
- **Mode-specific Documentation**: `docs/bolt/` directory
54+
- **Bolt Documentation**: `docs/bolt/` directory
5555
- **General Bolt rules**: `.bolt/prompt`
5656

5757
---

‎docs/bolt/1_supabase.md‎

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,7 @@ These are common pitfalls and bugs you might encounter. Click to jump to detaile
1919

2020
# Prompting
2121

22-
- Keep prompts to max one new feature at a time
23-
- When fixing bugs, give more technical directions on how to fix if possible
24-
- After each prompt Bolt creates a checkpoint that you can revert back to
25-
- You can also edit code manually and run commands in the terminal
22+
For general prompting tips, AI model selection, and planning mode, see the **[Prompting Guide](./3_prompting_design.md)**.
2623

2724
## First Prompt
2825

@@ -34,27 +31,6 @@ Build me an app named ... which will have the features ... Start with the user a
3431

3532
Bolt should replace the mock authentication code with its Supabase integration. Make sure it did this step correctly (check Authentication section).
3633

37-
## Design & Styling
38-
39-
By default, Bolt apps may look "bland" because the AI by default only styles components via props from the generated theme (Atlas defaults unless changed).
40-
41-
**If you have a design or concept available:**
42-
43-
- Generate your theme from Figma and override the defaults
44-
- Provide Bolt with screenshots, mockups, or design references
45-
- Tell it explicitly to match the design, including colors
46-
- Bolt will implement the design and use appropriate colors beyond blue
47-
- If allowed, you may tell it to use `style` overrides on the components to give it more freedom
48-
49-
Example:
50-
51-
```
52-
Here's a screenshot of the design I want. Implement this page matching the design,
53-
including the color scheme shown in the image.
54-
```
55-
56-
---
57-
5834
# Rules & Possible Pitfalls
5935

6036
## Data Layer

‎docs/bolt/2_external_api.md‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,7 @@ These are common pitfalls and bugs you might encounter. Click to jump to detaile
3838

3939
# Prompting
4040

41-
- Keep prompts to max one new feature at a time
42-
- If Bolt can't find the correct queries/models to use for a feature, tell it explicitly what to use
43-
- When fixing bugs, give more technical directions on how to fix if possible
44-
- After each prompt Bolt creates a checkpoint that you can revert back to
45-
- You can also edit code manually and run commands in the terminal
41+
For general prompting tips, AI model selection, and planning mode, see the **[Prompting Guide](./3_prompting_design.md)**.
4642

4743
## First Prompt
4844

@@ -56,27 +52,6 @@ Use the provided external REST API - all queries and mutations were generated in
5652
5753
Bolt should replace the mock authentication logic to use the accessToken which the Backend provides. Make sure it did this step correctly.
5854
59-
## Design & Styling
60-
61-
By default, Bolt apps may look "bland" because the AI by default only styles components via props from the generated theme (Atlas defaults unless changed).
62-
63-
**If you have a design or concept available:**
64-
65-
- Generate your theme from Figma and override the defaults
66-
- Provide Bolt with screenshots, mockups, or design references
67-
- Tell it explicitly to match the design, including colors
68-
- Bolt will implement the design and use appropriate colors beyond blue
69-
- If allowed, you may tell it to use `style` overrides on the components to give it more freedom
70-
71-
Example:
72-
73-
```
74-
Here's a screenshot of the design I want. Implement this page matching the design,
75-
including the color scheme shown in the image.
76-
```
77-
78-
---
79-
8055
# Rules & Possible Pitfalls
8156
8257
## Data Layer

‎docs/bolt/3_prompting_design.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# Prompting Guide
2+
3+
This guide covers best practices for prompting in Bolt, applicable to both [Supabase mode](./1_supabase.md) and [External API mode](./2_external_api.md).
4+
5+
---
6+
7+
# AI Models
8+
9+
Bolt supports multiple AI models. Choose based on your task complexity and token budget:
10+
11+
| Model | Speed | Token Usage | Best For |
12+
|-------|-------|-------------|----------|
13+
| **Haiku** | Fast | Low | Small tasks with detailed instructions |
14+
| **Sonnet** | Medium | Medium | Smaller features, bugfixes (default) |
15+
| **Opus** | Sometimes slower | High (up to 2x Sonnet) | New features, design-heavy work |
16+
17+
**Recommendations:**
18+
- **Haiku**: Use when you can provide very specific, detailed instructions for small/simple changes
19+
- **Sonnet**: Good balance for most development work - the default choice
20+
- **Opus**: Recommended for new features, especially when using design reference images. Produces better code quality and more accurate design implementations
21+
22+
---
23+
24+
# Planning Mode
25+
26+
Bolt has two interaction modes accessible via the **Plan** button:
27+
28+
| Mode | Description |
29+
|------|-------------|
30+
| **Agent Mode** | Default mode - Bolt immediately implements changes |
31+
| **Planning Mode** | Bolt explains proposed changes before implementing |
32+
33+
**When to use Planning Mode:**
34+
- Complex features where you want to confirm the approach first
35+
- When you're unsure if the AI understood your requirements correctly
36+
- To avoid wasted tokens on unwanted features or misunderstood instructions
37+
- When exploring different implementation options
38+
39+
**How it works:**
40+
1. Click the **Plan** button to switch to Planning Mode
41+
2. Describe what you want to build
42+
3. Bolt will outline the proposed changes without implementing them
43+
4. Review and confirm, or provide corrections
44+
5. Once confirmed, Bolt implements the agreed-upon changes
45+
46+
This helps prevent misunderstandings and saves tokens by catching issues before code is written.
47+
48+
---
49+
50+
# General Prompting Tips
51+
52+
- **One feature at a time**: Keep prompts to max one new feature per prompt
53+
- **Be technical when debugging**: When fixing bugs, provide more technical directions on how to fix if possible
54+
- **Use checkpoints**: After each prompt, Bolt creates a checkpoint you can revert back to
55+
- **Manual edits welcome**: You can also edit code manually and run commands in the terminal
56+
- **Guide the AI**: If Bolt can't find the correct queries/models for a feature, tell it explicitly what to use
57+
58+
---
59+
60+
# Design & Styling
61+
62+
By default, Bolt apps may look "bland" because the AI by default only styles components via props from the generated theme (Atlas defaults unless changed).
63+
64+
**If you have a design, wireframe or concept available:**
65+
66+
- Generate your theme from Figma and override the defaults
67+
- Provide Bolt with screenshots, mockups, or design references
68+
- Tell it explicitly to match the image
69+
- If allowed, you may tell it to use `style` overrides on the components to give it more freedom
70+
71+
Example prompt:
72+
73+
```
74+
Here's an example image of the design I want. Implement this screen matching the design, including the color scheme shown in the image. You may use style overrides on UI components to achieve better accuracy
75+
```
76+
77+
---
78+
79+
# First Prompt
80+
81+
Your first prompt should give an overview of the app and focus on authentication. See mode-specific guidance:
82+
- [Supabase Mode - First Prompt](./1_supabase.md#first-prompt)
83+
- [External API Mode - First Prompt](./2_external_api.md#first-prompt)
84+

0 commit comments

Comments
 (0)