@dedesfr/prompter 0.8.23 → 1.0.0
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/CHANGELOG.md +70 -0
- package/README.md +105 -77
- package/dist/cli/index.js +25 -1
- package/dist/cli/index.js.map +1 -1
- package/dist/commands/init.d.ts +1 -7
- package/dist/commands/init.d.ts.map +1 -1
- package/dist/commands/init.js +60 -299
- package/dist/commands/init.js.map +1 -1
- package/dist/commands/login.d.ts +4 -0
- package/dist/commands/login.d.ts.map +1 -0
- package/dist/commands/login.js +56 -0
- package/dist/commands/login.js.map +1 -0
- package/dist/commands/logout.d.ts +4 -0
- package/dist/commands/logout.d.ts.map +1 -0
- package/dist/commands/logout.js +14 -0
- package/dist/commands/logout.js.map +1 -0
- package/dist/commands/update.d.ts.map +1 -1
- package/dist/commands/update.js +31 -41
- package/dist/commands/update.js.map +1 -1
- package/dist/commands/whoami.d.ts +4 -0
- package/dist/commands/whoami.d.ts.map +1 -0
- package/dist/commands/whoami.js +42 -0
- package/dist/commands/whoami.js.map +1 -0
- package/dist/core/auth-store.d.ts +10 -0
- package/dist/core/auth-store.d.ts.map +1 -0
- package/dist/core/auth-store.js +39 -0
- package/dist/core/auth-store.js.map +1 -0
- package/dist/core/configurators/slash/antigravity.d.ts +2 -5
- package/dist/core/configurators/slash/antigravity.d.ts.map +1 -1
- package/dist/core/configurators/slash/antigravity.js +2 -57
- package/dist/core/configurators/slash/antigravity.js.map +1 -1
- package/dist/core/configurators/slash/base.d.ts +6 -18
- package/dist/core/configurators/slash/base.d.ts.map +1 -1
- package/dist/core/configurators/slash/base.js +8 -77
- package/dist/core/configurators/slash/base.js.map +1 -1
- package/dist/core/configurators/slash/claude.d.ts +2 -5
- package/dist/core/configurators/slash/claude.d.ts.map +1 -1
- package/dist/core/configurators/slash/claude.js +2 -57
- package/dist/core/configurators/slash/claude.js.map +1 -1
- package/dist/core/configurators/slash/codex.d.ts +2 -5
- package/dist/core/configurators/slash/codex.d.ts.map +1 -1
- package/dist/core/configurators/slash/codex.js +2 -57
- package/dist/core/configurators/slash/codex.js.map +1 -1
- package/dist/core/configurators/slash/droid.d.ts +2 -5
- package/dist/core/configurators/slash/droid.d.ts.map +1 -1
- package/dist/core/configurators/slash/droid.js +2 -32
- package/dist/core/configurators/slash/droid.js.map +1 -1
- package/dist/core/configurators/slash/forge.d.ts +2 -5
- package/dist/core/configurators/slash/forge.d.ts.map +1 -1
- package/dist/core/configurators/slash/forge.js +2 -32
- package/dist/core/configurators/slash/forge.js.map +1 -1
- package/dist/core/configurators/slash/github-copilot.d.ts +2 -7
- package/dist/core/configurators/slash/github-copilot.d.ts.map +1 -1
- package/dist/core/configurators/slash/github-copilot.js +2 -96
- package/dist/core/configurators/slash/github-copilot.js.map +1 -1
- package/dist/core/configurators/slash/index.d.ts +1 -1
- package/dist/core/configurators/slash/index.d.ts.map +1 -1
- package/dist/core/configurators/slash/index.js +1 -1
- package/dist/core/configurators/slash/index.js.map +1 -1
- package/dist/core/configurators/slash/kilocode.d.ts +2 -5
- package/dist/core/configurators/slash/kilocode.d.ts.map +1 -1
- package/dist/core/configurators/slash/kilocode.js +2 -57
- package/dist/core/configurators/slash/kilocode.js.map +1 -1
- package/dist/core/configurators/slash/opencode.d.ts +2 -5
- package/dist/core/configurators/slash/opencode.d.ts.map +1 -1
- package/dist/core/configurators/slash/opencode.js +2 -57
- package/dist/core/configurators/slash/opencode.js.map +1 -1
- package/dist/core/configurators/slash/registry.d.ts +4 -4
- package/dist/core/configurators/slash/registry.d.ts.map +1 -1
- package/dist/core/configurators/slash/registry.js.map +1 -1
- package/dist/core/registry.d.ts +18 -0
- package/dist/core/registry.d.ts.map +1 -0
- package/dist/core/registry.js +94 -0
- package/dist/core/registry.js.map +1 -0
- package/dist/core/templates/index.d.ts +0 -1
- package/dist/core/templates/index.d.ts.map +1 -1
- package/dist/core/templates/index.js +0 -1
- package/dist/core/templates/index.js.map +1 -1
- package/package.json +7 -1
- package/AGENTS.md +0 -123
- package/CLAUDE.md +0 -17
- package/build.js +0 -20
- package/convex-setup.md +0 -403
- package/dist/core/templates/slash-command-templates.d.ts +0 -7
- package/dist/core/templates/slash-command-templates.d.ts.map +0 -1
- package/dist/core/templates/slash-command-templates.js +0 -1041
- package/dist/core/templates/slash-command-templates.js.map +0 -1
- package/prompt/ai-humanizer.md +0 -45
- package/prompt/api-contract-generator.md +0 -234
- package/prompt/apply.md +0 -17
- package/prompt/archive.md +0 -21
- package/prompt/design-system.md +0 -210
- package/prompt/document-explainer.md +0 -149
- package/prompt/epic-generator.md +0 -198
- package/prompt/epic-single.md +0 -47
- package/prompt/erd-generator.md +0 -130
- package/prompt/fsd-generator.md +0 -157
- package/prompt/prd-agent-generator.md +0 -147
- package/prompt/prd-generator.md +0 -195
- package/prompt/product-brief.md +0 -289
- package/prompt/proposal.md +0 -22
- package/prompt/qa-test-scenario.md +0 -133
- package/prompt/skill-creator.md +0 -350
- package/prompt/story-generator.md +0 -278
- package/prompt/story-single.md +0 -70
- package/prompt/tdd-generator.md +0 -294
- package/prompt/tdd-lite-generator.md +0 -224
- package/prompt/wireframe-generator.md +0 -219
- package/skills/ai-context-generator/SKILL.md +0 -54
- package/skills/ai-context-generator/references/AGENTS.template.md +0 -83
- package/skills/ai-context-generator/references/CLAUDE.template.md +0 -39
- package/skills/ai-context-generator/references/behavioral-guidelines.md +0 -71
- package/skills/ai-context-generator/references/discovery-checklist.md +0 -40
- package/skills/ai-context-generator/references/examples/AGENTS.good.md +0 -103
- package/skills/ai-context-generator/references/extraction-checklist.md +0 -23
- package/skills/ai-context-generator/references/overlays/laravel.md +0 -44
- package/skills/cerebro/SKILL.md +0 -187
- package/skills/cerebro/references/agents.md +0 -213
- package/skills/code-review/SKILL.md +0 -373
- package/skills/code-review/assets/report-template-agent.md +0 -212
- package/skills/code-review/assets/report-template-compact.md +0 -81
- package/skills/code-review/assets/report-template-full.md +0 -264
- package/skills/code-review/assets/report-template-human.md +0 -168
- package/skills/code-review/references/universal-patterns.md +0 -495
- package/skills/design-md/README.md +0 -34
- package/skills/design-md/SKILL.md +0 -172
- package/skills/design-md/examples/DESIGN.md +0 -154
- package/skills/design-system-generator/SKILL.md +0 -324
- package/skills/design-system-generator/assets/design-system-template.md +0 -348
- package/skills/design-system-generator/references/extraction-patterns.md +0 -321
- package/skills/doc-builder/SKILL.md +0 -115
- package/skills/doc-builder/references/ui-patterns.md +0 -394
- package/skills/document-translator/SKILL.md +0 -58
- package/skills/enhance-prompt/README.md +0 -34
- package/skills/enhance-prompt/SKILL.md +0 -204
- package/skills/enhance-prompt/references/KEYWORDS.md +0 -114
- package/skills/feature-planner/SKILL.md +0 -305
- package/skills/feature-planner/assets/implementation-plan-template.md +0 -85
- package/skills/frontend-design/LICENSE.txt +0 -177
- package/skills/frontend-design/SKILL.md +0 -42
- package/skills/gamma-builder/SKILL.md +0 -134
- package/skills/laravel-code-review/SKILL.md +0 -383
- package/skills/laravel-code-review/assets/report-template-agent.md +0 -195
- package/skills/laravel-code-review/assets/report-template-compact.md +0 -79
- package/skills/laravel-code-review/assets/report-template-full.md +0 -253
- package/skills/laravel-code-review/assets/report-template-human.md +0 -159
- package/skills/laravel-code-review/references/laravel-patterns.md +0 -571
- package/skills/laravel-code-review/references/php84-features.md +0 -442
- package/skills/mcp-builder/LICENSE.txt +0 -202
- package/skills/mcp-builder/SKILL.md +0 -236
- package/skills/mcp-builder/reference/evaluation.md +0 -602
- package/skills/mcp-builder/reference/mcp_best_practices.md +0 -249
- package/skills/mcp-builder/reference/node_mcp_server.md +0 -970
- package/skills/mcp-builder/reference/python_mcp_server.md +0 -719
- package/skills/mcp-builder/scripts/connections.py +0 -151
- package/skills/mcp-builder/scripts/evaluation.py +0 -373
- package/skills/mcp-builder/scripts/example_evaluation.xml +0 -22
- package/skills/mcp-builder/scripts/requirements.txt +0 -2
- package/skills/meeting-notes/SKILL.md +0 -159
- package/skills/meeting-notes/evals/evals.json +0 -23
- package/skills/project-orchestrator/SKILL.md +0 -487
- package/skills/project-orchestrator/assets/caddy-vps-setup.md +0 -180
- package/skills/project-orchestrator/assets/plan-summary-template.md +0 -159
- package/skills/prompter-specs/SKILL.md +0 -115
- package/skills/prompter-workflow/SKILL.md +0 -166
- package/skills/prompter-workflow/evals/evals.json +0 -89
- package/skills/sph-generator/SKILL.md +0 -488
- package/skills/ui-ux-pro/SKILL.md +0 -199
- package/skills/ui-ux-pro/assets/design-spec-template.md +0 -173
- package/skills/ui-ux-pro/references/component-patterns.md +0 -255
- package/skills/ui-ux-pro/references/design-principles.md +0 -167
- package/src/cli/index.ts +0 -223
- package/src/commands/archive.ts +0 -302
- package/src/commands/change.ts +0 -292
- package/src/commands/config.ts +0 -233
- package/src/commands/guide.ts +0 -50
- package/src/commands/init.ts +0 -899
- package/src/commands/list.ts +0 -194
- package/src/commands/show.ts +0 -138
- package/src/commands/spec.ts +0 -251
- package/src/commands/update.ts +0 -156
- package/src/commands/upgrade.ts +0 -30
- package/src/commands/validate.ts +0 -326
- package/src/core/artifact-graph/graph.ts +0 -167
- package/src/core/artifact-graph/index.ts +0 -44
- package/src/core/artifact-graph/instruction-loader.ts +0 -302
- package/src/core/artifact-graph/resolver.ts +0 -226
- package/src/core/artifact-graph/schema.ts +0 -124
- package/src/core/artifact-graph/state.ts +0 -64
- package/src/core/artifact-graph/types.ts +0 -65
- package/src/core/completions/command-registry.ts +0 -382
- package/src/core/completions/completion-provider.ts +0 -128
- package/src/core/completions/generators/bash-generator.ts +0 -191
- package/src/core/completions/generators/fish-generator.ts +0 -188
- package/src/core/completions/generators/powershell-generator.ts +0 -223
- package/src/core/completions/generators/zsh-generator.ts +0 -281
- package/src/core/completions/templates/bash-templates.ts +0 -24
- package/src/core/completions/templates/fish-templates.ts +0 -40
- package/src/core/completions/templates/powershell-templates.ts +0 -25
- package/src/core/completions/templates/zsh-templates.ts +0 -36
- package/src/core/completions/types.ts +0 -90
- package/src/core/config-schema.ts +0 -230
- package/src/core/config.ts +0 -181
- package/src/core/configurators/slash/antigravity.ts +0 -70
- package/src/core/configurators/slash/base.ts +0 -203
- package/src/core/configurators/slash/claude.ts +0 -70
- package/src/core/configurators/slash/codex.ts +0 -70
- package/src/core/configurators/slash/droid.ts +0 -44
- package/src/core/configurators/slash/forge.ts +0 -44
- package/src/core/configurators/slash/github-copilot.ts +0 -114
- package/src/core/configurators/slash/index.ts +0 -10
- package/src/core/configurators/slash/kilocode.ts +0 -70
- package/src/core/configurators/slash/opencode.ts +0 -70
- package/src/core/configurators/slash/registry.ts +0 -51
- package/src/core/converters/json-converter.ts +0 -62
- package/src/core/global-config.ts +0 -136
- package/src/core/parsers/change-parser.ts +0 -234
- package/src/core/parsers/markdown-parser.ts +0 -237
- package/src/core/parsers/requirement-blocks.ts +0 -234
- package/src/core/prompt-templates.ts +0 -3504
- package/src/core/schemas/base.schema.ts +0 -20
- package/src/core/schemas/change.schema.ts +0 -42
- package/src/core/schemas/index.ts +0 -20
- package/src/core/schemas/spec.schema.ts +0 -17
- package/src/core/skill-discovery.ts +0 -68
- package/src/core/specs-apply.ts +0 -483
- package/src/core/styles/palette.ts +0 -8
- package/src/core/templates/agents-template.ts +0 -459
- package/src/core/templates/claude-template.ts +0 -2
- package/src/core/templates/index.ts +0 -4
- package/src/core/templates/project-template.ts +0 -32
- package/src/core/templates/slash-command-templates.ts +0 -1068
- package/src/core/validation/constants.ts +0 -48
- package/src/core/validation/types.ts +0 -19
- package/src/core/validation/validator.ts +0 -449
- package/src/core/view.ts +0 -219
- package/src/index.ts +0 -1
- package/src/utils/change-metadata.ts +0 -171
- package/src/utils/change-utils.ts +0 -131
- package/src/utils/file-system.ts +0 -252
- package/src/utils/index.ts +0 -12
- package/src/utils/interactive.ts +0 -29
- package/src/utils/item-discovery.ts +0 -66
- package/src/utils/match.ts +0 -26
- package/src/utils/shell-detection.ts +0 -62
- package/src/utils/task-progress.ts +0 -43
- package/tsconfig.json +0 -28
|
@@ -1,495 +0,0 @@
|
|
|
1
|
-
````markdown
|
|
2
|
-
# Universal Code Review Detection Patterns
|
|
3
|
-
|
|
4
|
-
Cross-language patterns for identifying common issues. Organized by category with language-specific examples.
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Security Issues
|
|
9
|
-
|
|
10
|
-
### Injection Flaws
|
|
11
|
-
|
|
12
|
-
**SQL Injection:**
|
|
13
|
-
```python
|
|
14
|
-
# ❌ Bad: String concatenation in query
|
|
15
|
-
cursor.execute("SELECT * FROM users WHERE id = " + user_id)
|
|
16
|
-
|
|
17
|
-
# ✅ Good: Parameterized query
|
|
18
|
-
cursor.execute("SELECT * FROM users WHERE id = %s", (user_id,))
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
```javascript
|
|
22
|
-
// ❌ Bad: Template literal in query
|
|
23
|
-
db.query(`SELECT * FROM users WHERE id = ${userId}`);
|
|
24
|
-
|
|
25
|
-
// ✅ Good: Parameterized query
|
|
26
|
-
db.query("SELECT * FROM users WHERE id = $1", [userId]);
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
```go
|
|
30
|
-
// ❌ Bad: String formatting in query
|
|
31
|
-
db.Query(fmt.Sprintf("SELECT * FROM users WHERE id = %s", id))
|
|
32
|
-
|
|
33
|
-
// ✅ Good: Parameterized query
|
|
34
|
-
db.Query("SELECT * FROM users WHERE id = $1", id)
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
**Command Injection:**
|
|
38
|
-
```python
|
|
39
|
-
# ❌ Bad: User input in shell command
|
|
40
|
-
os.system("ls " + user_input)
|
|
41
|
-
subprocess.run(f"grep {pattern} file.txt", shell=True)
|
|
42
|
-
|
|
43
|
-
# ✅ Good: Use list form, avoid shell=True
|
|
44
|
-
subprocess.run(["grep", pattern, "file.txt"])
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
```javascript
|
|
48
|
-
// ❌ Bad: User input in exec
|
|
49
|
-
const { exec } = require("child_process");
|
|
50
|
-
exec("ls " + userInput);
|
|
51
|
-
|
|
52
|
-
// ✅ Good: Use execFile with arguments
|
|
53
|
-
const { execFile } = require("child_process");
|
|
54
|
-
execFile("ls", [userInput]);
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
### Hardcoded Secrets
|
|
58
|
-
|
|
59
|
-
```python
|
|
60
|
-
# ❌ Bad: Hardcoded credentials
|
|
61
|
-
API_KEY = "sk-1234567890abcdef"
|
|
62
|
-
db_password = "supersecret123"
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
```javascript
|
|
66
|
-
// ❌ Bad: Secrets in source code
|
|
67
|
-
const stripe = require("stripe")("sk_live_xxx");
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
```go
|
|
71
|
-
// ❌ Bad: Embedded credentials
|
|
72
|
-
const apiKey = "AIzaSy..."
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
**Detection patterns (all languages):**
|
|
76
|
-
- Strings matching: `password`, `secret`, `api_key`, `token`, `credential`
|
|
77
|
-
- Base64-encoded strings assigned to auth variables
|
|
78
|
-
- Connection strings with embedded passwords
|
|
79
|
-
- Private keys or certificates in source
|
|
80
|
-
|
|
81
|
-
**✅ Good: Use environment variables or secret managers**
|
|
82
|
-
|
|
83
|
-
### XSS (Cross-Site Scripting)
|
|
84
|
-
|
|
85
|
-
```javascript
|
|
86
|
-
// ❌ Bad: innerHTML with user data
|
|
87
|
-
element.innerHTML = userInput;
|
|
88
|
-
|
|
89
|
-
// ✅ Good: Use textContent or sanitize
|
|
90
|
-
element.textContent = userInput;
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
```python
|
|
94
|
-
# ❌ Bad: Jinja2 with |safe on user input
|
|
95
|
-
{{ user_comment|safe }}
|
|
96
|
-
|
|
97
|
-
# ✅ Good: Auto-escaped (default)
|
|
98
|
-
{{ user_comment }}
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
### Mass Assignment / Over-posting
|
|
102
|
-
|
|
103
|
-
```python
|
|
104
|
-
# ❌ Bad: Using all request data to create object
|
|
105
|
-
user = User(**request.data)
|
|
106
|
-
|
|
107
|
-
# ✅ Good: Whitelist fields
|
|
108
|
-
user = User(name=data["name"], email=data["email"])
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
```javascript
|
|
112
|
-
// ❌ Bad: Spreading request body into model
|
|
113
|
-
const user = await User.create(req.body);
|
|
114
|
-
|
|
115
|
-
// ✅ Good: Pick specific fields
|
|
116
|
-
const { name, email } = req.body;
|
|
117
|
-
const user = await User.create({ name, email });
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
```csharp
|
|
121
|
-
// ❌ Bad: Binding all properties
|
|
122
|
-
public IActionResult Create([FromBody] User user)
|
|
123
|
-
|
|
124
|
-
// ✅ Good: Use DTO or [Bind] attribute
|
|
125
|
-
public IActionResult Create([Bind("Name,Email")] User user)
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
---
|
|
129
|
-
|
|
130
|
-
## Performance Anti-patterns
|
|
131
|
-
|
|
132
|
-
### N+1 Query Problem
|
|
133
|
-
|
|
134
|
-
```python
|
|
135
|
-
# ❌ Bad: N+1 in Django
|
|
136
|
-
posts = Post.objects.all()
|
|
137
|
-
for post in posts:
|
|
138
|
-
print(post.author.name) # Query per post!
|
|
139
|
-
|
|
140
|
-
# ✅ Good: select_related / prefetch_related
|
|
141
|
-
posts = Post.objects.select_related("author").all()
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
```ruby
|
|
145
|
-
# ❌ Bad: N+1 in Rails
|
|
146
|
-
@posts = Post.all
|
|
147
|
-
@posts.each { |p| p.author.name } # N+1!
|
|
148
|
-
|
|
149
|
-
# ✅ Good: Eager loading
|
|
150
|
-
@posts = Post.includes(:author).all
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
```javascript
|
|
154
|
-
// ❌ Bad: N+1 in Sequelize
|
|
155
|
-
const posts = await Post.findAll();
|
|
156
|
-
for (const post of posts) {
|
|
157
|
-
const author = await post.getAuthor(); // N+1!
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
// ✅ Good: Include association
|
|
161
|
-
const posts = await Post.findAll({ include: "author" });
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
```go
|
|
165
|
-
// ❌ Bad: N+1 in GORM
|
|
166
|
-
var posts []Post
|
|
167
|
-
db.Find(&posts)
|
|
168
|
-
for _, post := range posts {
|
|
169
|
-
db.First(&post.Author, post.AuthorID) // N+1!
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
// ✅ Good: Preload
|
|
173
|
-
db.Preload("Author").Find(&posts)
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
### Blocking Operations in Async Context
|
|
177
|
-
|
|
178
|
-
```javascript
|
|
179
|
-
// ❌ Bad: Synchronous file read in async server
|
|
180
|
-
const data = fs.readFileSync("/large/file.json");
|
|
181
|
-
|
|
182
|
-
// ✅ Good: Async version
|
|
183
|
-
const data = await fs.promises.readFile("/large/file.json");
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
```python
|
|
187
|
-
# ❌ Bad: Blocking call in async function
|
|
188
|
-
async def handler():
|
|
189
|
-
data = requests.get(url) # Blocks event loop!
|
|
190
|
-
|
|
191
|
-
# ✅ Good: Use async HTTP client
|
|
192
|
-
async def handler():
|
|
193
|
-
async with aiohttp.ClientSession() as session:
|
|
194
|
-
data = await session.get(url)
|
|
195
|
-
```
|
|
196
|
-
|
|
197
|
-
### Inefficient Algorithms
|
|
198
|
-
|
|
199
|
-
```python
|
|
200
|
-
# ❌ Bad: O(n²) lookup
|
|
201
|
-
for item in items:
|
|
202
|
-
if item in large_list: # O(n) per check
|
|
203
|
-
process(item)
|
|
204
|
-
|
|
205
|
-
# ✅ Good: O(n) with set
|
|
206
|
-
large_set = set(large_list)
|
|
207
|
-
for item in items:
|
|
208
|
-
if item in large_set: # O(1) per check
|
|
209
|
-
process(item)
|
|
210
|
-
```
|
|
211
|
-
|
|
212
|
-
```javascript
|
|
213
|
-
// ❌ Bad: Repeated array.includes in loop (O(n²))
|
|
214
|
-
items.forEach((item) => {
|
|
215
|
-
if (largeArray.includes(item)) process(item);
|
|
216
|
-
});
|
|
217
|
-
|
|
218
|
-
// ✅ Good: Use Set (O(n))
|
|
219
|
-
const largeSet = new Set(largeArray);
|
|
220
|
-
items.forEach((item) => {
|
|
221
|
-
if (largeSet.has(item)) process(item);
|
|
222
|
-
});
|
|
223
|
-
```
|
|
224
|
-
|
|
225
|
-
### Missing Pagination
|
|
226
|
-
|
|
227
|
-
```python
|
|
228
|
-
# ❌ Bad: Loading all records
|
|
229
|
-
users = User.objects.all()
|
|
230
|
-
|
|
231
|
-
# ✅ Good: Paginate
|
|
232
|
-
users = User.objects.all()[:25] # or use Paginator
|
|
233
|
-
```
|
|
234
|
-
|
|
235
|
-
```javascript
|
|
236
|
-
// ❌ Bad: No limit
|
|
237
|
-
const users = await db.query("SELECT * FROM users");
|
|
238
|
-
|
|
239
|
-
// ✅ Good: Paginate
|
|
240
|
-
const users = await db.query("SELECT * FROM users LIMIT $1 OFFSET $2", [limit, offset]);
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
---
|
|
244
|
-
|
|
245
|
-
## Error Handling
|
|
246
|
-
|
|
247
|
-
### Swallowed Exceptions
|
|
248
|
-
|
|
249
|
-
```python
|
|
250
|
-
# ❌ Bad: Silent catch
|
|
251
|
-
try:
|
|
252
|
-
process_data()
|
|
253
|
-
except Exception:
|
|
254
|
-
pass
|
|
255
|
-
|
|
256
|
-
# ✅ Good: Log or handle
|
|
257
|
-
try:
|
|
258
|
-
process_data()
|
|
259
|
-
except Exception as e:
|
|
260
|
-
logger.error("Processing failed", exc_info=e)
|
|
261
|
-
raise
|
|
262
|
-
```
|
|
263
|
-
|
|
264
|
-
```javascript
|
|
265
|
-
// ❌ Bad: Empty catch
|
|
266
|
-
try {
|
|
267
|
-
await processData();
|
|
268
|
-
} catch (e) {}
|
|
269
|
-
|
|
270
|
-
// ✅ Good: Handle the error
|
|
271
|
-
try {
|
|
272
|
-
await processData();
|
|
273
|
-
} catch (e) {
|
|
274
|
-
logger.error("Processing failed", e);
|
|
275
|
-
throw;
|
|
276
|
-
}
|
|
277
|
-
```
|
|
278
|
-
|
|
279
|
-
```go
|
|
280
|
-
// ❌ Bad: Ignoring error
|
|
281
|
-
result, _ := doSomething()
|
|
282
|
-
|
|
283
|
-
// ✅ Good: Handle the error
|
|
284
|
-
result, err := doSomething()
|
|
285
|
-
if err != nil {
|
|
286
|
-
return fmt.Errorf("doSomething failed: %w", err)
|
|
287
|
-
}
|
|
288
|
-
```
|
|
289
|
-
|
|
290
|
-
### Overly Broad Exception Catching
|
|
291
|
-
|
|
292
|
-
```python
|
|
293
|
-
# ❌ Bad: Catching everything
|
|
294
|
-
except Exception:
|
|
295
|
-
except BaseException:
|
|
296
|
-
|
|
297
|
-
# ✅ Good: Specific exceptions
|
|
298
|
-
except (ValueError, KeyError) as e:
|
|
299
|
-
```
|
|
300
|
-
|
|
301
|
-
```java
|
|
302
|
-
// ❌ Bad: Catching generic Exception
|
|
303
|
-
catch (Exception e) { }
|
|
304
|
-
|
|
305
|
-
// ✅ Good: Specific exception types
|
|
306
|
-
catch (IOException | ParseException e) { }
|
|
307
|
-
```
|
|
308
|
-
|
|
309
|
-
### Missing Error Handling for I/O
|
|
310
|
-
|
|
311
|
-
```python
|
|
312
|
-
# ❌ Bad: No error handling for file I/O
|
|
313
|
-
data = open("config.json").read()
|
|
314
|
-
|
|
315
|
-
# ✅ Good: Handle potential errors
|
|
316
|
-
try:
|
|
317
|
-
with open("config.json") as f:
|
|
318
|
-
data = f.read()
|
|
319
|
-
except FileNotFoundError:
|
|
320
|
-
data = default_config
|
|
321
|
-
```
|
|
322
|
-
|
|
323
|
-
---
|
|
324
|
-
|
|
325
|
-
## Architecture Issues
|
|
326
|
-
|
|
327
|
-
### God Object / Fat Controller
|
|
328
|
-
|
|
329
|
-
**Detection:** Class or function with >200 lines, >10 methods, or >5 dependencies.
|
|
330
|
-
|
|
331
|
-
```python
|
|
332
|
-
# ❌ Bad: Controller doing everything
|
|
333
|
-
class UserView(APIView):
|
|
334
|
-
def post(self, request):
|
|
335
|
-
# Validates, creates user, sends email, creates token,
|
|
336
|
-
# logs event, syncs to CRM... all in one method
|
|
337
|
-
|
|
338
|
-
# ✅ Good: Delegate to service layer
|
|
339
|
-
class UserView(APIView):
|
|
340
|
-
def post(self, request):
|
|
341
|
-
serializer = UserSerializer(data=request.data)
|
|
342
|
-
serializer.is_valid(raise_exception=True)
|
|
343
|
-
user = UserService.register(serializer.validated_data)
|
|
344
|
-
return Response(UserSerializer(user).data, status=201)
|
|
345
|
-
```
|
|
346
|
-
|
|
347
|
-
### Business Logic in Wrong Layer
|
|
348
|
-
|
|
349
|
-
**Detection:** Database queries in views/templates, HTTP concerns in models/services.
|
|
350
|
-
|
|
351
|
-
```javascript
|
|
352
|
-
// ❌ Bad: DB query in React component
|
|
353
|
-
function UserList() {
|
|
354
|
-
const users = await db.query("SELECT * FROM users"); // Wrong layer!
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
// ✅ Good: API call from component, query in backend
|
|
358
|
-
function UserList() {
|
|
359
|
-
const users = await fetch("/api/users").then((r) => r.json());
|
|
360
|
-
}
|
|
361
|
-
```
|
|
362
|
-
|
|
363
|
-
### Circular Dependencies
|
|
364
|
-
|
|
365
|
-
**Detection:** Module A imports B, B imports A.
|
|
366
|
-
|
|
367
|
-
```python
|
|
368
|
-
# ❌ Bad: Circular import
|
|
369
|
-
# file: models.py
|
|
370
|
-
from .services import UserService
|
|
371
|
-
|
|
372
|
-
# file: services.py
|
|
373
|
-
from .models import User # Circular!
|
|
374
|
-
```
|
|
375
|
-
|
|
376
|
-
**Fix:** Move shared types to a separate module, use dependency injection, or use lazy imports.
|
|
377
|
-
|
|
378
|
-
---
|
|
379
|
-
|
|
380
|
-
## Code Quality
|
|
381
|
-
|
|
382
|
-
### Missing Type Annotations
|
|
383
|
-
|
|
384
|
-
```python
|
|
385
|
-
# ❌ Bad: No types
|
|
386
|
-
def process(data, options):
|
|
387
|
-
return data
|
|
388
|
-
|
|
389
|
-
# ✅ Good: Type hints
|
|
390
|
-
def process(data: dict[str, Any], options: ProcessOptions) -> Result:
|
|
391
|
-
return Result(data)
|
|
392
|
-
```
|
|
393
|
-
|
|
394
|
-
```javascript
|
|
395
|
-
// TypeScript: ❌ Bad - any type
|
|
396
|
-
function process(data: any): any { }
|
|
397
|
-
|
|
398
|
-
// ✅ Good: Specific types
|
|
399
|
-
function process(data: Record<string, unknown>): Result { }
|
|
400
|
-
```
|
|
401
|
-
|
|
402
|
-
### Deprecated API Usage
|
|
403
|
-
|
|
404
|
-
**Detection patterns:**
|
|
405
|
-
- Functions/methods marked with `@deprecated` decorators
|
|
406
|
-
- Import of known deprecated modules
|
|
407
|
-
- Usage of APIs removed in newer language versions
|
|
408
|
-
- Compiler/linter warnings about deprecation
|
|
409
|
-
|
|
410
|
-
### Dead Code
|
|
411
|
-
|
|
412
|
-
**Detection patterns:**
|
|
413
|
-
- Functions never called (no references)
|
|
414
|
-
- Unreachable code after `return`, `throw`, `break`
|
|
415
|
-
- Commented-out code blocks (>5 lines)
|
|
416
|
-
- Unused imports/variables
|
|
417
|
-
- Feature flags always evaluating to same value
|
|
418
|
-
|
|
419
|
-
### Code Duplication
|
|
420
|
-
|
|
421
|
-
**Detection:**
|
|
422
|
-
- Identical or near-identical blocks (>10 lines) across files
|
|
423
|
-
- Repeated patterns that could be extracted into a shared utility
|
|
424
|
-
- Copy-pasted logic with minor variations
|
|
425
|
-
|
|
426
|
-
---
|
|
427
|
-
|
|
428
|
-
## Resource Management
|
|
429
|
-
|
|
430
|
-
### Resource Leaks
|
|
431
|
-
|
|
432
|
-
```python
|
|
433
|
-
# ❌ Bad: Unclosed file handle
|
|
434
|
-
f = open("data.txt")
|
|
435
|
-
data = f.read()
|
|
436
|
-
# f never closed if exception occurs
|
|
437
|
-
|
|
438
|
-
# ✅ Good: Context manager
|
|
439
|
-
with open("data.txt") as f:
|
|
440
|
-
data = f.read()
|
|
441
|
-
```
|
|
442
|
-
|
|
443
|
-
```go
|
|
444
|
-
// ❌ Bad: Unclosed response body
|
|
445
|
-
resp, _ := http.Get(url)
|
|
446
|
-
// resp.Body never closed
|
|
447
|
-
|
|
448
|
-
// ✅ Good: Defer close
|
|
449
|
-
resp, err := http.Get(url)
|
|
450
|
-
if err != nil { return err }
|
|
451
|
-
defer resp.Body.Close()
|
|
452
|
-
```
|
|
453
|
-
|
|
454
|
-
```java
|
|
455
|
-
// ❌ Bad: Unclosed connection
|
|
456
|
-
Connection conn = DriverManager.getConnection(url);
|
|
457
|
-
// conn never closed
|
|
458
|
-
|
|
459
|
-
// ✅ Good: Try-with-resources
|
|
460
|
-
try (Connection conn = DriverManager.getConnection(url)) {
|
|
461
|
-
// use connection
|
|
462
|
-
}
|
|
463
|
-
```
|
|
464
|
-
|
|
465
|
-
### Missing Connection Pooling
|
|
466
|
-
|
|
467
|
-
**Detection:** Database or HTTP connections created per request instead of shared pool.
|
|
468
|
-
|
|
469
|
-
---
|
|
470
|
-
|
|
471
|
-
## Severity Classification
|
|
472
|
-
|
|
473
|
-
| Severity | Emoji | Universal Criteria |
|
|
474
|
-
| ------------ | ----- | ----------------------------------------------------------------- |
|
|
475
|
-
| Critical | 🔴 | Security vulnerabilities, data loss risks, crashes, auth bypasses |
|
|
476
|
-
| Warning | 🟠 | Performance issues, design flaws, error handling gaps |
|
|
477
|
-
| Optimization | 🟡 | Efficiency improvements, code duplication, missing caching |
|
|
478
|
-
| Quality | 🔵 | Best practices, conventions, modern syntax, documentation |
|
|
479
|
-
|
|
480
|
-
## Detection Priority by Language
|
|
481
|
-
|
|
482
|
-
| Language | Top Issues to Check |
|
|
483
|
-
| -------------- | -------------------------------------------------------------------- |
|
|
484
|
-
| Python | Type hints, injection, N+1 (Django/SQLAlchemy), async misuse |
|
|
485
|
-
| JavaScript/TS | XSS, any types, blocking event loop, missing await, memory leaks |
|
|
486
|
-
| PHP | SQL injection, XSS, mass assignment, type safety, deprecated APIs |
|
|
487
|
-
| Go | Ignored errors, goroutine leaks, unclosed readers, race conditions |
|
|
488
|
-
| Rust | Unsafe blocks, unwrap() abuse, clone() overhead, lifetime issues |
|
|
489
|
-
| Java | Resource leaks, broad catches, null safety, generics misuse |
|
|
490
|
-
| Ruby | N+1 (Rails), mass assignment, SQL injection, missing strong params |
|
|
491
|
-
| C# | Over-posting, async void, IDisposable leaks, null reference |
|
|
492
|
-
| Swift | Force unwrap abuse, retain cycles, main thread violations |
|
|
493
|
-
| Kotlin | Platform types, coroutine scope leaks, null safety bypass |
|
|
494
|
-
|
|
495
|
-
````
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
# Stitch Design System Documentation Skill
|
|
2
|
-
|
|
3
|
-
## Install
|
|
4
|
-
|
|
5
|
-
```bash
|
|
6
|
-
npx skills add google-labs-code/stitch-skills --skill design-md --global
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
## Example Prompt
|
|
10
|
-
|
|
11
|
-
```text
|
|
12
|
-
Analyze my Furniture Collection project's Home screen and generate a comprehensive DESIGN.md file documenting the design system.
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## Skill Structure
|
|
16
|
-
|
|
17
|
-
This repository follows the **Agent Skills** open standard. Each skill is self-contained with its own logic, workflow, and reference materials.
|
|
18
|
-
|
|
19
|
-
```text
|
|
20
|
-
design-md/
|
|
21
|
-
├── SKILL.md — Core instructions & workflow
|
|
22
|
-
├── examples/ — Sample DESIGN.md outputs
|
|
23
|
-
└── README.md — This file
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## How it Works
|
|
27
|
-
|
|
28
|
-
When activated, the agent follows a structured design analysis pipeline:
|
|
29
|
-
|
|
30
|
-
1. **Retrieval**: Uses the Stitch MCP Server to fetch project screens, HTML code, and design metadata.
|
|
31
|
-
2. **Extraction**: Identifies design tokens including colors, typography, spacing, and component patterns.
|
|
32
|
-
3. **Translation**: Converts technical CSS/Tailwind values into descriptive, natural design language.
|
|
33
|
-
4. **Synthesis**: Generates a comprehensive DESIGN.md following the semantic design system format.
|
|
34
|
-
5. **Alignment**: Ensures output follows Stitch Effective Prompting Guide principles for optimal screen generation.
|
|
@@ -1,172 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: design-md
|
|
3
|
-
description: Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
|
|
4
|
-
allowed-tools:
|
|
5
|
-
- "stitch*:*"
|
|
6
|
-
- "Read"
|
|
7
|
-
- "Write"
|
|
8
|
-
- "web_fetch"
|
|
9
|
-
---
|
|
10
|
-
|
|
11
|
-
# Stitch DESIGN.md Skill
|
|
12
|
-
|
|
13
|
-
You are an expert Design Systems Lead. Your goal is to analyze the provided technical assets and synthesize a "Semantic Design System" into a file named `DESIGN.md`.
|
|
14
|
-
|
|
15
|
-
## Overview
|
|
16
|
-
|
|
17
|
-
This skill helps you create `DESIGN.md` files that serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.
|
|
18
|
-
|
|
19
|
-
## Prerequisites
|
|
20
|
-
|
|
21
|
-
- Access to the Stitch MCP Server
|
|
22
|
-
- A Stitch project with at least one designed screen
|
|
23
|
-
- Access to the Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/
|
|
24
|
-
|
|
25
|
-
## The Goal
|
|
26
|
-
|
|
27
|
-
The `DESIGN.md` file will serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with the existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.
|
|
28
|
-
|
|
29
|
-
## Retrieval and Networking
|
|
30
|
-
|
|
31
|
-
To analyze a Stitch project, you must retrieve screen metadata and design assets using the Stitch MCP Server tools:
|
|
32
|
-
|
|
33
|
-
1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `mcp_stitch:`) for all subsequent calls.
|
|
34
|
-
|
|
35
|
-
2. **Project lookup** (if Project ID is not provided):
|
|
36
|
-
- Call `[prefix]:list_projects` with `filter: "view=owned"` to retrieve all user projects
|
|
37
|
-
- Identify the target project by title or URL pattern
|
|
38
|
-
- Extract the Project ID from the `name` field (e.g., `projects/13534454087919359824`)
|
|
39
|
-
|
|
40
|
-
3. **Screen lookup** (if Screen ID is not provided):
|
|
41
|
-
- Call `[prefix]:list_screens` with the `projectId` (just the numeric ID, not the full path)
|
|
42
|
-
- Review screen titles to identify the target screen (e.g., "Home", "Landing Page")
|
|
43
|
-
- Extract the Screen ID from the screen's `name` field
|
|
44
|
-
|
|
45
|
-
4. **Metadata fetch**:
|
|
46
|
-
- Call `[prefix]:get_screen` with both `projectId` and `screenId` (both as numeric IDs only)
|
|
47
|
-
- This returns the complete screen object including:
|
|
48
|
-
- `screenshot.downloadUrl` - Visual reference of the design
|
|
49
|
-
- `htmlCode.downloadUrl` - Full HTML/CSS source code
|
|
50
|
-
- `width`, `height`, `deviceType` - Screen dimensions and target platform
|
|
51
|
-
- Project metadata including `designTheme` with color and style information
|
|
52
|
-
|
|
53
|
-
5. **Asset download**:
|
|
54
|
-
- Use `web_fetch` or `read_url_content` to download the HTML code from `htmlCode.downloadUrl`
|
|
55
|
-
- Optionally download the screenshot from `screenshot.downloadUrl` for visual reference
|
|
56
|
-
- Parse the HTML to extract Tailwind classes, custom CSS, and component patterns
|
|
57
|
-
|
|
58
|
-
6. **Project metadata extraction**:
|
|
59
|
-
- Call `[prefix]:get_project` with the project `name` (full path: `projects/{id}`) to get:
|
|
60
|
-
- `designTheme` object with color mode, fonts, roundness, custom colors
|
|
61
|
-
- Project-level design guidelines and descriptions
|
|
62
|
-
- Device type preferences and layout principles
|
|
63
|
-
|
|
64
|
-
## Analysis & Synthesis Instructions
|
|
65
|
-
|
|
66
|
-
### 1. Extract Project Identity (JSON)
|
|
67
|
-
- Locate the Project Title
|
|
68
|
-
- Locate the specific Project ID (e.g., from the `name` field in the JSON)
|
|
69
|
-
|
|
70
|
-
### 2. Define the Atmosphere (Image/HTML)
|
|
71
|
-
Evaluate the screenshot and HTML structure to capture the overall "vibe." Use evocative adjectives to describe the mood (e.g., "Airy," "Dense," "Minimalist," "Utilitarian").
|
|
72
|
-
|
|
73
|
-
### 3. Map the Color Palette (Tailwind Config/JSON)
|
|
74
|
-
Identify the key colors in the system. For each color, provide:
|
|
75
|
-
- A descriptive, natural language name that conveys its character (e.g., "Deep Muted Teal-Navy")
|
|
76
|
-
- The specific hex code in parentheses for precision (e.g., "#294056")
|
|
77
|
-
- Its specific functional role (e.g., "Used for primary actions")
|
|
78
|
-
|
|
79
|
-
### 4. Translate Geometry & Shape (CSS/Tailwind)
|
|
80
|
-
Convert technical `border-radius` and layout values into physical descriptions:
|
|
81
|
-
- Describe `rounded-full` as "Pill-shaped"
|
|
82
|
-
- Describe `rounded-lg` as "Subtly rounded corners"
|
|
83
|
-
- Describe `rounded-none` as "Sharp, squared-off edges"
|
|
84
|
-
|
|
85
|
-
### 5. Describe Depth & Elevation
|
|
86
|
-
Explain how the UI handles layers. Describe the presence and quality of shadows (e.g., "Flat," "Whisper-soft diffused shadows," or "Heavy, high-contrast drop shadows").
|
|
87
|
-
|
|
88
|
-
## Output Guidelines
|
|
89
|
-
|
|
90
|
-
- **Language:** Use descriptive design terminology and natural language exclusively
|
|
91
|
-
- **Format:** Generate a clean Markdown file following the structure below
|
|
92
|
-
- **Precision:** Include exact hex codes for colors while using descriptive names
|
|
93
|
-
- **Context:** Explain the "why" behind design decisions, not just the "what"
|
|
94
|
-
|
|
95
|
-
## Output Format (DESIGN.md Structure)
|
|
96
|
-
|
|
97
|
-
```markdown
|
|
98
|
-
# Design System: [Project Title]
|
|
99
|
-
**Project ID:** [Insert Project ID Here]
|
|
100
|
-
|
|
101
|
-
## 1. Visual Theme & Atmosphere
|
|
102
|
-
(Description of the mood, density, and aesthetic philosophy.)
|
|
103
|
-
|
|
104
|
-
## 2. Color Palette & Roles
|
|
105
|
-
(List colors by Descriptive Name + Hex Code + Functional Role.)
|
|
106
|
-
|
|
107
|
-
## 3. Typography Rules
|
|
108
|
-
(Description of font family, weight usage for headers vs. body, and letter-spacing character.)
|
|
109
|
-
|
|
110
|
-
## 4. Component Stylings
|
|
111
|
-
* **Buttons:** (Shape description, color assignment, behavior).
|
|
112
|
-
* **Cards/Containers:** (Corner roundness description, background color, shadow depth).
|
|
113
|
-
* **Inputs/Forms:** (Stroke style, background).
|
|
114
|
-
|
|
115
|
-
## 5. Layout Principles
|
|
116
|
-
(Description of whitespace strategy, margins, and grid alignment.)
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
## Usage Example
|
|
120
|
-
|
|
121
|
-
To use this skill for the Furniture Collection project:
|
|
122
|
-
|
|
123
|
-
1. **Retrieve project information:**
|
|
124
|
-
```
|
|
125
|
-
Use the Stitch MCP Server to get the Furniture Collection project
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
2. **Get the Home page screen details:**
|
|
129
|
-
```
|
|
130
|
-
Retrieve the Home page screen's code, image, and screen object information
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
3. **Reference best practices:**
|
|
134
|
-
```
|
|
135
|
-
Review the Stitch Effective Prompting Guide at:
|
|
136
|
-
https://stitch.withgoogle.com/docs/learn/prompting/
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
4. **Analyze and synthesize:**
|
|
140
|
-
- Extract all relevant design tokens from the screen
|
|
141
|
-
- Translate technical values into descriptive language
|
|
142
|
-
- Organize information according to the DESIGN.md structure
|
|
143
|
-
|
|
144
|
-
5. **Generate the file:**
|
|
145
|
-
- Create `DESIGN.md` in the project directory
|
|
146
|
-
- Follow the prescribed format exactly
|
|
147
|
-
- Ensure all color codes are accurate
|
|
148
|
-
- Use evocative, designer-friendly language
|
|
149
|
-
|
|
150
|
-
## Best Practices
|
|
151
|
-
|
|
152
|
-
- **Be Descriptive:** Avoid generic terms like "blue" or "rounded." Use "Ocean-deep Cerulean (#0077B6)" or "Gently curved edges"
|
|
153
|
-
- **Be Functional:** Always explain what each design element is used for
|
|
154
|
-
- **Be Consistent:** Use the same terminology throughout the document
|
|
155
|
-
- **Be Visual:** Help readers visualize the design through your descriptions
|
|
156
|
-
- **Be Precise:** Include exact values (hex codes, pixel values) in parentheses after natural language descriptions
|
|
157
|
-
|
|
158
|
-
## Tips for Success
|
|
159
|
-
|
|
160
|
-
1. **Start with the big picture:** Understand the overall aesthetic before diving into details
|
|
161
|
-
2. **Look for patterns:** Identify consistent spacing, sizing, and styling patterns
|
|
162
|
-
3. **Think semantically:** Name colors by their purpose, not just their appearance
|
|
163
|
-
4. **Consider hierarchy:** Document how visual weight and importance are communicated
|
|
164
|
-
5. **Reference the guide:** Use language and patterns from the Stitch Effective Prompting Guide
|
|
165
|
-
|
|
166
|
-
## Common Pitfalls to Avoid
|
|
167
|
-
|
|
168
|
-
- ❌ Using technical jargon without translation (e.g., "rounded-xl" instead of "generously rounded corners")
|
|
169
|
-
- ❌ Omitting color codes or using only descriptive names
|
|
170
|
-
- ❌ Forgetting to explain functional roles of design elements
|
|
171
|
-
- ❌ Being too vague in atmosphere descriptions
|
|
172
|
-
- ❌ Ignoring subtle design details like shadows or spacing patterns
|