Conversation
Add workspace skill that generates 10+ genuinely distinct HTML/Tailwind brand page variations. Includes 12 named direction archetypes with anti-patterns, font pairing guide, manifest format, and conversation-to-edit loop instructions. Companion to treasure-data/tdx brand gallery MCP app and browse_explorations tool. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Adds a new Treasure Studio skill (“brand-explore”) to generate multiple distinct HTML/Tailwind brand landing page directions from a single brief, and wires it into the marketplace + trigger tests.
Changes:
- Add new
studio-skills/brand-exploreskill definition and workflow (session folder, direction archetypes, manifest + gallery generation). - Register the skill under the
studio-skillsplugin collection in.claude-plugin/marketplace.json. - Add a trigger test prompt expected to route to
brand-explore.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| tests/trigger-tests.yml | Adds a new trigger test mapping a “brand directions” prompt to brand-explore. |
| studio-skills/brand-explore/SKILL.md | Introduces the full skill spec: entry points, generation workflow, archetypes, templates, and edit loop. |
| .claude-plugin/marketplace.json | Registers ./studio-skills/brand-explore in the studio-skills plugin and updates its description. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ``` | ||
| {workspace}/attachments/brand-explore/{YYYY-MM-DD}-{brand-slug}/ | ||
| ``` | ||
|
|
||
| Example: `attachments/brand-explore/2026-03-22-acme/` |
There was a problem hiding this comment.
{workspace} is used as the base path for the session folder, but other skills in this repo use {cwd} as the working-directory placeholder (e.g., analysis-skills/seo-analysis). To keep these instructions executable/consistent, align on the same placeholder (or define what {workspace} refers to and use it consistently in both the template and the example path).
| - **Layout**: Dark background throughout, dramatic contrast, spot lighting effects via CSS | ||
| - **Visual weight**: dense | ||
| - **Typography**: Light text on dark, high contrast, cinematic proportions | ||
| - **Anti-patterns**: NO white/light backgrounds. NO pastel colors. Background must be dark (#0a-#1a range). |
There was a problem hiding this comment.
The dark background constraint is ambiguous as written (“#0a-#1a range”). Please specify a valid hex range explicitly (e.g., #0a0a0a–#1a1a1a) so the instruction can be followed without guessing and avoids invalid color values.
| - **Anti-patterns**: NO white/light backgrounds. NO pastel colors. Background must be dark (#0a-#1a range). | |
| - **Anti-patterns**: NO white/light backgrounds. NO pastel colors. Background must be dark (hex range approximately #0a0a0a–#1a1a1a). |
| ```html | ||
| <!-- | ||
| @brand-explore | ||
| direction: {Direction Name} | ||
| archetype: {archetype-key} | ||
| mood: {comma-separated mood words} | ||
| visual-weight: {minimal|balanced|dense} | ||
| round: {round number} | ||
| rationale: {1-2 sentence AI explanation of why this direction and what audience it suits} | ||
| --> |
There was a problem hiding this comment.
The required metadata marker is inconsistent: the template shows a multi-line comment block with an @brand-explore line, but the checklist requires the literal string <!--@brand-explore-->. If anything parses this marker, this inconsistency can cause missed detection; please standardize on one exact format and reference that consistently throughout the doc.
| - editorial-grid: Lora + Inter | ||
| - split-screen: Montserrat + Hind | ||
| - minimal-typographic: Bebas Neue + Space Mono | ||
| - card-mosaic: DM Sans + DM Sans |
There was a problem hiding this comment.
The “Font Pairing Guide (force diversity)” lists card-mosaic: DM Sans + DM Sans, which undermines the stated goal of font pairing/typographic diversity. Either pick distinct heading/body fonts for this archetype or clarify that using the same font for both is intentional and still considered compliant.
| - card-mosaic: DM Sans + DM Sans | |
| - card-mosaic: DM Sans + Work Sans |
|
|
||
| ### Mark favorite | ||
| User: "I like direction 3" | ||
| → Update manifest.json to set `favorite: true` on that direction. Regenerate index.html. |
There was a problem hiding this comment.
The doc instructs setting favorite: true in manifest.json, but the manifest format example doesn’t include a favorite field for direction entries. Please update the manifest schema/example to include this field (or clarify it’s optional/ignored) so implementers know the canonical format.
| → Update manifest.json to set `favorite: true` on that direction. Regenerate index.html. | |
| → If your `manifest.json` format supports it, update the corresponding direction entry to set `favorite: true` (an optional boolean field) for that direction. Regenerate `index.html`. |
Summary
studio-skills/brand-exploreskill for generating 10+ genuinely distinct HTML/Tailwind brand page variations from a single briefSkill capabilities
Companion PR
treasure-data/tdx PR (brand gallery MCP app + browse_explorations tool + creative SDK types)
Test plan
🤖 Generated with Claude Code