English | 繁體中文

Visual Skill Composer (VSC)

A visual, composable skill system for AI agents.

Pick what you are making, see which AI capabilities that actually needs, choose a visual style and a brand system, set how strict quality control should be — and get a machine-readable Project Manifest any agent runtime can execute.

From writing prompts to use AI → installing skills to use AI → composing AI capabilities visually.

---

Why this exists

Skill marketplaces show you a list. A list does not tell you which skills belong together, which ones a project is missing, or what the result will look like.

VSC replaces the checkbox list with five decisions a person can actually make by looking:

Layer	Question	Output
1. Project	What are you making?	project.type
2. Skills	Which capabilities does it need?	skills[]
3. Visual	How should it look?	visual.style
4. Brand	Whose identity applies?	brand.source
5. Quality	How strict is the check?	quality.*

Each layer narrows the next. Choosing Course Presentation pre-selects instructional design, storytelling, and infographic — and suggests research and Vision Judge on top.

---

See the flow as a comic

技能包的五層漏斗 — an eight-panel comic note walking through the five layers, one layer per panel. Cover the text and the panels still read.

It was produced by running VAD's VAC-COMIC-001 card end to end, so it doubles as a worked example of the handoff this repo describes: storyboard first, QA against a rubric, then draw. The storyboard source is examples/vsc-flow-8panel.storyboard.json, validated against the VAD-Comic-Notes storyboard schema.

---

VSC and VAD

These are deliberately two projects, not one.

             VSC
     Visual Skill Composer
              |
              |  select / compose
              v
       Project Skill Pack   <-- schemas/project-manifest.schema.json
              |
              v
             VAD
      Visual Agent Design
              |
      +-------+-------+
      v       v       v
    Figma   Assets   Brand
      |
      v
  AI Generation
      |
      v
  Vision Judge
      |
      v
   Auto Repair

VSC decides which tools you take with you. VAD decides how those tools get the job done.

VSC never executes anything. It composes, validates, and hands off. VAD reads the manifest through python tools/vac_runner.py vsc <manifest> and compiles it onto a Standard VAC card — see VSC-INTERFACE.md.

This handoff maps onto VAD's core principle, High Intelligence for Discovery, Low Cost for Execution:

Use a high-end model once to learn the task; let a low-cost agent repeat it well afterward.

The Project Skill Pack that VSC assembles is exactly that learned, reusable spec — the cost of discovery is paid once during composition and validation, and VAD then executes it at scale with the cheapest model that still gets the job done.

---

Quick start

Use it now: https://draiagent.github.io/visual-skill-composer/ — no install, nothing leaves your browser.

Or run it locally:

git clone https://github.com/draiagent/visual-skill-composer.git
cd visual-skill-composer
python -m http.server 4321 --directory ui

Open http://localhost:4321, compose a pack, and hit Build skill pack. The UI is a single self-contained HTML file — no build step, no dependencies.

Validate a manifest, and check the packs against each other:

python tools/validate.py examples/academic-presentation.vsc.yaml
python tools/check_consistency.py

Install as a Claude Code skill

mkdir -p ~/.claude/skills/visual-skill-composer
cp install/claude-code/SKILL.md ~/.claude/skills/visual-skill-composer/SKILL.md

Then ask for a skill pack from any directory. See install/README.md.

---

What a manifest looks like

vsc_version: 0.1.0
project:
  type: academic-presentation
  language: zh-TW
skills:
  - instructional-design
  - storytelling
  - infographic
  - data-visualization
  - research
visual:
  style: swiss-editorial
brand:
  source: figma
quality:
  vision_judge: true
  text_check: true
  brand_check: true
  auto_repair: true
  threshold: 80

---

Bilingual by design

Every id in this repo is English kebab-case and never localised. Labels are bilingual data, resolved at display time.

Skill ID	繁體中文	English
presentation-design	簡報設計	Presentation Design
storytelling	故事敘事	Storytelling
data-visualization	資料視覺化	Data Visualization
infographic	資訊圖解	Infographic
instructional-design	教學設計	Instructional Design
research	研究分析	Research
brand-system	品牌系統	Brand System
vision-judge	視覺品質評估	Vision Judge
auto-repair	自動修正	Auto Repair

This is why GitHub, Claude Code, Codex, and Gemini CLI all read the same manifest regardless of which language the person composing it was using.

---

Repository layout

visual-skill-composer/
├── README.md              English (default)
├── README.zh-TW.md        繁體中文
├── SKILL.md               Agent-facing entry point
├── docs/{en,zh-TW}/       Concepts, manifest spec, authoring guide
├── registry/skills.json   Single source of truth for skills
├── skills/                One file per skill contract
├── project-packs/         What you are making
├── style-packs/           How it looks
├── brand-packs/           Whose identity applies
├── qa-packs/              How strictly it is checked
├── schemas/               JSON Schema for the manifest
├── install/               Global Claude Code skill
├── tools/                 validate.py, check_consistency.py, gen_skill_docs.py
├── index.html             GitHub Pages entry, redirects to ui/
├── comic/                 Eight-panel comic note explaining the flow
├── ui/index.html          The composer (single file, no build)
└── examples/              Sample manifests

---

Security note

VSC stores references, never secrets. A Figma brand pack records a file key and an environment-variable name; the token itself stays out of version control and is resolved at run time by the executor.

---

Licence

MIT — see LICENSE.