Skip to main content

Documentation Index

Fetch the complete documentation index at: https://colossal.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

The colossal-store-design skill is the bridge between the Design Library and a real project. It does two things:
  1. Apply — take an existing reference and apply its design (colors, fonts, radii, sections, component props) to any project, translating to match the project’s stack.
  2. Create — analyze one or more store screenshots with Gemini and produce a new design.json + theme.css into the design library.
This skill is generic. It does not assume the target project uses any specific template — it adapts to whatever stack the project is built on.

​
Apply a reference

The agent inspects the project’s stack first, then picks one of these paths:
Project typePath
shadcn / shadcn-compatible CSS variablesDrop the reference’s :root {} block into the project’s global CSS
Tailwind without shadcnMap CSS variables onto tailwind.config.{js,ts}
Pure HTML + CSSKeep :root {}, drop @theme inline {}, use Google Fonts CDN
Vue / Svelte / Astro / otherAdapt to the project’s idiom — use the principle, not the literal CSS
For every path, the agent treats sections[] as a menu of ideas, not a checklist — only the sections the user actually asked for get applied. The reference’s header.*, footer.*, and productCard.* props target the Colossal UI library specifically and are skipped for non-Colossal projects.

​
Create a reference

# Single screenshot
bash scripts/analyze.sh ~/Desktop/store.jpg bold-comfort-basics

# Multiple screenshots, combined into one reference
bash scripts/analyze.sh ~/Desktop/page1.jpg ~/Desktop/page2.jpg soft-luxe-beauty
Output goes to ../colossal-design-library/references/<slug>/. Slugs must be generic — no actual store names. Use descriptors like dark-luxury-fashion or minimal-coffee-earth. The script Base64-encodes the image(s), sends them to Gemini with the analysis prompt, validates the response, strips any hallucinated header/footer link arrays, and runs gen-theme.cjs to produce the theme.css. Requires GEMINI_API_KEY, plus jq, node, and curl.

​
Scripts

FilePurpose
scripts/analyze.shAnalyze screenshot(s) into the design library (Create)
scripts/gen-theme.cjsConvert a design.json theme object into a self-contained theme.css (also runnable standalone)
scripts/prompt.txtThe Gemini analysis prompt — edit to change extraction behavior

​
Install

npx skills add colossalhq/agent-skills \
  --skill colossal-store-design \
  --skill colossal-design-library
The store-design skill writes into colossal-design-library. If you install it without the library, set COLOSSAL_DESIGN_LIBRARY_DIR to point at an existing library skill directory.