Skip to main content

Gesso Skills for Claude Code

Claude Code plugins for AI-assisted development with the Gesso Framework.

Installation​

/plugin marketplace add https://git.acromedia.com/acromedia/gesso/gesso.git

Available Skills​

gesso-react​

React component library skill built on Material UI (MUI) with Emotion styling and Figma-generated design tokens.

  • Fetches component documentation (props, examples, usage) from Storybook
  • Provides layout rules for Container, Section, Grid, and GridItem
  • Guides component creation following Gesso conventions
  • Adapts to project-specific components, tokens, and theme overrides
/plugin install gesso-react@gesso-skills

Requirements​

Benchmarking (Internal)​

Evaluates skill quality by comparing AI-generated code with and without the skill against a quality checklist.

1. Create a test project​

# From the gesso repo root
./starter-kits/create-gesso/bin/create-gesso.js base_line_a --useLocal true
./starter-kits/create-gesso/bin/create-gesso.js base_line_b --useLocal true

2. Add CLAUDE.md to each project​

  • Without design-system: copy skills/benchmark/CLAUDE.example.md → CLAUDE.md
  • With design-system: copy skills/benchmark/CLAUDE.with_design_example.md → CLAUDE.md

3. Run benchmarks​

From each project directory:

# Side A — without skill (run in base_line_a)
cd base_line_a
node ../gesso/skills/benchmark/run-benchmark.mjs \
  --plugin-dir ../gesso/skills/gesso-react --side a

# Side B — with skill (run in base_line_b)
cd base_line_b
node ../gesso/skills/benchmark/run-benchmark.mjs \
  --plugin-dir ../gesso/skills/gesso-react --side b

4. Evaluate results​

# Without design-system
node ../gesso/skills/benchmark/generate-report.mjs \
  --results ./benchmark-results --evaluate

# With design-system
node ../gesso/skills/benchmark/generate-report.mjs \
  --results ./benchmark-results --evaluate --project

The evaluator dynamically searches the project for generated code and scores it against the quality checklist. Results are saved to benchmark-results/<run-id>/report.md.