@symbo.ls/mcp 1.0.10 → 1.0.11
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/package.json +5 -2
- package/symbols_mcp/skills/COMPONENTS.md +421 -0
- package/symbols_mcp/skills/DESIGN_SYSTEM.md +430 -0
- package/symbols_mcp/skills/MIGRATION.md +520 -0
- package/symbols_mcp/skills/PATTERNS.md +509 -0
- package/symbols_mcp/skills/PROJECT_STRUCTURE.md +400 -0
- package/symbols_mcp/skills/RULES.md +488 -0
- package/symbols_mcp/skills/SEO-METADATA.md +41 -1
- package/symbols_mcp/skills/SYNTAX.md +777 -0
- package/symbols_mcp/skills/ACCESSIBILITY.md +0 -471
- package/symbols_mcp/skills/ACCESSIBILITY_AUDITORY.md +0 -70
- package/symbols_mcp/skills/AGENT_INSTRUCTIONS.md +0 -265
- package/symbols_mcp/skills/BUILT_IN_COMPONENTS.md +0 -304
- package/symbols_mcp/skills/CLAUDE.md +0 -2158
- package/symbols_mcp/skills/CLI_QUICK_START.md +0 -205
- package/symbols_mcp/skills/DEFAULT_COMPONENTS.md +0 -2002
- package/symbols_mcp/skills/DEFAULT_DESIGN_SYSTEM.md +0 -496
- package/symbols_mcp/skills/DESIGN_SYSTEM_CONFIG.md +0 -487
- package/symbols_mcp/skills/DESIGN_SYSTEM_IN_PROPS.md +0 -136
- package/symbols_mcp/skills/DOMQL_v2-v3_MIGRATION.md +0 -236
- package/symbols_mcp/skills/MIGRATE_TO_SYMBOLS.md +0 -634
- package/symbols_mcp/skills/OPTIMIZATIONS_FOR_AGENT.md +0 -253
- package/symbols_mcp/skills/PROJECT_SETUP.md +0 -217
- package/symbols_mcp/skills/QUICKSTART.md +0 -79
- package/symbols_mcp/skills/REMOTE_PREVIEW.md +0 -144
- package/symbols_mcp/skills/SYMBOLS_LOCAL_INSTRUCTIONS.md +0 -1405
- package/symbols_mcp/skills/UI_UX_PATTERNS.md +0 -68
|
@@ -1,253 +0,0 @@
|
|
|
1
|
-
# Optimize Your Symbols Site for AI Agents
|
|
2
|
-
|
|
3
|
-
## A Practical Guide to Accessibility, ARIA, and Emerging Standards
|
|
4
|
-
|
|
5
|
-
### AI Skill Instruction for Coding Assistants
|
|
6
|
-
|
|
7
|
-
This document is the definitive guide for generating Symbols (DOMQL v3) code fully interpretable by AI agents, accessibility tools, and automated systems. All output must comply with the following rules and standards.
|
|
8
|
-
|
|
9
|
-
---
|
|
10
|
-
|
|
11
|
-
# 1. Semantic-First Architecture
|
|
12
|
-
|
|
13
|
-
Always generate semantic components instead of generic containers. Use these mappings:
|
|
14
|
-
|
|
15
|
-
| Intent | Required Component |
|
|
16
|
-
| ------------------------------------ | --------------------- |
|
|
17
|
-
| Page header | Header |
|
|
18
|
-
| Navigation | Nav |
|
|
19
|
-
| Primary content | Main |
|
|
20
|
-
| Standalone entity (product, article) | Article |
|
|
21
|
-
| Thematic grouping | Section |
|
|
22
|
-
| Sidebar | Aside |
|
|
23
|
-
| Footer | Footer |
|
|
24
|
-
| H1–H6 | Headings |
|
|
25
|
-
| P | Paragraphs |
|
|
26
|
-
| Button | Actions |
|
|
27
|
-
| Link | Navigation |
|
|
28
|
-
| Form | Transactional surface |
|
|
29
|
-
| Input / Select | User input |
|
|
30
|
-
|
|
31
|
-
Do not simulate meaning with generic divs or spans.
|
|
32
|
-
|
|
33
|
-
---
|
|
34
|
-
|
|
35
|
-
# 2. DOMQL v3 Compliance
|
|
36
|
-
|
|
37
|
-
- Use DOMQL v3 syntax exclusively.
|
|
38
|
-
- Set HTML attributes via `attr`.
|
|
39
|
-
- Prefix event handlers with `on`.
|
|
40
|
-
- Ensure all critical content is server-rendered and visible in the initial HTML.
|
|
41
|
-
|
|
42
|
-
---
|
|
43
|
-
|
|
44
|
-
# 3. Heading Discipline
|
|
45
|
-
|
|
46
|
-
- One H1 per page defining primary subject.
|
|
47
|
-
- Logical hierarchy: H1 → H2 → H3, etc.
|
|
48
|
-
- Nested headings should not skip levels.
|
|
49
|
-
|
|
50
|
-
Heading hierarchy is used by AI agents to determine page structure.
|
|
51
|
-
|
|
52
|
-
---
|
|
53
|
-
|
|
54
|
-
# 4. Interactive Elements
|
|
55
|
-
|
|
56
|
-
- Use native elements: Button, Link, Form, Input, Select.
|
|
57
|
-
- If non-native interactive elements are unavoidable, declare:
|
|
58
|
-
|
|
59
|
-
```javascript
|
|
60
|
-
attr: {
|
|
61
|
-
role: 'button',
|
|
62
|
-
tabindex: '0'
|
|
63
|
-
}
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
- Do not rely on visual styling to indicate interactivity.
|
|
67
|
-
|
|
68
|
-
---
|
|
69
|
-
|
|
70
|
-
# 5. Accessibility as Machine Interface
|
|
71
|
-
|
|
72
|
-
ARIA attributes define machine-readable state:
|
|
73
|
-
|
|
74
|
-
- `aria-busy`: reflects loading.
|
|
75
|
-
- `aria-label`: accessible name when visible text is insufficient.
|
|
76
|
-
- `aria-live`: indicates dynamic content.
|
|
77
|
-
- `autocomplete`: guides expected input format.
|
|
78
|
-
|
|
79
|
-
ARIA values must match actual runtime state.
|
|
80
|
-
|
|
81
|
-
---
|
|
82
|
-
|
|
83
|
-
# 6. AI-Specific Markup (aid-\*)
|
|
84
|
-
|
|
85
|
-
Include aid-\* attributes to optimize machine parsing:
|
|
86
|
-
|
|
87
|
-
- `aid-type`: structural role (header, nav, main, content, complementary, interactive, modal, alert, search)
|
|
88
|
-
- `aid-desc`: concise machine-readable description
|
|
89
|
-
- `aid-state`: idle, loading, processing, done, error
|
|
90
|
-
- `aid-cnt-type`: product, service, info
|
|
91
|
-
|
|
92
|
-
State must accurately reflect dynamic changes.
|
|
93
|
-
|
|
94
|
-
---
|
|
95
|
-
|
|
96
|
-
# 7. Structured Data (JSON-LD)
|
|
97
|
-
|
|
98
|
-
Include JSON-LD for entity representation:
|
|
99
|
-
|
|
100
|
-
- Organization
|
|
101
|
-
- Product / Service
|
|
102
|
-
- Article
|
|
103
|
-
- FAQPage
|
|
104
|
-
- BreadcrumbList
|
|
105
|
-
|
|
106
|
-
Structured data must match server-rendered content exactly.
|
|
107
|
-
|
|
108
|
-
```javascript
|
|
109
|
-
export const StructuredData = {
|
|
110
|
-
tag: "script",
|
|
111
|
-
attr: { type: "application/ld+json" },
|
|
112
|
-
html: (el, s) =>
|
|
113
|
-
JSON.stringify({
|
|
114
|
-
"@context": "https://schema.org",
|
|
115
|
-
"@type": "Product",
|
|
116
|
-
name: s.name,
|
|
117
|
-
description: s.description,
|
|
118
|
-
offers: {
|
|
119
|
-
"@type": "Offer",
|
|
120
|
-
price: s.price,
|
|
121
|
-
priceCurrency: s.currency,
|
|
122
|
-
},
|
|
123
|
-
}),
|
|
124
|
-
};
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
---
|
|
128
|
-
|
|
129
|
-
# 8. Form Construction Protocol
|
|
130
|
-
|
|
131
|
-
- Associate labels using `for` + `id` or nest input inside label.
|
|
132
|
-
- Define `name` and `type` attributes.
|
|
133
|
-
- Use `autocomplete` when relevant.
|
|
134
|
-
- Reflect submission state via `aria-busy` or `aid-state`.
|
|
135
|
-
|
|
136
|
-
Forms must be machine-submittable without heuristic inference.
|
|
137
|
-
|
|
138
|
-
---
|
|
139
|
-
|
|
140
|
-
# 9. Explicit Identifiers
|
|
141
|
-
|
|
142
|
-
Use deterministic IDs and class names for reliable referencing:
|
|
143
|
-
|
|
144
|
-
```javascript
|
|
145
|
-
attr: {
|
|
146
|
-
id: `entity-${s.id}`,
|
|
147
|
-
class: 'entity-card'
|
|
148
|
-
}
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
---
|
|
152
|
-
|
|
153
|
-
# 10. llms.txt Support
|
|
154
|
-
|
|
155
|
-
Provide `/llms.txt` for AI guidance:
|
|
156
|
-
|
|
157
|
-
```text
|
|
158
|
-
# Organization Name
|
|
159
|
-
# Purpose: Platform description
|
|
160
|
-
|
|
161
|
-
## Key pages
|
|
162
|
-
- /products
|
|
163
|
-
- /api/docs
|
|
164
|
-
- /support
|
|
165
|
-
|
|
166
|
-
## Preferred interactions
|
|
167
|
-
- /api/v2/ programmatic access
|
|
168
|
-
- /search?q= for search
|
|
169
|
-
|
|
170
|
-
## Data accuracy
|
|
171
|
-
- Prices, shipping, inventory levels
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
AI agents must use llms.txt for programmatic routing and content interpretation.
|
|
175
|
-
|
|
176
|
-
---
|
|
177
|
-
|
|
178
|
-
# 11. Testing Instructions
|
|
179
|
-
|
|
180
|
-
### Manual Testing
|
|
181
|
-
|
|
182
|
-
- Ask AI agents to describe page content, locate products, report prices, and identify support channels.
|
|
183
|
-
|
|
184
|
-
### Automated Testing
|
|
185
|
-
|
|
186
|
-
```javascript
|
|
187
|
-
export const testAgentComprehension = async function (url, prompt) {
|
|
188
|
-
const response = await fetch("https://api.agent-simulator.com/ask", {
|
|
189
|
-
method: "POST",
|
|
190
|
-
body: JSON.stringify({ url, prompt }),
|
|
191
|
-
});
|
|
192
|
-
return response.json();
|
|
193
|
-
};
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
---
|
|
197
|
-
|
|
198
|
-
# 12. Chrome WebMCP / Tool Exposure
|
|
199
|
-
|
|
200
|
-
Use descriptive attributes for AI-accessible tools:
|
|
201
|
-
|
|
202
|
-
```javascript
|
|
203
|
-
export const CheckOrderTool = {
|
|
204
|
-
extends: "Form",
|
|
205
|
-
attr: {
|
|
206
|
-
"data-mcp-tool": "checkOrderStatus",
|
|
207
|
-
"data-mcp-description": "Check the status of an order by ID",
|
|
208
|
-
},
|
|
209
|
-
Input: { attr: { type: "text", name: "orderId", placeholder: "Order ID" } },
|
|
210
|
-
Button: { type: "submit", text: "Check" },
|
|
211
|
-
};
|
|
212
|
-
```
|
|
213
|
-
|
|
214
|
-
---
|
|
215
|
-
|
|
216
|
-
# 13. Infrastructure Awareness
|
|
217
|
-
|
|
218
|
-
- Expect bursty agent traffic.
|
|
219
|
-
- Horizontal scaling preferred.
|
|
220
|
-
- Sub-200ms response targets.
|
|
221
|
-
- Intelligent rate limiting for abusive requests.
|
|
222
|
-
|
|
223
|
-
---
|
|
224
|
-
|
|
225
|
-
# 14. Failure Pattern Recognition
|
|
226
|
-
|
|
227
|
-
- Excessive divs without semantics
|
|
228
|
-
- Non-descriptive links
|
|
229
|
-
- Missing headings
|
|
230
|
-
- Critical content rendered client-side only
|
|
231
|
-
- Conflicting metadata
|
|
232
|
-
|
|
233
|
-
---
|
|
234
|
-
|
|
235
|
-
# 15. Output Verification Checklist
|
|
236
|
-
|
|
237
|
-
Ensure all generated code meets these requirements:
|
|
238
|
-
|
|
239
|
-
- Semantic components only
|
|
240
|
-
- One H1 per page
|
|
241
|
-
- Buttons for actions, Links for navigation
|
|
242
|
-
- Labeled and named forms
|
|
243
|
-
- Dynamic regions declare state
|
|
244
|
-
- JSON-LD matches content
|
|
245
|
-
- Server-rendered critical content
|
|
246
|
-
|
|
247
|
-
Any violation requires regeneration.
|
|
248
|
-
|
|
249
|
-
---
|
|
250
|
-
|
|
251
|
-
# Operational Principle
|
|
252
|
-
|
|
253
|
-
Generate Symbols code assuming AI agents parse and act on it before human consumption. Structure, semantics, and state define AI comprehension, safety, and interoperability. Accessibility and aid-\* attributes are part of the machine contract.
|
|
@@ -1,217 +0,0 @@
|
|
|
1
|
-
# Project Setup — LLM Instructions
|
|
2
|
-
|
|
3
|
-
These are step-by-step instructions for LLMs to follow when helping a user create, configure, and manage a Symbols project using the CLI.
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
## Step 1: Check CLI Installation
|
|
8
|
-
|
|
9
|
-
Before anything else, verify the CLI is installed:
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
smbls --help
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
If the command is not found, install it globally:
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
npm i -g @symbo.ls/cli
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
---
|
|
22
|
-
|
|
23
|
-
## Step 2: Check Authentication
|
|
24
|
-
|
|
25
|
-
Run the following to check if the user is signed in:
|
|
26
|
-
|
|
27
|
-
```bash
|
|
28
|
-
smbls login --check
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
If the user is **not signed in**, prompt them:
|
|
32
|
-
|
|
33
|
-
> You're not signed in to Symbols. Would you like to sign in now? Signing in unlocks collaboration, platform syncing, remote preview, and project management.
|
|
34
|
-
|
|
35
|
-
If they agree, run:
|
|
36
|
-
|
|
37
|
-
```bash
|
|
38
|
-
smbls login
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
If they have multiple environments/servers configured, they can list or switch:
|
|
42
|
-
|
|
43
|
-
```bash
|
|
44
|
-
smbls servers
|
|
45
|
-
smbls servers --select
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
---
|
|
49
|
-
|
|
50
|
-
## Step 3: Create a New Project
|
|
51
|
-
|
|
52
|
-
Ask the user for a project name. Then decide between local-only or platform-linked creation.
|
|
53
|
-
|
|
54
|
-
### Option A: Local-only project (fastest)
|
|
55
|
-
|
|
56
|
-
```bash
|
|
57
|
-
smbls create <project-name>
|
|
58
|
-
cd <project-name>
|
|
59
|
-
npm start
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
This scaffolds a DOMQL starter project with dependencies installed.
|
|
63
|
-
|
|
64
|
-
### Option B: Platform-linked project (unlocks collaboration + remote preview)
|
|
65
|
-
|
|
66
|
-
Requires authentication (Step 2). Creates both a local project and a linked platform project:
|
|
67
|
-
|
|
68
|
-
```bash
|
|
69
|
-
smbls project create <project-name> --create-new
|
|
70
|
-
cd <project-name>
|
|
71
|
-
npm start
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
This writes:
|
|
75
|
-
- `symbols.json` — project key and config
|
|
76
|
-
- `.symbols/config.json` — platform link (`projectKey`, `projectId`, `apiBaseUrl`, `branch`)
|
|
77
|
-
|
|
78
|
-
### CLI Options
|
|
79
|
-
|
|
80
|
-
**Package manager:**
|
|
81
|
-
|
|
82
|
-
```bash
|
|
83
|
-
smbls project create <project-name> --package-manager npm
|
|
84
|
-
smbls project create <project-name> --package-manager yarn
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
**Skip dependency install:**
|
|
88
|
-
|
|
89
|
-
```bash
|
|
90
|
-
smbls project create <project-name> --no-dependencies
|
|
91
|
-
cd <project-name>
|
|
92
|
-
npm i
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
---
|
|
96
|
-
|
|
97
|
-
## Step 4: Link an Existing Platform Project (optional)
|
|
98
|
-
|
|
99
|
-
If the user already has a platform project and wants to link it to a local folder:
|
|
100
|
-
|
|
101
|
-
```bash
|
|
102
|
-
# Interactive picker
|
|
103
|
-
smbls project link .
|
|
104
|
-
|
|
105
|
-
# Non-interactive
|
|
106
|
-
smbls project link . --key <project-key>.symbo.ls
|
|
107
|
-
smbls project link . --id <projectId>
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
---
|
|
111
|
-
|
|
112
|
-
## Step 5: Inform About Sync & Collaboration
|
|
113
|
-
|
|
114
|
-
After the project is created, explain the core sync commands:
|
|
115
|
-
|
|
116
|
-
> Your project supports syncing with the Symbols platform. Here's what's available:
|
|
117
|
-
>
|
|
118
|
-
> - **`smbls push`** — Upload local changes to the platform
|
|
119
|
-
> - **`smbls fetch --update`** — Download the latest platform snapshot into local files
|
|
120
|
-
> - **`smbls sync`** — Two-way sync with interactive conflict handling
|
|
121
|
-
> - **`smbls collab`** — Watch mode for live collaboration (run in a separate terminal)
|
|
122
|
-
|
|
123
|
-
### File asset management:
|
|
124
|
-
|
|
125
|
-
```bash
|
|
126
|
-
smbls files list # List project files
|
|
127
|
-
smbls files upload # Upload files
|
|
128
|
-
smbls files download # Download files
|
|
129
|
-
smbls files rm # Remove files
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
---
|
|
133
|
-
|
|
134
|
-
## Step 6: Ask About Pushing First Changes
|
|
135
|
-
|
|
136
|
-
After making initial edits or scaffolding, ask the user:
|
|
137
|
-
|
|
138
|
-
> Would you like to push your initial changes to the Symbols platform now?
|
|
139
|
-
|
|
140
|
-
If **yes**, run:
|
|
141
|
-
|
|
142
|
-
```bash
|
|
143
|
-
smbls push
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
Then ask:
|
|
147
|
-
|
|
148
|
-
> Would you like me to automatically push changes to the platform after each edit I make?
|
|
149
|
-
|
|
150
|
-
If they agree, run `smbls push` after every file edit session. If they decline, only push when explicitly asked.
|
|
151
|
-
|
|
152
|
-
---
|
|
153
|
-
|
|
154
|
-
## Step 7: Show Remote Preview Links
|
|
155
|
-
|
|
156
|
-
After a successful push (or if the project is already linked to the platform), provide the user with their project links using the following patterns:
|
|
157
|
-
|
|
158
|
-
### Canvas / Editor Link
|
|
159
|
-
|
|
160
|
-
```
|
|
161
|
-
https://<app>.<user>.preview.symbo.ls/
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
### With environment (dev, stage, etc.)
|
|
165
|
-
|
|
166
|
-
```
|
|
167
|
-
https://<env>.<app>.<user>.preview.symbo.ls/
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
### With subpath
|
|
171
|
-
|
|
172
|
-
```
|
|
173
|
-
https://<app>.<user>.preview.symbo.ls/<subpath>
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
Where:
|
|
177
|
-
- `<user>` — the namespace owner identifier (their Symbols username or org)
|
|
178
|
-
- `<app>` — the application/project identifier
|
|
179
|
-
- `<env>` — optional deployment environment (`dev`, `stage`, etc.)
|
|
180
|
-
- `<subpath>` — optional path forwarded to the app
|
|
181
|
-
|
|
182
|
-
**Example:** For user `nikoloza` with project `my-app`:
|
|
183
|
-
|
|
184
|
-
```
|
|
185
|
-
Preview: https://my-app.nikoloza.preview.symbo.ls/
|
|
186
|
-
Dev env: https://dev.my-app.nikoloza.preview.symbo.ls/
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
Tell the user:
|
|
190
|
-
|
|
191
|
-
> Your project is live! Here are your links:
|
|
192
|
-
> - **Preview:** https://<app>.<user>.preview.symbo.ls/
|
|
193
|
-
> - **Canvas:** Available on the Symbols platform at your project page
|
|
194
|
-
>
|
|
195
|
-
> These update automatically when you push changes.
|
|
196
|
-
|
|
197
|
-
---
|
|
198
|
-
|
|
199
|
-
## Troubleshooting
|
|
200
|
-
|
|
201
|
-
- **Auth required / access denied** — run `smbls login` again
|
|
202
|
-
- **Missing project key** — ensure `symbols.json` has a `key` or link via `smbls project link .`
|
|
203
|
-
- **More detail needed** — add `--verbose` to commands that support it
|
|
204
|
-
- **Shell auto-completion** — run `smbls completion zsh --install` or `smbls completion bash --install`
|
|
205
|
-
|
|
206
|
-
---
|
|
207
|
-
|
|
208
|
-
## Summary of LLM Behavior
|
|
209
|
-
|
|
210
|
-
1. Ensure CLI is installed
|
|
211
|
-
2. Check sign-in status; prompt login if needed
|
|
212
|
-
3. Create the project (local-only or platform-linked based on user preference)
|
|
213
|
-
4. Start the dev server with `npm start`
|
|
214
|
-
5. Explain push, fetch, sync, and collab capabilities
|
|
215
|
-
6. Ask if the user wants to push initial changes
|
|
216
|
-
7. Ask if the user wants auto-push after each edit
|
|
217
|
-
8. Display preview and canvas links using the host pattern
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
# Symbols CLI Setup & Usage Guide
|
|
2
|
-
|
|
3
|
-
## Getting Started
|
|
4
|
-
|
|
5
|
-
You can start using Symbols in your local environment using the CLI tool.
|
|
6
|
-
|
|
7
|
-
### Installation
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm i @symbo.ls/cli -g
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
### Create a New Project
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
smbls create projectName
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
This will scaffold the project and setup npm dependencies.
|
|
20
|
-
|
|
21
|
-
## AI Integration
|
|
22
|
-
|
|
23
|
-
To prompt AI, you can point to the documentation in the first line:
|
|
24
|
-
|
|
25
|
-
```
|
|
26
|
-
Use instructions from all .md files from /docs folder
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
### What It Works Well With
|
|
30
|
-
|
|
31
|
-
- **Extend existing symbols apps** (best)
|
|
32
|
-
- **Migrating existing projects**
|
|
33
|
-
- **Scaffold something new**
|
|
34
|
-
|
|
35
|
-
It also works with screenshots and Figma MCP that you can try out with uploads or connects. This will give you an initial config that should be good at a basic level. Once @Ha Le provides the update, we can test it on a more professional/fine-tuned stack.
|
|
36
|
-
|
|
37
|
-
## Recommended AI Coding Tools
|
|
38
|
-
|
|
39
|
-
- **Claude Code** - best
|
|
40
|
-
- **Cursor and Antigravity** - very good
|
|
41
|
-
- **Copilot / Codex** - good but not sure
|
|
42
|
-
|
|
43
|
-
## Platform Upload
|
|
44
|
-
|
|
45
|
-
If you need to upload your project to the platform, part of the process is outlined in the documentation. @Thomas Zhang has additional features that are not yet documented, but you can navigate with:
|
|
46
|
-
|
|
47
|
-
```bash
|
|
48
|
-
smbls --help
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
## Advanced CLI Commands
|
|
52
|
-
|
|
53
|
-
### Project Management
|
|
54
|
-
|
|
55
|
-
```bash
|
|
56
|
-
smbls project <sub-commands>
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
Future additions planned:
|
|
60
|
-
|
|
61
|
-
- `smbls project <member management>`
|
|
62
|
-
- `smbls project <libs management>`
|
|
63
|
-
- `smbls organization <sub-commands>`
|
|
64
|
-
|
|
65
|
-
### Shell Auto-Completion
|
|
66
|
-
|
|
67
|
-
Setup auto-completion for your shell:
|
|
68
|
-
|
|
69
|
-
```bash
|
|
70
|
-
# For Zsh
|
|
71
|
-
smbls completion zsh --install
|
|
72
|
-
|
|
73
|
-
# For Bash
|
|
74
|
-
smbls completion bash --install
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
---
|
|
78
|
-
|
|
79
|
-
_Documentation compiled from community discussions. For the latest updates, refer to the official Symbols documentation or use `smbls --help`._
|
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
# Redirect Pattern --- Quick Documentation
|
|
2
|
-
|
|
3
|
-
## Purpose
|
|
4
|
-
|
|
5
|
-
Edge redirect rule mapping path-based preview routes into host-based
|
|
6
|
-
preview domains.
|
|
7
|
-
|
|
8
|
-
Transforms:
|
|
9
|
-
|
|
10
|
-
/:user/:app/(optional subpath)?env=ENV
|
|
11
|
-
|
|
12
|
-
into:
|
|
13
|
-
|
|
14
|
-
https://{env.}app.user.preview.symbo.ls/(optional subpath)
|
|
15
|
-
|
|
16
|
-
---
|
|
17
|
-
|
|
18
|
-
## Route Contract
|
|
19
|
-
|
|
20
|
-
### Input Path Structure
|
|
21
|
-
|
|
22
|
-
/:user/:app/:subpath*
|
|
23
|
-
|
|
24
|
-
Segment Required Description
|
|
25
|
-
|
|
26
|
-
---
|
|
27
|
-
|
|
28
|
-
`user` yes Namespace owner identifier
|
|
29
|
-
`app` yes Application identifier
|
|
30
|
-
`subpath` no Forwarded unchanged
|
|
31
|
-
|
|
32
|
-
Requests with fewer than two segments are passed through without
|
|
33
|
-
modification.
|
|
34
|
-
|
|
35
|
-
---
|
|
36
|
-
|
|
37
|
-
### Query Parameters
|
|
38
|
-
|
|
39
|
-
Param Behavior
|
|
40
|
-
|
|
41
|
-
---
|
|
42
|
-
|
|
43
|
-
`env` Optional deployment environment selector
|
|
44
|
-
others Forwarded unchanged
|
|
45
|
-
|
|
46
|
-
`env` is removed from query before redirect.
|
|
47
|
-
|
|
48
|
-
---
|
|
49
|
-
|
|
50
|
-
## Host Resolution
|
|
51
|
-
|
|
52
|
-
### Without Environment
|
|
53
|
-
|
|
54
|
-
{app}.{user}.preview.symbo.ls
|
|
55
|
-
|
|
56
|
-
### With Environment
|
|
57
|
-
|
|
58
|
-
{env}.{app}.{user}.preview.symbo.ls
|
|
59
|
-
|
|
60
|
-
---
|
|
61
|
-
|
|
62
|
-
## Redirect Construction
|
|
63
|
-
|
|
64
|
-
Final URL:
|
|
65
|
-
|
|
66
|
-
https://TARGET_HOST/
|
|
67
|
-
+ subpath
|
|
68
|
-
+ remaining query string
|
|
69
|
-
|
|
70
|
-
Status code:
|
|
71
|
-
|
|
72
|
-
302 Temporary Redirect
|
|
73
|
-
|
|
74
|
-
---
|
|
75
|
-
|
|
76
|
-
## Processing Flow
|
|
77
|
-
|
|
78
|
-
1. Parse URL.
|
|
79
|
-
2. Split pathname segments.
|
|
80
|
-
3. Validate segment count ≥ 2.
|
|
81
|
-
4. Extract:
|
|
82
|
-
- user
|
|
83
|
-
- app
|
|
84
|
-
- subpath
|
|
85
|
-
5. Read `env`.
|
|
86
|
-
6. Remove `env` from query.
|
|
87
|
-
7. Construct target host.
|
|
88
|
-
8. Assemble redirect URL.
|
|
89
|
-
9. Issue redirect response.
|
|
90
|
-
|
|
91
|
-
---
|
|
92
|
-
|
|
93
|
-
## Examples
|
|
94
|
-
|
|
95
|
-
### Basic
|
|
96
|
-
|
|
97
|
-
Input:
|
|
98
|
-
https://domain/x/alfa
|
|
99
|
-
|
|
100
|
-
Output:
|
|
101
|
-
https://alfa.x.preview.symbo.ls/
|
|
102
|
-
|
|
103
|
-
### With Subpath
|
|
104
|
-
|
|
105
|
-
Input:
|
|
106
|
-
https://domain/x/alfa/api/v1
|
|
107
|
-
|
|
108
|
-
Output:
|
|
109
|
-
https://alfa.x.preview.symbo.ls/api/v1
|
|
110
|
-
|
|
111
|
-
### With Environment
|
|
112
|
-
|
|
113
|
-
Input:
|
|
114
|
-
https://domain/x/alfa/editor?env=dev
|
|
115
|
-
|
|
116
|
-
Output:
|
|
117
|
-
https://dev.alfa.x.preview.symbo.ls/editor
|
|
118
|
-
|
|
119
|
-
### With Additional Query
|
|
120
|
-
|
|
121
|
-
Input:
|
|
122
|
-
https://domain/x/alfa/view?id=4&env=stage
|
|
123
|
-
|
|
124
|
-
Output:
|
|
125
|
-
https://stage.alfa.x.preview.symbo.ls/view?id=4
|
|
126
|
-
|
|
127
|
-
---
|
|
128
|
-
|
|
129
|
-
## Edge Considerations
|
|
130
|
-
|
|
131
|
-
- No validation of segment encoding
|
|
132
|
-
- No sanitization of host fragments
|
|
133
|
-
- Relies on client redirect follow
|
|
134
|
-
- Temporary status avoids cache locking
|
|
135
|
-
- Does not normalize trailing slash
|
|
136
|
-
- Does not preserve fragments (`#hash`)
|
|
137
|
-
- Assumes HTTPS termination upstream
|
|
138
|
-
|
|
139
|
-
---
|
|
140
|
-
|
|
141
|
-
## Intended Use
|
|
142
|
-
|
|
143
|
-
Preview routing layer for multi-tenant namespace virtualization
|
|
144
|
-
resolving path entrypoints into isolated host environments.
|