@efectoapp/mcp-server 0.1.26 → 0.1.27

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 (6) hide show
  1. package/dist/cli.d.ts.map +1 -1
  2. package/dist/cli.js +63 -2
  3. package/dist/cli.js.map +1 -1
  4. package/package.json +2 -1
  5. package/skills/SKILL.md +381 -0
  6. package/skills/recipes.md +490 -0
package/dist/cli.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";AAEA;;;;;;GAMG;AA2LH,wBAAgB,MAAM,IAAI,OAAO,CAqBhC"}
1
+ {"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";AAEA;;;;;;GAMG;AAkQH,wBAAgB,MAAM,IAAI,OAAO,CAqBhC"}
package/dist/cli.js CHANGED
@@ -84,6 +84,59 @@ function isClaudeCodeInstalled() {
84
84
  const claudeDir = path.join(os.homedir(), '.claude');
85
85
  return fs.existsSync(claudeDir);
86
86
  }
87
+ // Get the path to the bundled skills directory
88
+ function getSkillsSourceDir() {
89
+ return path.join(__dirname, '..', 'skills');
90
+ }
91
+ // Get the target directory for skills (~/.claude/skills/efecto/)
92
+ function getSkillsTargetDir() {
93
+ return path.join(os.homedir(), '.claude', 'skills', 'efecto');
94
+ }
95
+ // Install the design skill files
96
+ function installSkills() {
97
+ const sourceDir = getSkillsSourceDir();
98
+ const targetDir = getSkillsTargetDir();
99
+ // Check if source skills exist
100
+ const skillFile = path.join(sourceDir, 'SKILL.md');
101
+ if (!fs.existsSync(skillFile)) {
102
+ return false;
103
+ }
104
+ // Create target directory
105
+ fs.mkdirSync(targetDir, { recursive: true });
106
+ // Copy skill files
107
+ const files = ['SKILL.md', 'recipes.md'];
108
+ for (const file of files) {
109
+ const src = path.join(sourceDir, file);
110
+ const dest = path.join(targetDir, file);
111
+ if (fs.existsSync(src)) {
112
+ fs.copyFileSync(src, dest);
113
+ }
114
+ }
115
+ return true;
116
+ }
117
+ // Remove the design skill files
118
+ function uninstallSkills() {
119
+ const targetDir = getSkillsTargetDir();
120
+ if (fs.existsSync(targetDir)) {
121
+ const files = ['SKILL.md', 'recipes.md'];
122
+ for (const file of files) {
123
+ const filePath = path.join(targetDir, file);
124
+ if (fs.existsSync(filePath)) {
125
+ fs.unlinkSync(filePath);
126
+ }
127
+ }
128
+ // Remove directory if empty
129
+ try {
130
+ fs.rmdirSync(targetDir);
131
+ // Also try to clean up parent skills dir if empty
132
+ const skillsDir = path.dirname(targetDir);
133
+ fs.rmdirSync(skillsDir);
134
+ }
135
+ catch {
136
+ // Directory not empty, that's fine
137
+ }
138
+ }
139
+ }
87
140
  // Install Efecto MCP server
88
141
  function install() {
89
142
  console.log('');
@@ -117,10 +170,16 @@ function install() {
117
170
  console.log('');
118
171
  process.exit(0);
119
172
  }
120
- // Add Efecto
173
+ // Add Efecto MCP server
121
174
  mcpServers.efecto = EFECTO_CONFIG;
122
175
  writeClaudeConfig(configPath, config);
123
- console.log(green(' ✓ Efecto installed successfully!'));
176
+ console.log(green(' ✓ MCP server installed'));
177
+ // Install design skill
178
+ const skillsInstalled = installSkills();
179
+ if (skillsInstalled) {
180
+ console.log(green(' ✓ Design skill installed'));
181
+ console.log(dim(` → ${getSkillsTargetDir()}`));
182
+ }
124
183
  console.log('');
125
184
  console.log(dim(` Config: ${configPath}`));
126
185
  console.log('');
@@ -166,6 +225,8 @@ function uninstall() {
166
225
  delete config.mcpServers;
167
226
  }
168
227
  writeClaudeConfig(configPath, config);
228
+ // Remove design skill files
229
+ uninstallSkills();
169
230
  console.log(green(' ✓ Efecto uninstalled'));
170
231
  console.log('');
171
232
  console.log(dim(` Config: ${configPath}`));
package/dist/cli.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";;AAEA;;;;;;GAMG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2LH,wBAqBC;AA9MD,uCAAwB;AACxB,2CAA4B;AAC5B,uCAAwB;AAExB,gCAAgC;AAChC,MAAM,KAAK,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,WAAW,CAAC,SAAS,CAAA;AAClD,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,WAAW,CAAC,SAAS,CAAA;AAChD,MAAM,IAAI,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,WAAW,CAAC,SAAS,CAAA;AACjD,MAAM,MAAM,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,WAAW,CAAC,SAAS,CAAA;AACnD,MAAM,IAAI,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,UAAU,CAAC,SAAS,CAAA;AAChD,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,UAAU,CAAC,SAAS,CAAA;AAE/C,+BAA+B;AAC/B,MAAM,aAAa,GAAG;IACpB,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,CAAC,IAAI,EAAE,uBAAuB,CAAC;CACtC,CAAA;AAED,yEAAyE;AACzE,0DAA0D;AAC1D,SAAS,mBAAmB;IAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,cAAc,CAAC,CAAA;AAChD,CAAC;AAED,iEAAiE;AACjE,SAAS,gBAAgB,CAAC,QAAgB;IACxC,IAAI,CAAC;QACH,IAAI,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC5B,MAAM,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;YAClD,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC;IAAC,MAAM,CAAC;QACP,6BAA6B;IAC/B,CAAC;IACD,OAAO,EAAE,CAAA;AACX,CAAC;AAED,mDAAmD;AACnD,SAAS,iBAAiB,CAAC,QAAgB,EAAE,MAA+B;IAC1E,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;AACpE,CAAC;AAED,uEAAuE;AACvE,SAAS,qBAAqB;IAC5B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,SAAS,CAAC,CAAA;IACpD,OAAO,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAA;AACjC,CAAC;AAED,4BAA4B;AAC5B,SAAS,OAAO;IACd,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAA;IAC9C,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC,CAAA;IAC/C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IAEf,IAAI,CAAC,qBAAqB,EAAE,EAAE,CAAC;QAC7B,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC,CAAA;QAC7C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,GAAG,CAAC,uCAAuC,CAAC,CAAA;QACpD,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC,CAAA;QAC7C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC;IAED,MAAM,UAAU,GAAG,mBAAmB,EAAE,CAAA;IACxC,MAAM,MAAM,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAA;IAE3C,4CAA4C;IAC5C,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;QAChE,MAAM,CAAC,UAAU,GAAG,EAAE,CAAA;IACxB,CAAC;IAED,MAAM,UAAU,GAAG,MAAM,CAAC,UAAqC,CAAA;IAE/D,6BAA6B;IAC7B,IAAI,UAAU,CAAC,MAAM,EAAE,CAAC;QACtB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,iCAAiC,CAAC,CAAC,CAAA;QACtD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,aAAa,UAAU,EAAE,CAAC,CAAC,CAAA;QAC3C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAA;QACnC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC,CAAA;QAC1D,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAC,CAAA;QACxD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC;IAED,aAAa;IACb,UAAU,CAAC,MAAM,GAAG,aAAa,CAAA;IACjC,iBAAiB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAA;IAErC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,oCAAoC,CAAC,CAAC,CAAA;IACxD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,aAAa,UAAU,EAAE,CAAC,CAAC,CAAA;IAC3C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAA;IAClC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAA;IACvC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,mCAAmC,CAAC,CAAA;IAChD,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,iDAAiD,CAAC,CAAC,CAAA;IACpE,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,6DAA6D,CAAC,CAAC,CAAA;IAChF,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,8CAA8C,CAAC,CAAC,CAAA;IACjE,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,2CAA2C,CAAC,CAAC,CAAA;IAC7D,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;AACjB,CAAC;AAED,8BAA8B;AAC9B,SAAS,SAAS;IAChB,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC,CAAA;IAChD,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC,CAAA;IAC/C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IAEf,MAAM,UAAU,GAAG,mBAAmB,EAAE,CAAA;IAExC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC;QAC/B,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,iCAAiC,CAAC,CAAC,CAAA;QACtD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAA;QACtC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC;IAED,MAAM,MAAM,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAA;IAC3C,MAAM,UAAU,GAAG,MAAM,CAAC,UAAiD,CAAA;IAE3E,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;QACtC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,6BAA6B,CAAC,CAAC,CAAA;QAClD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAA;QACtC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC;IAED,gBAAgB;IAChB,OAAO,UAAU,CAAC,MAAM,CAAA;IAExB,+BAA+B;IAC/B,IAAI,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACzC,OAAO,MAAM,CAAC,UAAU,CAAA;IAC1B,CAAC;IAED,iBAAiB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAA;IAErC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAA;IAC5C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,aAAa,UAAU,EAAE,CAAC,CAAC,CAAA;IAC3C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,yCAAyC,CAAC,CAAA;IACtD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAA;IACpC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAC,CAAA;IACxD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;AACjB,CAAC;AAED,YAAY;AACZ,SAAS,QAAQ;IACf,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAA;IACpC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAA;IACnC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,+DAA+D,CAAC,CAAA;IAC5E,OAAO,CAAC,GAAG,CAAC,4DAA4D,CAAC,CAAA;IACzE,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAA;IAChC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,mCAAmC,CAAC,EAAE,CAAC,CAAA;IAC7D,OAAO,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAA;IAC9C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,qCAAqC,CAAC,EAAE,CAAC,CAAA;IAC/D,OAAO,CAAC,GAAG,CAAC,sCAAsC,CAAC,CAAA;IACnD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAA;IACxC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAA;IACvC,OAAO,CAAC,GAAG,CAAC,sCAAsC,CAAC,CAAA;IACnD,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC,CAAA;IAC1D,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAC,CAAA;IACvD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;AACjB,CAAC;AAED,uBAAuB;AACvB,SAAgB,MAAM;IACpB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAClC,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAA;IAEtC,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,SAAS;YACZ,OAAO,EAAE,CAAA;YACT,OAAO,IAAI,CAAA;QACb,KAAK,WAAW,CAAC;QACjB,KAAK,QAAQ;YACX,SAAS,EAAE,CAAA;YACX,OAAO,IAAI,CAAA;QACb,KAAK,MAAM,CAAC;QACZ,KAAK,QAAQ,CAAC;QACd,KAAK,IAAI;YACP,QAAQ,EAAE,CAAA;YACV,OAAO,IAAI,CAAA;QACb;YACE,uCAAuC;YACvC,OAAO,KAAK,CAAA;IAChB,CAAC;AACH,CAAC"}
1
+ {"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";;AAEA;;;;;;GAMG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkQH,wBAqBC;AArRD,uCAAwB;AACxB,2CAA4B;AAC5B,uCAAwB;AAExB,gCAAgC;AAChC,MAAM,KAAK,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,WAAW,CAAC,SAAS,CAAA;AAClD,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,WAAW,CAAC,SAAS,CAAA;AAChD,MAAM,IAAI,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,WAAW,CAAC,SAAS,CAAA;AACjD,MAAM,MAAM,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,WAAW,CAAC,SAAS,CAAA;AACnD,MAAM,IAAI,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,UAAU,CAAC,SAAS,CAAA;AAChD,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,UAAU,CAAC,SAAS,CAAA;AAE/C,+BAA+B;AAC/B,MAAM,aAAa,GAAG;IACpB,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,CAAC,IAAI,EAAE,uBAAuB,CAAC;CACtC,CAAA;AAED,yEAAyE;AACzE,0DAA0D;AAC1D,SAAS,mBAAmB;IAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,cAAc,CAAC,CAAA;AAChD,CAAC;AAED,iEAAiE;AACjE,SAAS,gBAAgB,CAAC,QAAgB;IACxC,IAAI,CAAC;QACH,IAAI,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC5B,MAAM,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;YAClD,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC;IAAC,MAAM,CAAC;QACP,6BAA6B;IAC/B,CAAC;IACD,OAAO,EAAE,CAAA;AACX,CAAC;AAED,mDAAmD;AACnD,SAAS,iBAAiB,CAAC,QAAgB,EAAE,MAA+B;IAC1E,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;AACpE,CAAC;AAED,uEAAuE;AACvE,SAAS,qBAAqB;IAC5B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,SAAS,CAAC,CAAA;IACpD,OAAO,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAA;AACjC,CAAC;AAED,+CAA+C;AAC/C,SAAS,kBAAkB;IACzB,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAA;AAC7C,CAAC;AAED,iEAAiE;AACjE,SAAS,kBAAkB;IACzB,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAA;AAC/D,CAAC;AAED,iCAAiC;AACjC,SAAS,aAAa;IACpB,MAAM,SAAS,GAAG,kBAAkB,EAAE,CAAA;IACtC,MAAM,SAAS,GAAG,kBAAkB,EAAE,CAAA;IAEtC,+BAA+B;IAC/B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAA;IAClD,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAA;IACd,CAAC;IAED,0BAA0B;IAC1B,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA;IAE5C,mBAAmB;IACnB,MAAM,KAAK,GAAG,CAAC,UAAU,EAAE,YAAY,CAAC,CAAA;IACxC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA;QACtC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA;QACvC,IAAI,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YACvB,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC;AAED,gCAAgC;AAChC,SAAS,eAAe;IACtB,MAAM,SAAS,GAAG,kBAAkB,EAAE,CAAA;IACtC,IAAI,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC;QAC7B,MAAM,KAAK,GAAG,CAAC,UAAU,EAAE,YAAY,CAAC,CAAA;QACxC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA;YAC3C,IAAI,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC5B,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAA;YACzB,CAAC;QACH,CAAC;QACD,4BAA4B;QAC5B,IAAI,CAAC;YACH,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;YACvB,kDAAkD;YAClD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;YACzC,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;QACzB,CAAC;QAAC,MAAM,CAAC;YACP,mCAAmC;QACrC,CAAC;IACH,CAAC;AACH,CAAC;AAED,4BAA4B;AAC5B,SAAS,OAAO;IACd,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAA;IAC9C,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC,CAAA;IAC/C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IAEf,IAAI,CAAC,qBAAqB,EAAE,EAAE,CAAC;QAC7B,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC,CAAA;QAC7C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,GAAG,CAAC,uCAAuC,CAAC,CAAA;QACpD,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC,CAAA;QAC7C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC;IAED,MAAM,UAAU,GAAG,mBAAmB,EAAE,CAAA;IACxC,MAAM,MAAM,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAA;IAE3C,4CAA4C;IAC5C,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;QAChE,MAAM,CAAC,UAAU,GAAG,EAAE,CAAA;IACxB,CAAC;IAED,MAAM,UAAU,GAAG,MAAM,CAAC,UAAqC,CAAA;IAE/D,6BAA6B;IAC7B,IAAI,UAAU,CAAC,MAAM,EAAE,CAAC;QACtB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,iCAAiC,CAAC,CAAC,CAAA;QACtD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,aAAa,UAAU,EAAE,CAAC,CAAC,CAAA;QAC3C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAA;QACnC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC,CAAA;QAC1D,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAC,CAAA;QACxD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC;IAED,wBAAwB;IACxB,UAAU,CAAC,MAAM,GAAG,aAAa,CAAA;IACjC,iBAAiB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAA;IAErC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC,CAAA;IAE9C,uBAAuB;IACvB,MAAM,eAAe,GAAG,aAAa,EAAE,CAAA;IACvC,IAAI,eAAe,EAAE,CAAC;QACpB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,4BAA4B,CAAC,CAAC,CAAA;QAChD,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,kBAAkB,EAAE,EAAE,CAAC,CAAC,CAAA;IACnD,CAAC;IAED,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,aAAa,UAAU,EAAE,CAAC,CAAC,CAAA;IAC3C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAA;IAClC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAA;IACvC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,mCAAmC,CAAC,CAAA;IAChD,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,iDAAiD,CAAC,CAAC,CAAA;IACpE,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,6DAA6D,CAAC,CAAC,CAAA;IAChF,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,8CAA8C,CAAC,CAAC,CAAA;IACjE,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,2CAA2C,CAAC,CAAC,CAAA;IAC7D,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;AACjB,CAAC;AAED,8BAA8B;AAC9B,SAAS,SAAS;IAChB,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC,CAAA;IAChD,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC,CAAA;IAC/C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IAEf,MAAM,UAAU,GAAG,mBAAmB,EAAE,CAAA;IAExC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC;QAC/B,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,iCAAiC,CAAC,CAAC,CAAA;QACtD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAA;QACtC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC;IAED,MAAM,MAAM,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAA;IAC3C,MAAM,UAAU,GAAG,MAAM,CAAC,UAAiD,CAAA;IAE3E,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;QACtC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,6BAA6B,CAAC,CAAC,CAAA;QAClD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAA;QACtC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QACf,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC;IAED,gBAAgB;IAChB,OAAO,UAAU,CAAC,MAAM,CAAA;IAExB,+BAA+B;IAC/B,IAAI,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACzC,OAAO,MAAM,CAAC,UAAU,CAAA;IAC1B,CAAC;IAED,iBAAiB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAA;IAErC,4BAA4B;IAC5B,eAAe,EAAE,CAAA;IAEjB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAA;IAC5C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,aAAa,UAAU,EAAE,CAAC,CAAC,CAAA;IAC3C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,yCAAyC,CAAC,CAAA;IACtD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAA;IACpC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAC,CAAA;IACxD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;AACjB,CAAC;AAED,YAAY;AACZ,SAAS,QAAQ;IACf,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAA;IACpC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAA;IACnC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,+DAA+D,CAAC,CAAA;IAC5E,OAAO,CAAC,GAAG,CAAC,4DAA4D,CAAC,CAAA;IACzE,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAA;IAChC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,mCAAmC,CAAC,EAAE,CAAC,CAAA;IAC7D,OAAO,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAA;IAC9C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,qCAAqC,CAAC,EAAE,CAAC,CAAA;IAC/D,OAAO,CAAC,GAAG,CAAC,sCAAsC,CAAC,CAAA;IACnD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAA;IACxC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAA;IACvC,OAAO,CAAC,GAAG,CAAC,sCAAsC,CAAC,CAAA;IACnD,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC,CAAA;IAC1D,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IACf,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAC,CAAA;IACvD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;AACjB,CAAC;AAED,uBAAuB;AACvB,SAAgB,MAAM;IACpB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAClC,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAA;IAEtC,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,SAAS;YACZ,OAAO,EAAE,CAAA;YACT,OAAO,IAAI,CAAA;QACb,KAAK,WAAW,CAAC;QACjB,KAAK,QAAQ;YACX,SAAS,EAAE,CAAA;YACX,OAAO,IAAI,CAAA;QACb,KAAK,MAAM,CAAC;QACZ,KAAK,QAAQ,CAAC;QACd,KAAK,IAAI;YACP,QAAQ,EAAE,CAAA;YACV,OAAO,IAAI,CAAA;QACb;YACE,uCAAuC;YACvC,OAAO,KAAK,CAAA;IAChB,CAAC;AACH,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@efectoapp/mcp-server",
3
- "version": "0.1.26",
3
+ "version": "0.1.27",
4
4
  "description": "MCP server for Efecto - create stunning visual designs with ASCII effects, glitch art, and more from your CLI",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -9,6 +9,7 @@
9
9
  },
10
10
  "files": [
11
11
  "dist",
12
+ "skills",
12
13
  "README.md"
13
14
  ],
14
15
  "scripts": {
package/skills/SKILL.md ADDED
@@ -0,0 +1,381 @@
1
+ # Efecto — Create Visual Poster Designs
2
+
3
+ Efecto is a real-time visual effects application that renders posters with ASCII art, dither, halftone, glitch, and artistic effects. This skill teaches the design workflow, typography rules, font pairings, effect combos, and layout patterns for creating professional-looking posters using the Efecto MCP server tools.
4
+
5
+ **Prerequisite**: The `efecto` MCP server must be configured. Tools are prefixed with `mcp__efecto__` (e.g., `mcp__efecto__create_poster`).
6
+
7
+ ---
8
+
9
+ ## Design Workflow
10
+
11
+ Follow these 7 steps in order for every poster:
12
+
13
+ ### Step 1: Create the Poster
14
+ Pick the aspect ratio for the use case:
15
+ - `9:16` — Instagram Stories, TikTok, mobile wallpaper (default)
16
+ - `16:9` — YouTube thumbnails, presentations, desktop wallpaper
17
+ - `1:1` — Instagram posts, profile pictures, album art
18
+ - `4:3` / `3:4` — Print, editorial, magazine covers
19
+ - `full` — Full viewport
20
+
21
+ ### Step 2: Set the Background
22
+ Choose one: solid color, gradient, image, or video.
23
+ - **Solid**: Simple dark (`#0a0a0a`) or light (`#f5f5f0`) backgrounds
24
+ - **Gradient**: Linear (set `gradientAngle`) or radial (set `gradientCenterX/Y`). Use `gradientStops` for multi-color gradients
25
+ - **Image**: Use `search_images` first to find stock photos, then pass the URL
26
+ - **Video**: Use `list_sample_videos` or `search_gifs` for animated backgrounds. Video backgrounds give effects (especially ASCII and dither) much richer source material than solid colors or gradients
27
+
28
+ ### Step 3: Add Text with Typography Hierarchy
29
+ Always use `add_group` for multi-text layouts (headline + subheadline, title + date, etc.). Groups handle positioning via flexbox — never set child x/y positions inside a group.
30
+
31
+ ### Step 4: Add Visual Elements
32
+ Shapes (rectangle, ellipse, polygon, star, line), images, or videos as decorative elements.
33
+
34
+ ### Step 5: Apply the Main Effect
35
+ One effect per poster. Choose based on mood (see Effect Selection Guide below).
36
+
37
+ ### Step 6: Add Post-Processing (WebGPU effects only)
38
+ Stack enhancements like bloom, grain, vignette, scanlines. **Critical**: post-processes do NOT work with dither effects — use dither's built-in `paletteId`/`bloomEnabled` params instead.
39
+
40
+ ### Step 7: Preview and Share
41
+ - `render_image` — Render to see the result visually. Always render to check your work.
42
+ - `generate_url` — Get a shareable URL
43
+
44
+ ### Quick Start — Minimal 4-Call Poster
45
+
46
+ ```
47
+ 1. create_poster → aspectRatio: "9:16"
48
+ 2. set_background → type: "gradient", gradientStyle: "linear", gradientStartColor: "#0a0a0a", gradientEndColor: "#1a1a3e", gradientAngle: 160
49
+ 3. add_group → children: [{type: "text", content: "HELLO", fontSize: 120, fontWeight: "900", color: "#ffffff"}, {type: "text", content: "WORLD", fontSize: 32, fontWeight: "400", color: "#888888"}], y: 50
50
+ 4. apply_effect → effectId: "ascii-standard", cellSize: 8, color: true
51
+ ```
52
+
53
+ ---
54
+
55
+ ## Typography System
56
+
57
+ ### Size Guidelines
58
+ | Role | Size (px) | Weight | Use case |
59
+ |------|-----------|--------|----------|
60
+ | Hero headline | 96–140 | 700–900 | Single word or short phrase |
61
+ | Headline | 64–96 | 700–900 | Main title, 2-4 words |
62
+ | Subheadline | 28–48 | 400–600 | Supporting text |
63
+ | Body | 16–24 | 300–400 | Descriptions, paragraphs |
64
+ | Label / Caption | 12–16 | 500–700 | Dates, categories, credits |
65
+
66
+ ### Auto-Fit Behavior
67
+ The MCP server automatically shrinks font size when the longest word in the content exceeds the frame width. This prevents mid-word text wrapping. You can trust that large font sizes will fit — the system adjusts down as needed.
68
+
69
+ ### Line Height
70
+ - **Tight headlines**: `0.9` to `1.0` — for large display text where lines should stack closely
71
+ - **Normal text**: `1.2` (default) — balanced readability
72
+ - **Body text**: `1.3` to `1.5` — comfortable reading for longer text
73
+
74
+ ### Letter Spacing
75
+ - **Large headlines (80px+)**: `-1` to `-3` — tighten for visual density
76
+ - **Normal text**: `0` (default)
77
+ - **Uppercase labels**: `2` to `6` — spread for elegance (pair with `textTransform: "uppercase"`)
78
+
79
+ ### Text in Groups
80
+ Always use `add_group` for multi-text layouts. The group handles all positioning:
81
+ - `layoutMode: "column"` stacks text vertically (most common)
82
+ - `layoutMode: "row"` places text side-by-side
83
+ - `gap: 2` (2% of canvas) for tight spacing, `4` for medium, `6` for generous
84
+ - Children inherit alignment from the group — don't set child x/y
85
+
86
+ ---
87
+
88
+ ## Font Pairing Guide
89
+
90
+ Use `fontFamily` values exactly as shown. All fonts below are available in Efecto.
91
+
92
+ ### 1. Modern / Clean — Space Grotesk + DM Sans
93
+ ```
94
+ Headline: fontFamily: "Space Grotesk" fontSize: 96 fontWeight: "700"
95
+ Body: fontFamily: "DM Sans" fontSize: 24 fontWeight: "400"
96
+ ```
97
+ Geometric, techy, contemporary. Great for SaaS, tech events, product launches.
98
+
99
+ ### 2. Editorial / Luxury — Playfair Display + DM Sans
100
+ ```
101
+ Headline: fontFamily: "Playfair Display" fontSize: 80 fontWeight: "900"
102
+ Body: fontFamily: "DM Sans" fontSize: 20 fontWeight: "300"
103
+ ```
104
+ Elegant contrast between serif display and clean sans. Magazines, fashion, luxury brands.
105
+
106
+ ### 3. Retro / Gaming — Bungee + Space Mono
107
+ ```
108
+ Headline: fontFamily: "Bungee" fontSize: 72 fontWeight: "400"
109
+ Body: fontFamily: "Space Mono" fontSize: 18 fontWeight: "400"
110
+ ```
111
+ Blocky, arcade-inspired. Retro gaming, pixel art, 8-bit aesthetics. Pair with dither + gameboy palette.
112
+
113
+ ### 4. Bold / Event — Bebas Neue + Inter
114
+ ```
115
+ Headline: fontFamily: "Bebas Neue" fontSize: 120 fontWeight: "400"
116
+ Body: fontFamily: "Inter" fontSize: 20 fontWeight: "400"
117
+ ```
118
+ Tall condensed headlines with maximum impact. Events, concerts, sports, announcements.
119
+
120
+ ### 5. Handwritten / Creative — Permanent Marker + Work Sans
121
+ ```
122
+ Headline: fontFamily: "Permanent Marker" fontSize: 80 fontWeight: "400"
123
+ Body: fontFamily: "Work Sans" fontSize: 20 fontWeight: "400"
124
+ ```
125
+ Informal, energetic, personal. Art shows, music, street culture.
126
+
127
+ ### 6. Ultra Bold / Impact — Anton + Outfit
128
+ ```
129
+ Headline: fontFamily: "Anton" fontSize: 110 fontWeight: "400"
130
+ Body: fontFamily: "Outfit" fontSize: 22 fontWeight: "300"
131
+ ```
132
+ Massive condensed headlines that command attention. Sales, promos, bold statements.
133
+
134
+ ### 7. Monospace / Hacker — JetBrains Mono + IBM Plex Mono
135
+ ```
136
+ Headline: fontFamily: "JetBrains Mono" fontSize: 56 fontWeight: "700"
137
+ Body: fontFamily: "IBM Plex Mono" fontSize: 16 fontWeight: "400"
138
+ ```
139
+ Technical, code-inspired. Developer events, hacker culture, terminal aesthetics. Pair with ASCII effects.
140
+
141
+ ---
142
+
143
+ ## Color & Background Strategy
144
+
145
+ ### Dark Backgrounds (most common for effects)
146
+ - Pure dark: `#0a0a0a` or `#000000` — maximum contrast for effects
147
+ - Warm dark: `#1a0f0a` — subtle warmth
148
+ - Cool dark: `#0a0a1a` — cinematic depth
149
+ - Use light text (`#ffffff`, `#f0f0f0`) on dark backgrounds
150
+
151
+ ### Light Backgrounds
152
+ - Off-white: `#f5f5f0` or `#fafafa` — softer than pure white
153
+ - Warm cream: `#f5f0e8` — editorial, vintage
154
+ - Use dark text (`#1a1a1a`, `#0a0a0a`) on light backgrounds
155
+
156
+ ### Gradient Tips
157
+ - **Linear**: `gradientAngle: 160` for top-left to bottom-right diagonal (most versatile)
158
+ - **Radial**: `gradientCenterX: 0.5, gradientCenterY: 0.3` for a vignette from upper-center
159
+ - **Multi-stop**: Use `gradientStops` for rich color transitions (3-5 stops)
160
+
161
+ ### Image Backgrounds
162
+ Use `search_images` with filters for best results:
163
+ - Match `orientation` to aspect ratio: "vertical" for 9:16, "horizontal" for 16:9, "square" for 1:1
164
+ - Use `luminance: "dark"` for dramatic designs with light text overlay
165
+ - Use `type: "photo"` for photographs, `"illustration"` for artwork
166
+
167
+ ---
168
+
169
+ ## Effect Selection Guide
170
+
171
+ Choose effects based on the desired mood:
172
+
173
+ | Mood | Effect | Key Settings |
174
+ |------|--------|-------------|
175
+ | **Retro / Vintage** | `dither-atkinson` | `paletteId: "gameboy"`, `pixelation: 4` |
176
+ | **Cyberpunk / Neon** | `glitch-digital` | `intensity: 0.6`, `speed: 1.2` |
177
+ | **Technical / Hacker** | `ascii-standard` | `cellSize: 8`, `color: true` |
178
+ | **Terminal / Matrix** | `ascii-matrix` | `cellSize: 6`, `color: true` |
179
+ | **Print / Editorial** | `halftone-mono` | `dotSize: 0.3` |
180
+ | **Painterly** | `art-kuwahara` | (defaults work well) |
181
+ | **Sketch / Hand-drawn** | `art-crosshatch` | (defaults work well) |
182
+ | **Engraving / Currency** | `art-engraving` | (defaults work well) |
183
+ | **Stipple / Pointillist** | `art-stipple` | (defaults work well) |
184
+ | **VHS / Lo-fi** | `glitch-vhs` | `intensity: 0.5`, `speed: 0.8` |
185
+ | **Editorial / Risograph** | `dither-floyd-steinberg` | `paletteId: "ink"`, `pixelation: 3` |
186
+ | **Warm Retro** | `dither-floyd-steinberg` | `paletteId: "sunset-blvd"`, `pixelation: 3` |
187
+ | **Synthwave** | `dither-atkinson` | `paletteId: "synthwave"`, `bloomEnabled: true`, `bloomIntensity: 1.5` |
188
+ | **Clean / Minimal** | `none` | Use post-processes only |
189
+ | **Line Art** | `art-lineart` | (defaults work well) |
190
+
191
+ ### The Two Effect Pipelines (Critical!)
192
+
193
+ **Dither effects (WebGL)** — 9 dither-* effects + color-separation:
194
+ - Have BUILT-IN palette and bloom controls
195
+ - Set `paletteId`, `colors`, `bloomEnabled`, `bloomIntensity`, `bloomRadius` directly in `apply_effect`
196
+ - `add_postprocess` does NOT work with dither effects
197
+
198
+ **All other effects (WebGPU)** — ASCII, Glitch, Halftone, Art, Special:
199
+ - Use `add_postprocess` for palette, bloom, and all other enhancements
200
+ - Support unlimited stackable post-processes
201
+
202
+ ---
203
+
204
+ ## Post-Process Combos
205
+
206
+ Tested combinations that work well together. Only use with WebGPU effects (not dither).
207
+
208
+ | Combo Name | Post-Processes | Key Params |
209
+ |-----------|----------------|------------|
210
+ | **CRT Monitor** | scanlines + curvature + vignette + chromatic-aberration | `count: 400`, `curvature: 0.3`, `radius: 0.8`, `strength: 0.02` |
211
+ | **Cyberpunk Glow** | bloom + chromatic-aberration + scanlines | `intensity: 1.5, radius: 0.4, threshold: 0.2` / `strength: 0.03` / `count: 300` |
212
+ | **Film Grain** | grain + vignette + brightness-contrast | `size: 1.5, speed: 0.8` / `radius: 0.7` / `contrast: 1.1` |
213
+ | **Vaporwave** | palette + bloom + chromatic-aberration | `paletteId: "vaporwave"` / `intensity: 1.0` / `strength: 0.02` |
214
+ | **Terminal** | color-tint + scanlines + curvature | `palette: "green"` / `count: 500` / `curvature: 0.2` |
215
+ | **Noir** | brightness-contrast + grain + vignette | `contrast: 1.3, saturation: 0` / `size: 2.0` / `radius: 0.6` |
216
+ | **Dream / Soft** | bloom + wave + grain | `intensity: 2.0, radius: 0.6` / `amplitude: 0.05, frequency: 3` / `size: 1.0` |
217
+ | **Print Texture** | grain + dot-screen | `size: 1.5, speed: 0` / (defaults) |
218
+ | **Glitch Overlay** | rgb-glitch + jitter + noise | (defaults for all) |
219
+ | **Amber Terminal** | color-tint + scanlines + bloom | `palette: "amber"` / `count: 400` / `intensity: 0.8` |
220
+
221
+ ---
222
+
223
+ ## Layout Patterns
224
+
225
+ ### Page Layout — justifyContent Controls Vertical Position
226
+ Use `set_page_layout` to control where content sits on the canvas:
227
+ - `justifyContent: "center"` — vertically centered (default)
228
+ - `justifyContent: "end"` — pushes content to the bottom third (most popular for photo/video backgrounds — lets the image breathe above)
229
+ - `justifyContent: "start"` — anchors content to the top
230
+ - `justifyContent: "space-between"` — spreads content evenly (great for header + body + footer)
231
+
232
+ ### Centered Title Block (most common)
233
+ ```
234
+ add_group:
235
+ x: 50, y: 50, width: 80
236
+ layoutMode: "column", alignItems: "center", justifyContent: "center", gap: 3
237
+ children: [headline, subheadline]
238
+ ```
239
+
240
+ ### Bottom-Anchored Content (best for photo/video backgrounds)
241
+ ```
242
+ set_page_layout: justifyContent: "end"
243
+
244
+ add_group:
245
+ x: 50, y: 50, width: 80
246
+ layoutMode: "column", alignItems: "center", gap: 2
247
+ children: [title, subtitle, date]
248
+ ```
249
+ Note: With `justifyContent: "end"`, the group automatically flows to the bottom — no need to set `y: 82` manually.
250
+
251
+ ### Left-Aligned Editorial
252
+ ```
253
+ add_group:
254
+ x: 50, y: 75, width: 80
255
+ layoutMode: "column", alignItems: "start", gap: 2
256
+ children: [headline (textAlign: "left"), body (textAlign: "left")]
257
+ ```
258
+
259
+ ### Header + Body + Footer
260
+ ```
261
+ set_page_layout:
262
+ layoutMode: "column", justifyContent: "space-between", alignItems: "center", padding: 8
263
+
264
+ Then add_layer for header, main content group, and footer — they flow automatically.
265
+ ```
266
+
267
+ ### Two-Column Row
268
+ ```
269
+ add_group:
270
+ layoutMode: "row", gap: 4, alignItems: "center", justifyContent: "center"
271
+ children: [left text, right text]
272
+ ```
273
+
274
+ ---
275
+
276
+ ## Shapes & Decorative Elements
277
+
278
+ ### Line Separator
279
+ ```
280
+ add_layer: type: "line", startX: 20, startY: 50, endX: 80, endY: 50
281
+ strokeColor: "#ffffff", strokeWidth: 0.003, strokeOpacity: 0.5
282
+ ```
283
+
284
+ ### Decorative Circle
285
+ ```
286
+ add_layer: type: "ellipse", width: 30, height: 30, x: 50, y: 50
287
+ strokeColor: "#ffffff", strokeWidth: 0.005, fillOpacity: 0
288
+ ```
289
+
290
+ ### Background Rectangle (for text contrast)
291
+ ```
292
+ add_layer: type: "rectangle", width: 80, height: 20, x: 50, y: 80
293
+ fillColor: "#000000", fillOpacity: 0.6, cornerRadius: 0.02
294
+ ```
295
+
296
+ ---
297
+
298
+ ## Text Animations
299
+
300
+ Add character-level animations to text layers for dynamic posters. Set `animationType` on any text layer.
301
+
302
+ | Animation | Best For | Key Params |
303
+ |-----------|----------|------------|
304
+ | `wave` | Fluid, ocean-like motion | `animationFrequency: 3`, `animationAxis: "vertical"` |
305
+ | `typewriter` | Reveals, intros | `animationSpeed: 2`, `animationCursor: true` |
306
+ | `glitch` | Cyberpunk, hacker | `animationColorSplit: true`, `animationSliceChance: 0.3` |
307
+ | `neon` | Signs, nightlife | `animationGlowIntensity: 1.5`, `animationFlickerChance: 0.3` |
308
+ | `bounce` | Playful, fun | `animationHeight: 60`, `animationElasticity: 0.6` |
309
+ | `cascade` | Dramatic reveals | `animationFallHeight: 100`, `animationBounceOnLand: true` |
310
+ | `elastic` | Snappy entrances | `animationTension: 1.5`, `animationOvershoot: 1.0` |
311
+ | `shake` | Urgency, alerts | `animationIntensity: 20`, `animationIncludeRotation: true` |
312
+
313
+ Common settings for all animations:
314
+ - `animationSpeed: 1.0` (0.1 = very slow, 5.0 = very fast)
315
+ - `animationStaggerDelay: 150` (ms between characters, 0 = all at once)
316
+ - `animationStaggerMode: "sequential"` (or "random", "center-out", "edges-in")
317
+ - `animationLoop: true`
318
+
319
+ ---
320
+
321
+ ## Image & Video Integration
322
+
323
+ ### Stock Images
324
+ ```
325
+ 1. search_images: query: "cyberpunk city", orientation: "vertical", luminance: "dark"
326
+ 2. Use the returned URL in set_background (type: "image") or add_layer (type: "image")
327
+ ```
328
+
329
+ ### Sample Videos
330
+ ```
331
+ 1. list_sample_videos: category: "portrait"
332
+ 2. Use the returned URL in set_background (type: "video") or add_layer (type: "video")
333
+ ```
334
+
335
+ ### Animated GIFs
336
+ ```
337
+ 1. search_gifs: query: "abstract loop"
338
+ 2. Use the mp4Url (NOT gifUrl) for better performance
339
+ 3. set_background: type: "video", videoUrl: <mp4Url>
340
+ ```
341
+
342
+ For images/videos as layers, use `objectFit: "cover"` (fills frame, may crop) or `"contain"` (fits within frame, may letterbox).
343
+
344
+ ---
345
+
346
+ ## Rendering & Output
347
+
348
+ ### Render to Check Your Work
349
+ Always call `render_image` after building a poster to visually verify the design. The image is returned inline so you can see it.
350
+
351
+ ```
352
+ render_image: format: "png" # Preview only
353
+ render_image: format: "png", savePath: "~/Downloads/poster.png" # Save to disk
354
+ render_image: format: "jpeg", quality: 85 # Smaller file size
355
+ ```
356
+
357
+ ### Generate Shareable URL
358
+ ```
359
+ generate_url # Returns an efecto.app URL that opens the poster in a browser
360
+ ```
361
+
362
+ ### Dimensions
363
+ Output dimensions are calculated from the aspect ratio. For custom sizes:
364
+ ```
365
+ render_image: width: 1080, height: 1920 # Instagram Story size
366
+ render_image: width: 1920, height: 1080 # Full HD landscape
367
+ ```
368
+
369
+ ---
370
+
371
+ ## 37 Available Color Palettes (for dither effects)
372
+
373
+ Use these with `apply_effect` → `paletteId`:
374
+
375
+ **Classic**: noir, ink, terminal, amber-glow
376
+ **Retro Gaming**: gameboy, commodore, nes, cga
377
+ **Warm**: sunset-blvd, campfire, autumn-leaves, terracotta, golden-hour, rose-gold
378
+ **Cool**: deep-sea, arctic-night, moonlight, frozen, twilight
379
+ **Neon**: synthwave, vaporwave, cyberpunk, tokyo-night, arcade, retrowave, electric
380
+ **Earth**: forest, moss, desert, clay, ocean-floor
381
+ **Monochrome**: grayscale, sepia, blueprint, cyanotype, green-phosphor, amber-phosphor
package/skills/recipes.md ADDED
@@ -0,0 +1,490 @@
1
+ # Efecto Poster Recipes
2
+
3
+ Complete step-by-step recipes with exact tool calls. Each recipe creates a polished poster from scratch.
4
+
5
+ ---
6
+
7
+ ## Recipe 1: Cyberpunk Event Poster (9:16)
8
+
9
+ Video background with left-aligned futuristic typography, ASCII minimal effect with subtle cyberpunk post-processing. Content pushed to the bottom.
10
+
11
+ ### Tool Calls
12
+
13
+ **1. Create poster**
14
+ ```
15
+ create_poster:
16
+ aspectRatio: "9:16"
17
+ backgroundColor: "#0a0a14"
18
+ ```
19
+
20
+ **2. Set page layout (content at bottom)**
21
+ ```
22
+ set_page_layout:
23
+ justifyContent: "end"
24
+ ```
25
+
26
+ **3. Set video background**
27
+ ```
28
+ set_background:
29
+ type: "video"
30
+ videoUrl: "/assets/manga.mp4"
31
+ ```
32
+
33
+ **4. Add decorative line above text**
34
+ ```
35
+ add_layer:
36
+ type: "line"
37
+ startX: 25, startY: 60, endX: 75, endY: 60
38
+ strokeColor: "#4cc9f0", strokeWidth: 0.002, strokeOpacity: 0.4
39
+ ```
40
+
41
+ **5. Add text group (left-aligned)**
42
+ ```
43
+ add_group:
44
+ x: 50, y: 50, width: 85
45
+ layoutMode: "column"
46
+ alignItems: "center"
47
+ justifyContent: "center"
48
+ gap: 1
49
+ children: [
50
+ {
51
+ type: "text",
52
+ content: "NEON\nDREAMS",
53
+ fontFamily: "Anton",
54
+ fontSize: 120,
55
+ fontWeight: "400",
56
+ color: "#f72585",
57
+ textAlign: "left",
58
+ lineHeight: 0.95,
59
+ letterSpacing: -2
60
+ },
61
+ {
62
+ type: "text",
63
+ content: "A NIGHT OF ELECTRONIC MUSIC",
64
+ fontFamily: "Outfit",
65
+ fontSize: 16,
66
+ fontWeight: "300",
67
+ color: "#4cc9f0",
68
+ textAlign: "left",
69
+ letterSpacing: 6,
70
+ textTransform: "uppercase"
71
+ },
72
+ {
73
+ type: "text",
74
+ content: "MARCH 15, 2026 / WAREHOUSE 9 / 10PM",
75
+ fontFamily: "Outfit",
76
+ fontSize: 12,
77
+ fontWeight: "400",
78
+ color: "#888888",
79
+ textAlign: "left",
80
+ letterSpacing: 3
81
+ }
82
+ ]
83
+ ```
84
+
85
+ **6. Apply ASCII minimal effect**
86
+ ```
87
+ apply_effect:
88
+ effectId: "ascii-minimal"
89
+ cellSize: 6
90
+ color: true
91
+ ```
92
+
93
+ **7. Add post-processing stack (subtle cyberpunk)**
94
+ ```
95
+ add_postprocess: type: "bloom", intensity: 1.8, radius: 0.5, threshold: 0.15
96
+ add_postprocess: type: "chromatic-aberration", strength: 0.005, angle: 45
97
+ add_postprocess: type: "scanlines", count: 350, intensity: 0.3
98
+ ```
99
+
100
+ **8. Render**
101
+ ```
102
+ render_image: format: "png"
103
+ ```
104
+
105
+ **Design notes**: Video background (manga.mp4) gives the ASCII effect dynamic source material. Left-aligned text feels more editorial than centered. The `ascii-minimal` with smaller cellSize (6) creates finer detail than `ascii-standard`. Chromatic aberration at 0.005 is very subtle — just enough color fringing without overwhelming the text. Page `justifyContent: "end"` pushes everything to the bottom third.
106
+
107
+ ---
108
+
109
+ ## Recipe 2: Editorial Magazine Cover (3:4)
110
+
111
+ Stock photo background with dither ink effect for a risograph/printmaking aesthetic. Refined serif typography with tight spacing.
112
+
113
+ ### Tool Calls
114
+
115
+ **1. Create poster**
116
+ ```
117
+ create_poster:
118
+ aspectRatio: "3:4"
119
+ backgroundColor: "#0a0a0a"
120
+ ```
121
+
122
+ **2. Set page layout (content at bottom, tight spacing)**
123
+ ```
124
+ set_page_layout:
125
+ justifyContent: "end"
126
+ gap: 1
127
+ padding: 6
128
+ ```
129
+
130
+ **3. Search for a dark portrait image**
131
+ ```
132
+ search_images:
133
+ query: "portrait fashion"
134
+ orientation: "vertical"
135
+ luminance: "dark"
136
+ type: "photo"
137
+ ```
138
+
139
+ **4. Set image background**
140
+ ```
141
+ set_background:
142
+ type: "image"
143
+ imageUrl: <use URL from search results>
144
+ objectFit: "cover"
145
+ ```
146
+
147
+ **5. Add headline group**
148
+ ```
149
+ add_group:
150
+ x: 50, y: 50, width: 80
151
+ layoutMode: "column"
152
+ alignItems: "center"
153
+ justifyContent: "center"
154
+ gap: 0.1
155
+ children: [
156
+ {
157
+ type: "text",
158
+ content: "The Art of\nSilence",
159
+ fontFamily: "Playfair Display",
160
+ fontSize: 49,
161
+ fontWeight: "800",
162
+ color: "#ffffff",
163
+ textAlign: "left",
164
+ lineHeight: 1.0,
165
+ letterSpacing: -1
166
+ },
167
+ {
168
+ type: "text",
169
+ content: "An intimate portrait series exploring solitude in urban spaces",
170
+ fontFamily: "DM Sans",
171
+ fontSize: 16,
172
+ fontWeight: "300",
173
+ color: "#cccccc",
174
+ textAlign: "left",
175
+ lineHeight: 1.4
176
+ }
177
+ ]
178
+ ```
179
+
180
+ **6. Add magazine title at bottom**
181
+ ```
182
+ add_layer:
183
+ type: "text"
184
+ content: "APERTURE"
185
+ fontFamily: "DM Sans"
186
+ fontSize: 14
187
+ fontWeight: "500"
188
+ color: "#ffffff"
189
+ letterSpacing: 8
190
+ textTransform: "uppercase"
191
+ textAlign: "center"
192
+ x: 50, y: 90
193
+ ```
194
+
195
+ **7. Apply dither effect with ink palette**
196
+ ```
197
+ apply_effect:
198
+ effectId: "dither-floyd-steinberg"
199
+ pixelation: 3
200
+ paletteId: "ink"
201
+ ```
202
+
203
+ Note: No `add_postprocess` calls — dither effects use the built-in palette. Post-processes are ignored for dither.
204
+
205
+ **8. Render**
206
+ ```
207
+ render_image: format: "png"
208
+ ```
209
+
210
+ **Design notes**: The `dither-floyd-steinberg` with `ink` palette transforms the photo into a high-contrast printmaking aesthetic — dark navy (#1a1a2e) and warm cream (#f5f5dc). Smaller headline (49px) feels more refined than oversized text. The APERTURE label at the bottom (not top) creates a footer stamp effect. Tight gap (0.1) and reduced padding (6%) pack the layout.
211
+
212
+ ---
213
+
214
+ ## Recipe 3: Retro Game Art (1:1)
215
+
216
+ Video background with Game Boy dither effect, pixel-style typography, centered layout.
217
+
218
+ ### Tool Calls
219
+
220
+ **1. Create poster**
221
+ ```
222
+ create_poster:
223
+ aspectRatio: "1:1"
224
+ backgroundColor: "#0f380f"
225
+ ```
226
+
227
+ **2. Set page layout (vertically centered)**
228
+ ```
229
+ set_page_layout:
230
+ justifyContent: "center"
231
+ ```
232
+
233
+ **3. Set video background**
234
+ ```
235
+ set_background:
236
+ type: "video"
237
+ videoUrl: "/assets/motorcycle.mp4"
238
+ ```
239
+
240
+ **4. Add centered text group**
241
+ ```
242
+ add_group:
243
+ x: 50, y: 50, width: 80
244
+ layoutMode: "column"
245
+ alignItems: "center"
246
+ justifyContent: "center"
247
+ gap: 4
248
+ children: [
249
+ {
250
+ type: "text",
251
+ content: "GAME\nOVER",
252
+ fontFamily: "Bungee",
253
+ fontSize: 96,
254
+ fontWeight: "400",
255
+ color: "#9bbc0f",
256
+ textAlign: "center",
257
+ lineHeight: 1.0
258
+ },
259
+ {
260
+ type: "text",
261
+ content: "INSERT COIN TO CONTINUE",
262
+ fontFamily: "Space Mono",
263
+ fontSize: 16,
264
+ fontWeight: "400",
265
+ color: "#8bac0f",
266
+ textAlign: "center",
267
+ letterSpacing: 3
268
+ },
269
+ {
270
+ type: "text",
271
+ content: "SCORE: 999,999",
272
+ fontFamily: "Space Mono",
273
+ fontSize: 14,
274
+ fontWeight: "700",
275
+ color: "#306230",
276
+ textAlign: "center"
277
+ }
278
+ ]
279
+ ```
280
+
281
+ **5. Apply dither effect with gameboy palette**
282
+ ```
283
+ apply_effect:
284
+ effectId: "dither-atkinson"
285
+ pixelation: 5
286
+ paletteId: "gameboy"
287
+ bloomEnabled: true
288
+ bloomIntensity: 0.8
289
+ bloomRadius: 30
290
+ ```
291
+
292
+ Note: No `add_postprocess` calls — dither effects use built-in palette and bloom. Post-processes are ignored for dither.
293
+
294
+ **6. Render**
295
+ ```
296
+ render_image: format: "png"
297
+ ```
298
+
299
+ **Design notes**: Using a video background (motorcycle.mp4) instead of a solid color gives the dither effect rich source material to work with — the Atkinson dithering with Game Boy palette transforms the video into a dynamic retro scene. The text overlays in matching green tones blend naturally. `justifyContent: "center"` keeps everything vertically balanced.
300
+
301
+ ---
302
+
303
+ ## Recipe 4: Tech Conference Card (16:9)
304
+
305
+ Navy gradient with a 3D model accent, centered typography, CMYK halftone effect for a print-inspired look.
306
+
307
+ ### Tool Calls
308
+
309
+ **1. Create poster**
310
+ ```
311
+ create_poster:
312
+ aspectRatio: "16:9"
313
+ backgroundColor: "#0f172a"
314
+ ```
315
+
316
+ **2. Set page layout (content at bottom)**
317
+ ```
318
+ set_page_layout:
319
+ justifyContent: "end"
320
+ ```
321
+
322
+ **3. Set gradient background**
323
+ ```
324
+ set_background:
325
+ type: "gradient"
326
+ gradientStyle: "linear"
327
+ gradientAngle: 135
328
+ gradientStartColor: "#0f172a"
329
+ gradientEndColor: "#1e293b"
330
+ ```
331
+
332
+ **4. Add 3D model accent**
333
+ ```
334
+ add_layer:
335
+ type: "3d"
336
+ name: "Duck"
337
+ mediaUrl: "https://threejs.org/examples/models/gltf/duck.glb"
338
+ material: "chrome"
339
+ color: "#4729db"
340
+ width: 50
341
+ height: 50
342
+ ```
343
+
344
+ **5. Add centered text group**
345
+ ```
346
+ add_group:
347
+ x: 50, y: 50, width: 80
348
+ layoutMode: "column"
349
+ alignItems: "center"
350
+ justifyContent: "center"
351
+ gap: 2
352
+ children: [
353
+ {
354
+ type: "text",
355
+ content: "DEV//CONF",
356
+ fontFamily: "Space Grotesk",
357
+ fontSize: 72,
358
+ fontWeight: "700",
359
+ color: "#ffffff",
360
+ textAlign: "center",
361
+ letterSpacing: -2
362
+ },
363
+ {
364
+ type: "text",
365
+ content: "The Future of Web Development",
366
+ fontFamily: "DM Sans",
367
+ fontSize: 24,
368
+ fontWeight: "400",
369
+ color: "#aaaaaa",
370
+ textAlign: "center"
371
+ },
372
+ {
373
+ type: "text",
374
+ content: "JUNE 12-14, 2026 / SAN FRANCISCO",
375
+ fontFamily: "DM Sans",
376
+ fontSize: 14,
377
+ fontWeight: "500",
378
+ color: "#666666",
379
+ textAlign: "center",
380
+ letterSpacing: 3
381
+ }
382
+ ]
383
+ ```
384
+
385
+ **6. Apply CMYK halftone effect with post-processing**
386
+ ```
387
+ apply_effect:
388
+ effectId: "halftone-cmyk"
389
+ dotSize: 0.05
390
+
391
+ add_postprocess: type: "bloom", intensity: 0.8, radius: 0.3, threshold: 0.3
392
+ add_postprocess: type: "vignette", radius: 0.9
393
+ ```
394
+
395
+ **7. Render**
396
+ ```
397
+ render_image: format: "png"
398
+ ```
399
+
400
+ **Design notes**: The navy gradient (#0f172a → #1e293b) creates a deeper, richer background than generic dark blue. The 3D duck model with chrome material and purple tint (#4729db) adds a playful tech mascot feel. CMYK halftone gives the print-quality dot pattern with color separation — more visually interesting than mono halftone. Centered layout is cleaner than the two-column approach for a card format. `justifyContent: "end"` pushes content to the lower portion, leaving the 3D model prominent.
401
+
402
+ ---
403
+
404
+ ## Recipe 5: Artistic Photo Poster (9:16)
405
+
406
+ Stock photo with Kuwahara painterly effect, bold centered text overlay, film-like post-processing. Content anchored to bottom.
407
+
408
+ ### Tool Calls
409
+
410
+ **1. Create poster**
411
+ ```
412
+ create_poster:
413
+ aspectRatio: "9:16"
414
+ backgroundColor: "#0a0a0a"
415
+ ```
416
+
417
+ **2. Set page layout (content at bottom)**
418
+ ```
419
+ set_page_layout:
420
+ justifyContent: "end"
421
+ ```
422
+
423
+ **3. Search for a nature image**
424
+ ```
425
+ search_images:
426
+ query: "mountain landscape dramatic"
427
+ orientation: "vertical"
428
+ luminance: "neutral"
429
+ type: "photo"
430
+ ```
431
+
432
+ **4. Set image background**
433
+ ```
434
+ set_background:
435
+ type: "image"
436
+ imageUrl: <use URL from search results>
437
+ objectFit: "cover"
438
+ ```
439
+
440
+ **5. Add centered text group**
441
+ ```
442
+ add_group:
443
+ x: 50, y: 50, width: 85
444
+ layoutMode: "column"
445
+ alignItems: "center"
446
+ justifyContent: "center"
447
+ gap: 3
448
+ children: [
449
+ {
450
+ type: "text",
451
+ content: "WILD",
452
+ fontFamily: "Bebas Neue",
453
+ fontSize: 140,
454
+ fontWeight: "400",
455
+ color: "#ffffff",
456
+ textAlign: "center",
457
+ letterSpacing: 8
458
+ },
459
+ {
460
+ type: "text",
461
+ content: "nature / adventure / freedom",
462
+ fontFamily: "DM Sans",
463
+ fontSize: 18,
464
+ fontWeight: "300",
465
+ color: "#f0f0f0",
466
+ textAlign: "center",
467
+ letterSpacing: 4
468
+ }
469
+ ]
470
+ ```
471
+
472
+ **6. Apply Kuwahara art effect**
473
+ ```
474
+ apply_effect:
475
+ effectId: "art-kuwahara"
476
+ ```
477
+
478
+ **7. Add film-like post-processing**
479
+ ```
480
+ add_postprocess: type: "vignette", radius: 0.6
481
+ add_postprocess: type: "grain", size: 2.0, speed: 0.3, colorAmount: 0.2
482
+ add_postprocess: type: "brightness-contrast", contrast: 1.15, saturation: 0.85
483
+ ```
484
+
485
+ **8. Render**
486
+ ```
487
+ render_image: format: "png"
488
+ ```
489
+
490
+ **Design notes**: Kuwahara transforms the photo into a painterly artwork while keeping the composition intact. The massive Bebas Neue headline with wide letter spacing floats over the image. Subtitle in near-white (#f0f0f0) has better contrast than dimmer grays. `justifyContent: "end"` anchors text to the lower third, letting the photo breathe above. Desaturated colors + grain gives it a fine-art print quality.