@struq/skill 0.5.2 → 0.5.3
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/README.md +27 -27
- package/package.json +2 -2
- package/skills/struq/SKILL.md +168 -165
- package/skills/struq/blocks/CATALOG.md +49 -46
- package/skills/struq/blocks/backgrounds/background-aurora.tsx +2 -1
- package/skills/struq/blocks/backgrounds/background-facets.tsx +5 -3
- package/skills/struq/blocks/backgrounds/background-silk.tsx +6 -2
- package/skills/struq/blocks/catalog.json +50 -5
- package/skills/struq/blocks/film.json +11 -7
- package/skills/struq/blocks/footers/footer-contact.tsx +8 -78
- package/skills/struq/blocks/headers/header-bar.tsx +144 -29
- package/skills/struq/blocks/headers/menu-curtain.tsx +36 -19
- package/skills/struq/blocks/heroes/hero-poster.tsx +36 -10
- package/skills/struq/blocks/kit/HeroCanvas.tsx +6 -2
- package/skills/struq/blocks/kit/SplitHeadline.tsx +2 -1
- package/skills/struq/blocks/kit/accent.ts +29 -3
- package/skills/struq/blocks/kit/blocks.css +530 -6
- package/skills/struq/blocks/kit/feel.ts +183 -0
- package/skills/struq/blocks/kit/gsap.ts +9 -6
- package/skills/struq/blocks/kit/middle/PlaceHours.tsx +254 -0
- package/skills/struq/blocks/kit/middle/ProcessStrip.tsx +428 -0
- package/skills/struq/blocks/kit/middle/ServicesList.tsx +496 -0
- package/skills/struq/blocks/kit/middle/entrance.ts +98 -0
- package/skills/struq/blocks/kit/middle/hours.ts +154 -0
- package/skills/struq/blocks/kit/middle/index.ts +14 -0
- package/skills/struq/blocks/kit/motion/HoverLink.tsx +33 -0
- package/skills/struq/blocks/kit/motion/ImageCurtain.tsx +79 -0
- package/skills/struq/blocks/kit/motion/MaskWipe.tsx +91 -0
- package/skills/struq/blocks/kit/motion/Pressable.tsx +58 -0
- package/skills/struq/blocks/kit/motion/RevealText.tsx +103 -0
- package/skills/struq/blocks/kit/motion/Rise.tsx +77 -0
- package/skills/struq/blocks/kit/motion/ScrubLine.tsx +108 -0
- package/skills/struq/blocks/kit/motion/index.ts +11 -0
- package/skills/struq/blocks/kit/quiet/Close.tsx +178 -52
- package/skills/struq/blocks/kit/quiet/Statement.tsx +3 -2
- package/skills/struq/blocks/kit/subject/AppScreen.tsx +388 -0
- package/skills/struq/blocks/kit/subject/Document.tsx +742 -0
- package/skills/struq/blocks/kit/subject/Mark.tsx +44 -0
- package/skills/struq/blocks/kit/subject/PatternPaper.tsx +410 -0
- package/skills/struq/blocks/kit/subject/SectionDrawing.tsx +349 -0
- package/skills/struq/blocks/kit/subject/Ticket.tsx +354 -0
- package/skills/struq/blocks/kit/subject/build.ts +66 -0
- package/skills/struq/blocks/kit/subject/draw.ts +196 -0
- package/skills/struq/blocks/kit/subject/drawings.ts +373 -0
- package/skills/struq/blocks/kit/subject/format.ts +122 -0
- package/skills/struq/blocks/kit/subject/index.ts +11 -0
- package/skills/struq/blocks/kit/subject/patterns.ts +204 -0
- package/skills/struq/blocks/preloaders/preloader-stack.tsx +75 -22
- package/skills/struq/blocks/showpieces/hero-opener.tsx +55 -7
- package/skills/struq/blocks/showpieces/image-to-fullbleed.tsx +64 -6
- package/skills/struq/blocks/showpieces/manifesto-scrub.tsx +56 -3
- package/skills/struq/blocks/showpieces/panel-wipe.tsx +93 -11
- package/skills/struq/blocks/showpieces/wordmark-finale.tsx +38 -5
- package/skills/struq/canon/canon.json +1 -1
- package/skills/struq/references/art-direction.md +51 -0
- package/skills/struq/scripts/blocks.mjs +56 -20
- package/skills/struq/scripts/canon.mjs +36 -7
- package/skills/struq/scripts/check.mjs +417 -11
- package/skills/struq/scripts/draw.mjs +49 -0
- package/skills/struq/scripts/film-check.mjs +28 -4
- package/skills/struq/scripts/gate.mjs +13 -3
- package/skills/struq/scripts/hand.mjs +222 -0
- package/skills/struq/scripts/images.mjs +12 -3
- package/skills/struq/scripts/look.mjs +1184 -0
- package/skills/struq/scripts/stamp.mjs +47 -0
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<h1 align="center">
|
|
2
2
|
<a href="https://struq.app/skill">
|
|
3
3
|
<picture>
|
|
4
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
5
|
-
<img alt="Struq skill: studio-grade sites from the AI you already use." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
4
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/hero-dark.svg">
|
|
5
|
+
<img alt="Struq skill: studio-grade sites from the AI you already use." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/hero-light.svg" width="100%">
|
|
6
6
|
</picture>
|
|
7
7
|
</a>
|
|
8
8
|
</h1>
|
|
@@ -41,7 +41,7 @@ It finds the AI tools on your machine and installs the skill into each one. Then
|
|
|
41
41
|
|
|
42
42
|
<br>
|
|
43
43
|
|
|
44
|
-
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
44
|
+
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/film-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/film-light.svg" width="26" height="26" alt=""></picture> Watch the Struq skill in 58 seconds
|
|
45
45
|
|
|
46
46
|
https://github.com/user-attachments/assets/19587b11-ef4c-4cf6-81ef-87230923e567
|
|
47
47
|
|
|
@@ -49,33 +49,33 @@ https://github.com/user-attachments/assets/19587b11-ef4c-4cf6-81ef-87230923e567
|
|
|
49
49
|
|
|
50
50
|
<br>
|
|
51
51
|
|
|
52
|
-
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
52
|
+
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/story-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/story-light.svg" width="26" height="26" alt=""></picture> One brief, one stop, one site
|
|
53
53
|
|
|
54
54
|
<picture>
|
|
55
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
56
|
-
<img alt="Three frames: a brief typed into the agent, the plan the skill stops once to show, and the site assembling and passing its check." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
55
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/story-dark.svg">
|
|
56
|
+
<img alt="Three frames: a brief typed into the agent, the plan the skill stops once to show, and the site assembling and passing its check." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/story-light.svg" width="100%">
|
|
57
57
|
</picture>
|
|
58
58
|
|
|
59
59
|
Your agent settles the idea, the motion language, the motif and a storyboard of scenes before it writes any markup. It stops once to show you that plan and asks for a logo, photos or real numbers if you have them. Then it builds from the plan and runs its own check until the page passes. It never invents a testimonial or a number the brief did not give.
|
|
60
60
|
|
|
61
61
|
<br>
|
|
62
62
|
|
|
63
|
-
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
63
|
+
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/showcase-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/showcase-light.svg" width="26" height="26" alt=""></picture> What a directed site looks like
|
|
64
64
|
|
|
65
65
|
<p align="center">
|
|
66
|
-
<a href="https://struq.app/showcase/vuur"><img alt="Vuur, a restaurant site built with the Struq skill, playing its opening and first scene." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
66
|
+
<a href="https://struq.app/showcase/vuur"><img alt="Vuur, a restaurant site built with the Struq skill, playing its opening and first scene." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/showcase/vuur.webp" width="100%"></a>
|
|
67
67
|
</p>
|
|
68
68
|
|
|
69
69
|
<p align="center"><sub><b>Vuur</b>, a restaurant with a wood-fired oven. Built with the Struq skill by Claude Opus 5.5.</sub></p>
|
|
70
70
|
|
|
71
71
|
<p align="center">
|
|
72
|
-
<a href="https://struq.app/showcase/forge"><img alt="Ostrava Steel, a knife forge site." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
73
|
-
<a href="https://struq.app/showcase/brume"><img alt="Brume, a lighthouse hotel site." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
72
|
+
<a href="https://struq.app/showcase/forge"><img alt="Ostrava Steel, a knife forge site." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/showcase/forge.webp" width="49%"></a>
|
|
73
|
+
<a href="https://struq.app/showcase/brume"><img alt="Brume, a lighthouse hotel site." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/showcase/brume.webp" width="49%"></a>
|
|
74
74
|
</p>
|
|
75
75
|
|
|
76
76
|
<p align="center">
|
|
77
|
-
<a href="https://struq.app/showcase/lowlight"><img alt="Lowlight, a film studio site." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
78
|
-
<a href="https://struq.app/showcase/halide"><img alt="Halide, a site directed in ink." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
77
|
+
<a href="https://struq.app/showcase/lowlight"><img alt="Lowlight, a film studio site." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/showcase/lowlight.webp" width="49%"></a>
|
|
78
|
+
<a href="https://struq.app/showcase/halide"><img alt="Halide, a site directed in ink." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/showcase/halide.webp" width="49%"></a>
|
|
79
79
|
</p>
|
|
80
80
|
|
|
81
81
|
<p align="center"><sub><b>Ostrava Steel</b>, <b>Brume</b>, <b>Lowlight</b> and <b>Halide</b> were directed the Struq way and written by Claude Opus as one file, before the skill carried the method. Much of what the skill knows about craft came from them. All five run live on <a href="https://struq.app/showcase">struq.app/showcase</a>.</sub></p>
|
|
@@ -84,11 +84,11 @@ Where the skill still loses: craft under pressure. An ambitious page with pinned
|
|
|
84
84
|
|
|
85
85
|
<br>
|
|
86
86
|
|
|
87
|
-
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
87
|
+
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/blocks-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/blocks-light.svg" width="26" height="26" alt=""></picture> The blocks carry the motion
|
|
88
88
|
|
|
89
89
|
<picture>
|
|
90
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
91
|
-
<img alt="Six Struq blocks playing at once: a preloader, a hero, a page transition, a manifesto scrub, an image growing to full bleed and a WebGL background." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
90
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/blocks-dark.webp">
|
|
91
|
+
<img alt="Six Struq blocks playing at once: a preloader, a hero, a page transition, a manifesto scrub, an image growing to full bleed and a WebGL background." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/blocks-light.webp" width="100%">
|
|
92
92
|
</picture>
|
|
93
93
|
|
|
94
94
|
Your agent picks the direction, sets the order and writes the copy. The motion comes from Struq's own catalogue: 44 admitted blocks, each a real React file that works in light and dark, with a still version for phones and for reduced motion.
|
|
@@ -115,22 +115,22 @@ Each one with its files, packages and props: [the catalogue](skills/struq/blocks
|
|
|
115
115
|
|
|
116
116
|
<br>
|
|
117
117
|
|
|
118
|
-
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
118
|
+
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/direction-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/direction-light.svg" width="26" height="26" alt=""></picture> Direction before markup
|
|
119
119
|
|
|
120
120
|
<picture>
|
|
121
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
122
|
-
<img alt="Three directions from the skill's canon, each in its own palette, type pairing and motion language: weight, cut and curtain." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
121
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/direction-dark.svg">
|
|
122
|
+
<img alt="Three directions from the skill's canon, each in its own palette, type pairing and motion language: weight, cut and curtain." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/direction-light.svg" width="100%">
|
|
123
123
|
</picture>
|
|
124
124
|
|
|
125
125
|
Three briefs from the skill's worked examples, three directions from its canon. Each gets a palette, a type pairing and a motion language: weight settles, cut cuts, curtain lifts. The skill writes the choice into one token block that every block reads, so the whole page holds to it.
|
|
126
126
|
|
|
127
127
|
<br>
|
|
128
128
|
|
|
129
|
-
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
129
|
+
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/mcp-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/mcp-light.svg" width="26" height="26" alt=""></picture> The Struq MCP
|
|
130
130
|
|
|
131
131
|
<picture>
|
|
132
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
133
|
-
<img alt="Your agent calling the Struq MCP's seven read-only tools at struq.app/api/mcp." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
132
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/mcp-dark.svg">
|
|
133
|
+
<img alt="Your agent calling the Struq MCP's seven read-only tools at struq.app/api/mcp." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/mcp-light.svg" width="100%">
|
|
134
134
|
</picture>
|
|
135
135
|
|
|
136
136
|
The skill works on its own, from the catalogue it ships with. Connect the Struq MCP and your agent reads the live catalogue instead, plus the whole Struq library. It is free; it asks for a free account because your AI tool connects as you.
|
|
@@ -184,12 +184,12 @@ All of them read; none of them changes anything in your account or your project.
|
|
|
184
184
|
|
|
185
185
|
<br>
|
|
186
186
|
|
|
187
|
-
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
187
|
+
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/icons-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/icons-light.svg" width="26" height="26" alt=""></picture> Struq Icons
|
|
188
188
|
|
|
189
189
|
<a href="https://struq.app/icons">
|
|
190
190
|
<picture>
|
|
191
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
192
|
-
<img alt="Sixteen Struq Icons, each playing its own hover move." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
191
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/icons-dark.svg">
|
|
192
|
+
<img alt="Sixteen Struq Icons, each playing its own hover move." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/icons-light.svg" width="100%">
|
|
193
193
|
</picture>
|
|
194
194
|
</a>
|
|
195
195
|
|
|
@@ -201,7 +201,7 @@ npm install @struq/icons
|
|
|
201
201
|
|
|
202
202
|
<br>
|
|
203
203
|
|
|
204
|
-
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
204
|
+
## <picture><source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/details-dark.svg"><img src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/h/details-light.svg" width="26" height="26" alt=""></picture> The details
|
|
205
205
|
|
|
206
206
|
<details>
|
|
207
207
|
<summary><b>Commands, per agent</b></summary>
|
|
@@ -268,8 +268,8 @@ The Struq skill is instructions, the block files and five small Node scripts (`b
|
|
|
268
268
|
<p align="center">
|
|
269
269
|
<a href="https://struq.app">
|
|
270
270
|
<picture>
|
|
271
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
272
|
-
<img alt="Struq. Free and open source, MIT." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.
|
|
271
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/outro-dark.svg">
|
|
272
|
+
<img alt="Struq. Free and open source, MIT." src="https://cdn.jsdelivr.net/gh/struqapp/struq-design@v0.5.3/assets/readme/outro-light.svg" width="100%">
|
|
273
273
|
</picture>
|
|
274
274
|
</a>
|
|
275
275
|
</p>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@struq/skill",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.3",
|
|
4
4
|
"description": "Install the free Struq skill into Claude Code, Cursor, Codex and other AI coding tools: websites at the level of a design studio, built by your own AI.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Struq (https://struq.app)",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"node": ">=18"
|
|
36
36
|
},
|
|
37
37
|
"scripts": {
|
|
38
|
-
"test": "node --test test/install.test.mjs test/check.test.mjs test/packs.test.mjs test/tokens.test.mjs test/blocks.test.mjs test/gate.test.mjs test/arc.test.mjs test/plugin.test.mjs",
|
|
38
|
+
"test": "node --test test/install.test.mjs test/check.test.mjs test/packs.test.mjs test/tokens.test.mjs test/blocks.test.mjs test/gate.test.mjs test/arc.test.mjs test/plugin.test.mjs test/draw.test.mjs test/look.test.mjs",
|
|
39
39
|
"release:blocks": "node scripts/release-blocks.mjs",
|
|
40
40
|
"release:plugin": "node scripts/build-plugin.mjs",
|
|
41
41
|
"prepack": "node scripts/readme-urls.mjs pack",
|