@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.
@@ -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.