@pedroab0/skills 1.1.0 → 1.3.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.
Files changed (27) hide show
  1. package/bin/cli.js +61 -11
  2. package/figma-extractor/README.md +2 -1
  3. package/figma-extractor/REFERENCE.md +111 -0
  4. package/figma-extractor/SKILL.md +45 -169
  5. package/figma-extractor/figma-plugin/code.js +461 -87
  6. package/figma-extractor/figma-plugin/ui.html +76 -23
  7. package/figma-extractor/scripts/fetch_figma.js +286 -35
  8. package/figma-node-builder/SKILL.md +82 -93
  9. package/figma-to-code/README.md +2 -1
  10. package/figma-to-code/REFERENCE.md +110 -0
  11. package/figma-to-code/SKILL.md +50 -181
  12. package/figma-to-code/scripts/fetch_figma.js +286 -35
  13. package/package.json +8 -3
  14. package/figma-extractor/demo/desktop_home.json +0 -2434
  15. package/figma-extractor/demo/dt_money_desktop_home.png +0 -0
  16. package/figma-extractor/demo/dt_money_preview.png +0 -0
  17. package/figma-extractor/demo/dt_money_selection.json +0 -472
  18. package/figma-extractor/demo/index.html +0 -188
  19. package/figma-extractor/demo/style.css +0 -360
  20. package/figma-extractor/figma-plugin/assets/cover-1920.png +0 -0
  21. package/figma-extractor/figma-plugin/assets/cover.jpg +0 -0
  22. package/figma-extractor/figma-plugin/assets/cover.png +0 -0
  23. package/figma-extractor/figma-plugin/assets/icon-128.png +0 -0
  24. package/figma-extractor/figma-plugin/assets/icon.png +0 -0
  25. package/figma-extractor/scripts/test_fetch_figma.js +0 -687
  26. package/figma-node-builder/scripts/test_inspect_spec.js +0 -163
  27. package/figma-to-code/scripts/test_fetch_figma.js +0 -660
package/figma-extractor/demo/dt_money_selection.json DELETED
@@ -1,472 +0,0 @@
1
- {
2
- "name": "DT Money (Community)",
3
- "node": {
4
- "name": "Dashboard",
5
- "type": "FRAME",
6
- "layoutMode": "HORIZONTAL",
7
- "primaryAxisAlignItems": "CENTER",
8
- "counterAxisAlignItems": "CENTER",
9
- "itemSpacing": 32,
10
- "layoutWrap": "NO_WRAP",
11
- "bounds": {
12
- "width": 1120,
13
- "height": 137
14
- },
15
- "children": [
16
- {
17
- "name": "Card",
18
- "type": "INSTANCE",
19
- "component": {
20
- "name": "Card",
21
- "variant": "Card"
22
- },
23
- "layoutMode": "VERTICAL",
24
- "itemSpacing": 12,
25
- "padding": {
26
- "top": 24,
27
- "right": 24,
28
- "bottom": 24,
29
- "left": 32
30
- },
31
- "layoutWrap": "NO_WRAP",
32
- "layoutAlign": "INHERIT",
33
- "bounds": {
34
- "width": 352,
35
- "height": 137
36
- },
37
- "fills": [
38
- {
39
- "type": "SOLID",
40
- "color": "#323238"
41
- }
42
- ],
43
- "cornerRadius": 6,
44
- "children": [
45
- {
46
- "name": "Header",
47
- "type": "FRAME",
48
- "layoutMode": "HORIZONTAL",
49
- "primaryAxisAlignItems": "SPACE_BETWEEN",
50
- "itemSpacing": 196,
51
- "layoutWrap": "NO_WRAP",
52
- "layoutAlign": "STRETCH",
53
- "bounds": {
54
- "width": 296,
55
- "height": 32
56
- },
57
- "children": [
58
- {
59
- "name": "Entradas",
60
- "type": "TEXT",
61
- "layoutAlign": "INHERIT",
62
- "bounds": {
63
- "width": 63,
64
- "height": 26
65
- },
66
- "fills": [
67
- {
68
- "type": "SOLID",
69
- "color": "#C4C4CC"
70
- }
71
- ],
72
- "characters": "Entradas",
73
- "typography": {
74
- "fontFamily": "Roboto",
75
- "fontSize": 16,
76
- "fontWeight": 400,
77
- "lineHeightPx": 26,
78
- "letterSpacing": 0,
79
- "textAlignHorizontal": "LEFT",
80
- "textAlignVertical": "TOP"
81
- }
82
- },
83
- {
84
- "name": "Icons",
85
- "type": "INSTANCE",
86
- "component": {
87
- "name": "Icons",
88
- "variant": "Tipo=arrow-circle-up-regular"
89
- },
90
- "props": {
91
- "tipo": "arrow-circle-up-regular"
92
- },
93
- "layoutAlign": "INHERIT",
94
- "bounds": {
95
- "width": 32,
96
- "height": 32
97
- },
98
- "children": [
99
- {
100
- "name": "Vector (Stroke)",
101
- "type": "VECTOR",
102
- "bounds": {
103
- "width": 26,
104
- "height": 26
105
- },
106
- "fills": [
107
- {
108
- "type": "SOLID",
109
- "color": "#00B37E"
110
- }
111
- ]
112
- },
113
- {
114
- "name": "Vector (Stroke)",
115
- "type": "VECTOR",
116
- "bounds": {
117
- "width": 10,
118
- "height": 6
119
- },
120
- "fills": [
121
- {
122
- "type": "SOLID",
123
- "color": "#00B37E"
124
- }
125
- ]
126
- },
127
- {
128
- "name": "Vector (Stroke)",
129
- "type": "VECTOR",
130
- "bounds": {
131
- "width": 2,
132
- "height": 12
133
- },
134
- "fills": [
135
- {
136
- "type": "SOLID",
137
- "color": "#00B37E"
138
- }
139
- ]
140
- }
141
- ]
142
- }
143
- ]
144
- },
145
- {
146
- "name": "R$ 17.400,00",
147
- "type": "TEXT",
148
- "layoutAlign": "STRETCH",
149
- "bounds": {
150
- "width": 296,
151
- "height": 45
152
- },
153
- "fills": [
154
- {
155
- "type": "SOLID",
156
- "color": "#E1E1E6"
157
- }
158
- ],
159
- "characters": "R$ 17.400,00",
160
- "typography": {
161
- "fontFamily": "Roboto",
162
- "fontSize": 32,
163
- "fontWeight": 700,
164
- "lineHeightPx": 45,
165
- "letterSpacing": 0,
166
- "textAlignHorizontal": "LEFT",
167
- "textAlignVertical": "TOP"
168
- }
169
- }
170
- ]
171
- },
172
- {
173
- "name": "Card",
174
- "type": "INSTANCE",
175
- "component": {
176
- "name": "Card",
177
- "variant": "Card"
178
- },
179
- "layoutMode": "VERTICAL",
180
- "itemSpacing": 12,
181
- "padding": {
182
- "top": 24,
183
- "right": 24,
184
- "bottom": 24,
185
- "left": 32
186
- },
187
- "layoutWrap": "NO_WRAP",
188
- "layoutAlign": "INHERIT",
189
- "bounds": {
190
- "width": 352,
191
- "height": 137
192
- },
193
- "fills": [
194
- {
195
- "type": "SOLID",
196
- "color": "#323238"
197
- }
198
- ],
199
- "cornerRadius": 6,
200
- "children": [
201
- {
202
- "name": "Header",
203
- "type": "FRAME",
204
- "layoutMode": "HORIZONTAL",
205
- "primaryAxisAlignItems": "SPACE_BETWEEN",
206
- "itemSpacing": 196,
207
- "layoutWrap": "NO_WRAP",
208
- "layoutAlign": "STRETCH",
209
- "bounds": {
210
- "width": 296,
211
- "height": 32
212
- },
213
- "children": [
214
- {
215
- "name": "Entradas",
216
- "type": "TEXT",
217
- "layoutAlign": "INHERIT",
218
- "bounds": {
219
- "width": 49,
220
- "height": 26
221
- },
222
- "fills": [
223
- {
224
- "type": "SOLID",
225
- "color": "#C4C4CC"
226
- }
227
- ],
228
- "characters": "Saídas",
229
- "typography": {
230
- "fontFamily": "Roboto",
231
- "fontSize": 16,
232
- "fontWeight": 400,
233
- "lineHeightPx": 26,
234
- "letterSpacing": 0,
235
- "textAlignHorizontal": "LEFT",
236
- "textAlignVertical": "TOP"
237
- }
238
- },
239
- {
240
- "name": "Icons",
241
- "type": "INSTANCE",
242
- "component": {
243
- "name": "Icons",
244
- "variant": "Tipo=arrow-circle-down-regular"
245
- },
246
- "props": {
247
- "tipo": "arrow-circle-down-regular"
248
- },
249
- "layoutAlign": "INHERIT",
250
- "bounds": {
251
- "width": 32,
252
- "height": 32
253
- },
254
- "children": [
255
- {
256
- "name": "Vector (Stroke)",
257
- "type": "VECTOR",
258
- "bounds": {
259
- "width": 26,
260
- "height": 26
261
- },
262
- "fills": [
263
- {
264
- "type": "SOLID",
265
- "color": "#F75A68"
266
- }
267
- ]
268
- },
269
- {
270
- "name": "Vector (Stroke)",
271
- "type": "VECTOR",
272
- "bounds": {
273
- "width": 10,
274
- "height": 6
275
- },
276
- "fills": [
277
- {
278
- "type": "SOLID",
279
- "color": "#F75A68"
280
- }
281
- ]
282
- },
283
- {
284
- "name": "Vector (Stroke)",
285
- "type": "VECTOR",
286
- "bounds": {
287
- "width": 2,
288
- "height": 12
289
- },
290
- "fills": [
291
- {
292
- "type": "SOLID",
293
- "color": "#F75A68"
294
- }
295
- ]
296
- }
297
- ]
298
- }
299
- ]
300
- },
301
- {
302
- "name": "R$ 17.400,00",
303
- "type": "TEXT",
304
- "layoutAlign": "STRETCH",
305
- "bounds": {
306
- "width": 296,
307
- "height": 45
308
- },
309
- "fills": [
310
- {
311
- "type": "SOLID",
312
- "color": "#E1E1E6"
313
- }
314
- ],
315
- "characters": "R$ 1.259,00",
316
- "typography": {
317
- "fontFamily": "Roboto",
318
- "fontSize": 32,
319
- "fontWeight": 700,
320
- "lineHeightPx": 45,
321
- "letterSpacing": 0,
322
- "textAlignHorizontal": "LEFT",
323
- "textAlignVertical": "TOP"
324
- }
325
- }
326
- ]
327
- },
328
- {
329
- "name": "Card",
330
- "type": "INSTANCE",
331
- "component": {
332
- "name": "Card",
333
- "variant": "Card"
334
- },
335
- "layoutMode": "VERTICAL",
336
- "itemSpacing": 12,
337
- "padding": {
338
- "top": 24,
339
- "right": 24,
340
- "bottom": 24,
341
- "left": 32
342
- },
343
- "layoutWrap": "NO_WRAP",
344
- "layoutAlign": "INHERIT",
345
- "bounds": {
346
- "width": 352,
347
- "height": 137
348
- },
349
- "fills": [
350
- {
351
- "type": "SOLID",
352
- "color": "#015F43"
353
- }
354
- ],
355
- "cornerRadius": 6,
356
- "children": [
357
- {
358
- "name": "Header",
359
- "type": "FRAME",
360
- "layoutMode": "HORIZONTAL",
361
- "primaryAxisAlignItems": "SPACE_BETWEEN",
362
- "itemSpacing": 196,
363
- "layoutWrap": "NO_WRAP",
364
- "layoutAlign": "STRETCH",
365
- "bounds": {
366
- "width": 296,
367
- "height": 32
368
- },
369
- "children": [
370
- {
371
- "name": "Entradas",
372
- "type": "TEXT",
373
- "layoutAlign": "INHERIT",
374
- "bounds": {
375
- "width": 36,
376
- "height": 26
377
- },
378
- "fills": [
379
- {
380
- "type": "SOLID",
381
- "color": "#C4C4CC"
382
- }
383
- ],
384
- "characters": "Total",
385
- "typography": {
386
- "fontFamily": "Roboto",
387
- "fontSize": 16,
388
- "fontWeight": 400,
389
- "lineHeightPx": 26,
390
- "letterSpacing": 0,
391
- "textAlignHorizontal": "LEFT",
392
- "textAlignVertical": "TOP"
393
- }
394
- },
395
- {
396
- "name": "Icons",
397
- "type": "INSTANCE",
398
- "component": {
399
- "name": "Icons",
400
- "variant": "Tipo=currency-dollar-regular"
401
- },
402
- "props": {
403
- "tipo": "currency-dollar-regular"
404
- },
405
- "layoutAlign": "INHERIT",
406
- "bounds": {
407
- "width": 32,
408
- "height": 32
409
- },
410
- "children": [
411
- {
412
- "name": "Vector (Stroke)",
413
- "type": "VECTOR",
414
- "bounds": {
415
- "width": 2,
416
- "height": 28
417
- },
418
- "fills": [
419
- {
420
- "type": "SOLID",
421
- "color": "#FFFFFF"
422
- }
423
- ]
424
- },
425
- {
426
- "name": "Vector (Stroke)",
427
- "type": "VECTOR",
428
- "bounds": {
429
- "width": 18,
430
- "height": 22
431
- },
432
- "fills": [
433
- {
434
- "type": "SOLID",
435
- "color": "#FFFFFF"
436
- }
437
- ]
438
- }
439
- ]
440
- }
441
- ]
442
- },
443
- {
444
- "name": "R$ 17.400,00",
445
- "type": "TEXT",
446
- "layoutAlign": "STRETCH",
447
- "bounds": {
448
- "width": 296,
449
- "height": 45
450
- },
451
- "fills": [
452
- {
453
- "type": "SOLID",
454
- "color": "#E1E1E6"
455
- }
456
- ],
457
- "characters": "R$ 16.141,00",
458
- "typography": {
459
- "fontFamily": "Roboto",
460
- "fontSize": 32,
461
- "fontWeight": 700,
462
- "lineHeightPx": 45,
463
- "letterSpacing": 0,
464
- "textAlignHorizontal": "LEFT",
465
- "textAlignVertical": "TOP"
466
- }
467
- }
468
- ]
469
- }
470
- ]
471
- }
472
- }
package/figma-extractor/demo/index.html DELETED
@@ -1,188 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="pt-BR">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>DT Money - Controle Financeiro</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com">
8
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
10
- <link rel="stylesheet" href="style.css">
11
- </head>
12
- <body>
13
-
14
- <!-- Top Page Header -->
15
- <header class="page-header">
16
- <div class="header-container">
17
- <a href="#" class="logo" aria-label="DT Money Home">
18
- <!-- Ignite Symbol SVG -->
19
- <svg width="40" height="38" viewBox="0 0 40 38" fill="none" xmlns="http://www.w3.org/2000/svg">
20
- <path opacity="0.5" d="M19.4678 0.407471L0.267822 10.9852V32.1408L19.4678 21.563V0.407471Z" fill="#00B37E"/>
21
- <path d="M19.4678 21.563L0.267822 32.1408L19.4678 42.7185V21.563Z" fill="#00B37E"/>
22
- <path d="M19.4678 0.407471L38.6678 10.9852V32.1408L19.4678 21.563V0.407471Z" fill="#00B37E"/>
23
- </svg>
24
- <span class="logo-text">DT Money</span>
25
- </a>
26
-
27
- <button type="button" class="btn-new-transaction">
28
- Nova transação
29
- </button>
30
- </div>
31
- </header>
32
-
33
- <!-- Main Content Layout -->
34
- <main class="main-content">
35
-
36
- <!-- 1. Summary Cards (Dashboard) -->
37
- <section class="summary-cards" aria-label="Resumo financeiro">
38
-
39
- <!-- Card: Entradas -->
40
- <article class="card">
41
- <header class="card-header">
42
- <span class="card-title">Entradas</span>
43
- <span class="card-icon" aria-hidden="true">
44
- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#00B37E" viewBox="0 0 256 256">
45
- <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm45.66-90.34a8,8,0,0,1-11.32,0L136,99.31V168a8,8,0,0,1-16,0V99.31l-26.34,26.35a8,8,0,0,1-11.32-11.32l40-40a8,8,0,0,1,11.32,0l40,40A8,8,0,0,1,173.66,125.66Z"/>
46
- </svg>
47
- </span>
48
- </header>
49
- <strong class="card-value">R$ 17.400,00</strong>
50
- </article>
51
-
52
- <!-- Card: Saídas -->
53
- <article class="card">
54
- <header class="card-header">
55
- <span class="card-title">Saídas</span>
56
- <span class="card-icon" aria-hidden="true">
57
- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#F75A68" viewBox="0 0 256 256">
58
- <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm34.34-82.34L136,156.69V88a8,8,0,0,0-16,0v68.69l-26.34-26.35a8,8,0,0,0-11.32,11.32l40,40a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32Z"/>
59
- </svg>
60
- </span>
61
- </header>
62
- <strong class="card-value">R$ 1.259,00</strong>
63
- </article>
64
-
65
- <!-- Card: Total -->
66
- <article class="card card-highlight">
67
- <header class="card-header">
68
- <span class="card-title">Total</span>
69
- <span class="card-icon" aria-hidden="true">
70
- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#FFFFFF" viewBox="0 0 256 256">
71
- <path d="M152,120H116a12,12,0,0,1,0-24h44a8,8,0,0,0,0-16h-24V64a8,8,0,0,0-16,0V80H116a28,28,0,0,0,0,56h36a12,12,0,0,1,0,24H104a8,8,0,0,0,0,16h24v16a8,8,0,0,0,16,0V176h8a28,28,0,0,0,0-56Z"/>
72
- </svg>
73
- </span>
74
- </header>
75
- <strong class="card-value">R$ 16.141,00</strong>
76
- </article>
77
-
78
- </section>
79
-
80
- <!-- 2. Search Section -->
81
- <form class="search-form" role="search">
82
- <input
83
- type="text"
84
- class="search-input"
85
- placeholder="Busque uma transação"
86
- aria-label="Buscar transações"
87
- >
88
- <button type="submit" class="btn-search">
89
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#00B37E" viewBox="0 0 256 256" aria-hidden="true">
90
- <path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"/>
91
- </svg>
92
- Buscar
93
- </button>
94
- </form>
95
-
96
- <!-- 3. Transactions Table -->
97
- <div class="table-container">
98
- <table class="transactions-table" aria-label="Tabela de transações">
99
- <tbody>
100
- <tr>
101
- <td>Desenvolvimento de site</td>
102
- <td class="col-amount amount-income">R$ 12.000,00</td>
103
- <td class="col-category">Venda</td>
104
- <td>13/04/2022</td>
105
- </tr>
106
- <tr>
107
- <td>Hamburguer</td>
108
- <td class="col-amount amount-outcome">- R$ 59,00</td>
109
- <td class="col-category">Alimentação</td>
110
- <td>10/04/2022</td>
111
- </tr>
112
- <tr>
113
- <td>Aluguel do apartamento</td>
114
- <td class="col-amount amount-outcome">- R$ 1.200,00</td>
115
- <td class="col-category">Casa</td>
116
- <td>27/03/2022</td>
117
- </tr>
118
- <tr>
119
- <td>Computador</td>
120
- <td class="col-amount amount-income">R$ 5.400,00</td>
121
- <td class="col-category">Venda</td>
122
- <td>15/03/2022</td>
123
- </tr>
124
- <tr>
125
- <td>Desenvolvimento de site</td>
126
- <td class="col-amount amount-income">R$ 8.000,00</td>
127
- <td class="col-category">Venda</td>
128
- <td>13/03/2022</td>
129
- </tr>
130
- <tr>
131
- <td>Janta</td>
132
- <td class="col-amount amount-outcome">- R$ 39,00</td>
133
- <td class="col-category">Alimentação</td>
134
- <td>10/03/2022</td>
135
- </tr>
136
- <tr>
137
- <td>Aluguel do apartamento</td>
138
- <td class="col-amount amount-outcome">- R$ 1.200,00</td>
139
- <td class="col-category">Casa</td>
140
- <td>27/02/2022</td>
141
- </tr>
142
- <tr>
143
- <td>Salário</td>
144
- <td class="col-amount amount-income">R$ 5.400,00</td>
145
- <td class="col-category">Salário</td>
146
- <td>15/02/2022</td>
147
- </tr>
148
- <tr>
149
- <td>Almoço</td>
150
- <td class="col-amount amount-outcome">- R$ 30,00</td>
151
- <td class="col-category">Alimentação</td>
152
- <td>05/02/2022</td>
153
- </tr>
154
- <tr>
155
- <td>Fone de ouvido</td>
156
- <td class="col-amount amount-outcome">- R$ 150,00</td>
157
- <td class="col-category">Itens</td>
158
- <td>02/02/2022</td>
159
- </tr>
160
- </tbody>
161
- </table>
162
- </div>
163
-
164
- <!-- 4. Pagination -->
165
- <nav class="pagination" aria-label="Navegação da paginação">
166
- <button class="pagination-btn disabled" aria-label="Página anterior" disabled>
167
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#323238" viewBox="0 0 256 256">
168
- <path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/>
169
- </svg>
170
- </button>
171
-
172
- <div class="pagination-pages">
173
- <button class="page-num active" aria-current="page">1</button>
174
- <button class="page-num">2</button>
175
- <button class="page-num">3</button>
176
- </div>
177
-
178
- <button class="pagination-btn" aria-label="Próxima página">
179
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#00B37E" viewBox="0 0 256 256">
180
- <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/>
181
- </svg>
182
- </button>
183
- </nav>
184
-
185
- </main>
186
-
187
- </body>
188
- </html>