bruno/dss

Files

Digital Production Factory 276ed71f31 Initial commit: Clean DSS implementation

Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm

Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)

Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability

Migration completed: $(date)
🤖 Clean migration with full functionality preserved

2025-12-09 18:45:48 -03:00

2.4 KiB

Raw Blame History

name, description, arguments

name

description

arguments

dss-generate

Generate theme files from design tokens

name	description	required
format	Output format: css, scss, json, or js	true

name	description	required
name	Theme name (default is "default")	false

DSS Generate Command

Generate platform-specific theme files from design tokens using style-dictionary.

Usage

/dss-generate <format> [name]

Examples:

/dss-generate css
/dss-generate scss dark-theme
/dss-generate json
/dss-generate js tokens

Supported Formats

Format	Output	Use Case
css	CSS custom properties	Web projects using CSS variables
scss	SCSS variables	Projects using Sass
json	JSON structure	Framework-agnostic, APIs
js	JavaScript module	React, Vue, JS projects

What This Does

Prepares Tokens
- Validates token structure
- Organizes by category
- Applies naming conventions
Transforms via Style Dictionary
- Applies platform transforms
- Generates output files
- Creates documentation
Returns Generated Files
- Theme file content
- Usage instructions
- Integration guide

Instructions for Claude

When the user runs this command:

Verify format is valid (css, scss, json, js)
Check if tokens are available (from previous extraction or ask for path)
Use dss_generate_theme tool with format and theme name
Display generated file content
Provide integration instructions for the format
Offer to generate additional formats

If no tokens available:

Ask user to run /dss-extract first
Or ask for path to tokens file

Example Output

Theme Generation: dark-theme (CSS)

GENERATED FILE: theme-dark.css

:root {
  /* Colors */
  --color-primary: #3385d6;
  --color-primary-light: #66a3e0;
  --color-primary-dark: #0066cc;
  --color-background: #1a1a1a;
  --color-surface: #2d2d2d;
  --color-text: #ffffff;

  /* Typography */
  --font-family-base: "Inter", sans-serif;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
}

USAGE

1. Import in your main CSS:
   @import 'theme-dark.css';

2. Use variables in components:
   .button {
     background: var(--color-primary);
     padding: var(--spacing-md);
   }

Generate another format? Try /dss-generate scss dark-theme

2.4 KiB Raw Blame History