bottega-skills

Claude Code skills for design and frontend engineering. Install once, update easily, customize freely.

Installation

npx bottega-skills init

This will:

• Create CLAUDE.local.md at project root (skill system instructions for Claude)
• Create .claude/skills/ with all skill definitions
• Create .claude/skills-overrides/ for your customizations
• Track the installed version for easy updates

Then create your own CLAUDE.md for project-specific instructions (tech stack, conventions, etc.).

Usage

Update to latest

npx bottega-skills update

Updates skills while preserving your customizations.

Check status

npx bottega-skills status

Shows installed version, available updates, and active overrides.

Preview changes

npx bottega-skills diff

Shows what will change before you update.

Customization

To customize a skill or reference file:

1. Copy it to the overrides directory (preserving the path structure):

   cp .claude/skills/references/patterns/FORMS.md \
      .claude/skills-overrides/references/patterns/FORMS.md

2. Edit your copy in .claude/skills-overrides/

3. Future updates will skip files that have overrides

What's Included

Agents

• Brainstorm - Explores concepts, can build throwaway prototypes, produces design briefs
• Design - UX/UI design, audits, user research, component specification
• Engineering - Implementation, testing, CI/CD, performance, refactoring

Reference Materials

Foundations:

• Typography, colors, layouts, motion, components

Patterns:

• User journeys, forms, interaction patterns, component patterns, state management, error handling

Domains:

• Authentication, payments, e-commerce, dashboards, onboarding, settings, subscriptions, user management

Implementation:

• Token integration, testing, refactoring, i18n, WCAG accessibility

CLI Options

Commands:
  init      Initialize skills in current project
  update    Update skills to latest version
  status    Show installation status and overrides
  diff      Show differences between installed and latest

Options:
  --help      Show help
  --force     Force operation (overwrite existing)
  --yes, -y   Skip confirmation prompts
  --dry-run   Show what would happen without doing it

Directory Structure

After installation:

your-project/
├── CLAUDE.local.md            # Skills system (managed by CLI)
├── CLAUDE.md                  # Your project-specific instructions
└── .claude/
    ├── skills/                # Skill definitions (managed by CLI)
    │   ├── .bottega-manifest.json
    │   ├── brainstorm.md
    │   ├── design.md
    │   ├── engineering.md
    │   └── references/
    │       ├── foundations/
    │       ├── patterns/
    │       ├── domains/
    │       └── implementation/
    └── skills-overrides/      # Your customizations
        └── (mirrors skills/ structure)

Claude Code automatically loads both CLAUDE.md and CLAUDE.local.md from the project root.

License

MIT