Available1One-Page Site Builder
Build your first responsive product page.
Codex +2Colorway Catalogv1.0.0
Present a collection through coordinated color families.
Made with this SkillPresent a collection through coordinated color families.
Open full exampleThree useful starting points
What you get
Present a collection through coordinated color families.What you can make
- Present a collection through coordinated color families.
- Named swatches; SKU and finish; RGB/hex conversion; measured black/white text contrast.
- Open the offline editor, choose an example and edit labeled fields. Export SVG, 2560px PNG, CSV, analysis JSON and a portable editable HTML. Render a silent 12-second MP4 locally with the included script.
Explore delivered files4 groups
Editable HTML + project JSONSVG / PNG resultCSV + calculated analysisSilent MP4 + integrity manifest
Good fit
Creators and teams preparing a reviewed, reusable result.
Know the limits
Screen RGB reference; not Pantone matching, material photography or print proof. No-install browser editor. Optional MP4 rendering requires Node.js 24.15+, FFmpeg and pinned npm dependencies. All examples are fictional; review your sources before publishing. No API key or paid generation service required.
About this skill
Present a collection through coordinated color families. Named swatches; SKU and finish; RGB/hex conversion; measured black/white text contrast.
Open the offline editor, choose an example and edit labeled fields. Export SVG, 2560px PNG, CSV, analysis JSON and a portable editable HTML. Render a silent 12-second MP4 locally with the included script.
Read the full workflow
Screen RGB reference; not Pantone matching, material photography or print proof.
No-install browser editor. Optional MP4 rendering requires Node.js 24.15+, FFmpeg and pinned npm dependencies. All examples are fictional; review your sources before publishing. No API key or paid generation service required.
FROM PACKAGE TO FIRST RESULT
Your first result, with your agent
Choose a starting point, add the content you already have, then let your agent check the setup and create one result.
Purchase access is required. Unzip the package into the project folder below, or let your agent follow the installation guide. .agents/skills/colorway-catalog
Your project name, audience and the content or images you already have are enough to start. Your agent will ask for anything essential that is missing.
3. Let your agent guide the first result
Package location: .agents/skills/colorway-catalog
Use colorway-catalog. Read SKILL.md. Ask for my reviewed data, audience and intended result. Start with the closest included example, replace fictional content, validate every input and calculation, show a preview, then deliver editable HTML, project JSON, SVG/PNG, CSV and a silent result-only MP4. Do not invent evidence. Start with examples/default.json.
Use a new output folder and preserve existing files. Inspect the actual deliverables (Editable HTML + project JSON, SVG / PNG result, CSV + calculated analysis), open the visual result and explain failed checks. An incomplete dependency check is not a successful result. Ask before paid services and do not publish automatically.Before calling it done
- Dependencies checked before rendering
- Actual files open and work with your content
- Editable source saved in a new folder
Installation options & technical requirements
Start with your agent
Give this request to Claude Code, Codex or Cursor. Your agent can collect the missing details and guide your first result.
Use colorway-catalog. Read SKILL.md. Ask for my reviewed data, audience and intended result. Start with the closest included example, replace fictional content, validate every input and calculation, show a preview, then deliver editable HTML, project JSON, SVG/PNG, CSV and a silent result-only MP4. Do not invent evidence. Start with examples/default.json.Purchase access is required to install the package. Technical commands are available below when you need them.
US$4.99 · MIT licenseOffline browser editor · optional local MP4No API key or paid provider
- 01
Choose a home for your studio
Unzip into a new folder and open the studio directly. Choose an agent below if you would like help reviewing sources or writing your own content.
Package folder
.agents/skills/colorway-catalog - 02
Add the package
Download and unzip the package into the folder above. Keep all its files together, with SKILL.md directly inside that folder.
Downloads require a verified account and purchase access. Choose a new folder if this Skill is already installed.
- 03
Open studio.html
Open editor.html, choose an example, edit the fields and Apply changes. Save your editable project and export the approved result.
Browser editing and portable exports need no dependency installation. Save HTML and project JSON to keep your work. The optional command-line builder is described below.
Optional command-line delivery
Read SKILL.md, review the generator and check its runtime requirements before running:
cd .agents/skills/colorway-catalog npm ci --ignore-scripts node scripts/build.mjs --input examples/default.json --output my-resultYour first resultOpen the offline editor, choose an example and edit labeled fields. Export SVG, 2560px PNG, CSV, analysis JSON and a portable editable HTML. Render a silent 12-second MP4 locally with the included script.
No-install browser editor. Optional MP4 rendering requires Node.js 24.15+, FFmpeg and pinned npm dependencies. All examples are fictional; review your sources before publishing. No API key or paid generation service required. Screen RGB reference; not Pantone matching, material photography or print proof.
If my-result already exists, change the output to ./my-result-2. Existing files are never overwritten.
Prefer to ask your agent?
Use colorway-catalog. Read SKILL.md. Ask for my reviewed data, audience and intended result. Start with the closest included example, replace fictional content, validate every input and calculation, show a preview, then deliver editable HTML, project JSON, SVG/PNG, CSV and a silent result-only MP4. Do not invent evidence.
Reviews0
Share your first result
Tried this workflow? Help others decide with an honest review.
Before you choose this Skill
How do I get Colorway Catalog?
The listed individual package price is USD 4.99. Premium downloads require a confirmed purchase or active membership. Your agent subscription, model access and external provider credits are separate.
Which agents can use this skill?
This release lists Codex, Claude Code, Cursor as intended installation hosts. Check the package’s dependencies and permissions before running it. These labels do not certify that every workflow has been tested in every agent.
What files can this workflow generate?
The documented 1.0.0 workflow lists: Editable HTML + project JSON; SVG / PNG result; CSV + calculated analysis; Silent MP4 + integrity manifest. Some files or exports are optional; follow the package’s setup and inspect the delivered result.
What should I check before using the result?
No-install browser editor. Optional MP4 rendering requires Node.js 24.15+, FFmpeg and pinned npm dependencies. All examples are fictional; review your sources before publishing. No API key or paid generation service required. Screen RGB reference; not Pantone matching, material photography or print proof.
More skills to explore
View all skillsAvailable1Codex +2
$4.99One-time purchase