@struq/skill 0.2.1 → 0.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 (60) hide show
  1. package/README.md +15 -5
  2. package/package.json +4 -4
  3. package/skills/struq/SKILL.md +304 -200
  4. package/skills/struq/cinematic/showpieces/README.md +18 -0
  5. package/skills/struq/cinematic/showpieces/toonstuk-fill-rows.tsx +74 -0
  6. package/skills/struq/cinematic/showpieces/toonstuk-hero-opener.tsx +128 -0
  7. package/skills/struq/cinematic/showpieces/toonstuk-image-to-fullbleed.tsx +78 -0
  8. package/skills/struq/cinematic/showpieces/toonstuk-manifesto-scrub.tsx +81 -0
  9. package/skills/struq/cinematic/showpieces/toonstuk-panel-wipe.tsx +89 -0
  10. package/skills/struq/cinematic/showpieces/toonstuk-pixel-resolve.tsx +107 -0
  11. package/skills/struq/cinematic/showpieces/toonstuk-project-stack.tsx +86 -0
  12. package/skills/struq/cinematic/showpieces/toonstuk-scrub-connector.tsx +78 -0
  13. package/skills/struq/cinematic/showpieces/toonstuk-wordmark-finale.tsx +105 -0
  14. package/skills/struq/recipes/app/fonts.ts +22 -0
  15. package/skills/struq/recipes/app/globals.css +185 -0
  16. package/skills/struq/recipes/app/layout.tsx +28 -0
  17. package/skills/struq/recipes/components/struq/Cursor.tsx +117 -0
  18. package/skills/struq/recipes/components/struq/HeroCanvas.tsx +278 -0
  19. package/skills/struq/recipes/components/struq/HorizontalGallery.tsx +106 -0
  20. package/skills/struq/recipes/components/struq/MagneticButton.tsx +92 -0
  21. package/skills/struq/recipes/components/struq/MediaFrame.tsx +96 -0
  22. package/skills/struq/recipes/components/struq/PinnedZoom.tsx +79 -0
  23. package/skills/struq/recipes/components/struq/Reveal.tsx +64 -0
  24. package/skills/struq/recipes/components/struq/SmoothScroll.tsx +57 -0
  25. package/skills/struq/recipes/components/struq/SplitHeadline.tsx +68 -0
  26. package/skills/struq/recipes/components/struq/scenes/contours.ts +161 -0
  27. package/skills/struq/recipes/components/struq/scenes/dots.ts +110 -0
  28. package/skills/struq/recipes/components/struq/scenes/ripple.ts +99 -0
  29. package/skills/struq/recipes/components/struq/scenes/types.ts +114 -0
  30. package/skills/struq/recipes/lib/gsap.ts +21 -0
  31. package/skills/struq/references/anti-patterns.md +71 -6
  32. package/skills/struq/references/baseline-prompt.md +18 -14
  33. package/skills/struq/references/brief-router.md +7 -8
  34. package/skills/struq/references/composition.md +0 -1
  35. package/skills/struq/references/depth-parallax.md +1 -1
  36. package/skills/struq/references/direction.md +5 -5
  37. package/skills/struq/references/hero-scenes.md +107 -0
  38. package/skills/struq/references/iconography.md +1 -1
  39. package/skills/struq/references/imagery.md +10 -29
  40. package/skills/struq/references/micro-interactions.md +1 -1
  41. package/skills/struq/references/mobile-composition.md +1 -1
  42. package/skills/struq/references/niche-packets.md +338 -0
  43. package/skills/struq/references/page-architecture.md +2 -2
  44. package/skills/struq/references/pinning-scrub.md +3 -4
  45. package/skills/struq/references/scroll-reveals.md +1 -2
  46. package/skills/struq/references/sections.md +141 -0
  47. package/skills/struq/references/seo.md +2 -2
  48. package/skills/struq/references/showcase.md +2 -2
  49. package/skills/struq/references/svg-motion.md +390 -390
  50. package/skills/struq/references/typography.md +39 -39
  51. package/skills/struq/references/vibe-presets.md +5 -5
  52. package/skills/struq/references/webgl-scenes.md +593 -593
  53. package/skills/struq/scripts/canon.mjs +309 -0
  54. package/skills/struq/scripts/check.mjs +547 -0
  55. package/skills/struq/scripts/font-names.mjs +40 -0
  56. package/skills/struq/scripts/images.mjs +360 -0
  57. package/skills/struq/scripts/log.mjs +92 -0
  58. package/skills/struq/scripts/packs.mjs +156 -0
  59. package/skills/struq/scripts/recipes.mjs +135 -0
  60. /package/{bin → cli}/struq.mjs +0 -0
package/README.md CHANGED
@@ -79,7 +79,7 @@ Stack: Next.js App Router and Tailwind by default, Vite supported. It reads the
79
79
 
80
80
  | Command | What it does |
81
81
  |---|---|
82
- | `/struq <brief>` | Plans the site into one `STRUQ.md`, stops once for your veto, builds it, then screenshots it at 390, 768, 1440 and 1920 and fixes what it sees |
82
+ | `/struq <brief>` | Plans the site into one `STRUQ.md`, stops once for your approval, builds it, then runs its own check and, with a browser tool, screenshots it and fixes what it sees |
83
83
  | `/struq redesign <path>` | Keeps your brand, copy and components; rebuilds the execution |
84
84
  | `/struq audit <path-or-url>` | Changes nothing. Returns a score out of 100, every tell with its fix, and the three highest-payoff changes |
85
85
  | `/struq direct <brief>` | Directed mode for one continuous 3D experience across chapters |
@@ -88,10 +88,11 @@ In Codex, use `$struq` instead of `/struq`; as a Claude Code plugin the command
88
88
 
89
89
  ## How a build runs
90
90
 
91
- 1. **Plan.** It reads your brief and writes one `STRUQ.md`: brand, concept, the two typefaces, palette tokens, icon family, page arc, which showcase recipes go where, the transition system, and whether 3D is warranted. It never invents testimonials or stats.
92
- 2. **One stop.** It shows the summary and asks once: veto anything, and send a logo, photos or real numbers if you have them. Only an empty or vague brief gets a short wizard first.
93
- 3. **Build.** Static layout to the baseline first, at desktop and mobile at once. Motion goes on in layers: reveals, composition, showpieces, text and SVG, pointer, then 3D.
94
- 4. **Look.** Screenshots at four widths, a tell scan, a feel audit and one full scroll. Then it fixes and re-shoots.
91
+ 1. **Plan.** A short plan in `STRUQ.md` with a Build checklist the agent ticks as it goes. It never invents testimonials or stats.
92
+ 2. **One stop.** It shows the plan and asks once: approve, and send a logo, photos or real numbers if you have them. A plain yes builds with the canon picks.
93
+ 3. **Canon.** Palette, type pairing and section order come from Struq's own canon (`struq.nl/api/assets`), not from the defaults every AI falls back on. The photos come from the matching Struq beeldbank pack, so no frame is ever empty.
94
+ 4. **Build.** Tested components do the cinematic floor on every site: Lenis smooth scroll on one GSAP clock, a SplitText hero, masked reveals, one pinned or horizontal showpiece, a WebGL hero layer with a poster fallback, a magnetic CTA.
95
+ 5. **Check.** `check.mjs` scans the project for empty frames, the AI tells (eyebrows, gradients, pills, mono, Inter, purple), the motion floor and the typography, and the build is only done when it passes. With a browser tool it also screenshots and fixes what it sees.
95
96
 
96
97
  ## Install options
97
98
 
@@ -129,6 +130,15 @@ Struq builds use [Struq Icons](https://struq.nl/iconen) by default: 182 two-tone
129
130
  npm install @struq/icons
130
131
  ```
131
132
 
133
+ ## What it fetches and sends
134
+
135
+ Struq is instructions, reference files, copy-in components and five small Node scripts (`recipes.mjs`, `canon.mjs`, `images.mjs`, `check.mjs`, `log.mjs`) that your agent runs in your project. They read and write files in your project, including a build log, `STRUQ-LOG.md`, and make the public requests below; they collect or send nothing about you or your project.
136
+
137
+ - **Canon.** `canon.mjs` reads the public palettes, pairings and design systems at `https://struq.nl/api/assets`, and downloads a Fontshare face from `api.fontshare.com` when a pairing needs one. No account, no key.
138
+ - **Photos, for every slot your own photos do not fill.** The skill has your agent read the public pack list at `https://struq.nl/api/media/packs` and download the chosen images from `https://struq.nl/media/packs/` into your project. These are plain public requests: no account, no key, and nothing from your project goes with them. The images are CC0.
139
+ - **Checks.** The screenshot and performance checks run against your own local dev server, with your agent's own browser tool.
140
+ - **The installer.** `npx @struq/skill@latest` downloads the package from npm, looks for the AI tools' folders in your home folder and copies the skill into them. It sends nothing.
141
+
132
142
  ## License
133
143
 
134
144
  MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@struq/skill",
3
- "version": "0.2.1",
3
+ "version": "0.3.0",
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.nl)",
@@ -23,10 +23,10 @@
23
23
  ],
24
24
  "type": "module",
25
25
  "bin": {
26
- "struq": "bin/struq.mjs"
26
+ "struq": "cli/struq.mjs"
27
27
  },
28
28
  "files": [
29
- "bin",
29
+ "cli",
30
30
  "skills",
31
31
  "README.md",
32
32
  "LICENSE"
@@ -35,7 +35,7 @@
35
35
  "node": ">=18"
36
36
  },
37
37
  "scripts": {
38
- "test": "node --test test/install.test.mjs"
38
+ "test": "node --test test/install.test.mjs test/check.test.mjs test/packs.test.mjs test/fonts.test.mjs"
39
39
  },
40
40
  "publishConfig": {
41
41
  "access": "public"