Add skill: generate custom styles from app design system

Start with the existing style definitions in renderer.ts and widget-renderer.tsx, then inspect apps/mcp/skills/, server.ts, assemble_document, and the README. Trace how MCP prompts and theme data are registered and applied. Done means the new skill and prompt are available, overrides can be applied by assemble_document, and the README includes a usage example.

Summary

Create a new agent skill that analyzes the host application's existing styles (colors, typography, spacing, borders, etc.) and generates matching CSS/design tokens for UI component generation. This would allow the assemble_document tool to produce widgets that visually match the consuming application rather than using the default OpenGenerativeUI theme.

Motivation

Currently, renderer.ts ships a hardcoded design system (forked from widget-renderer.tsx). When users integrate the MCP server into their own apps, the generated widgets look like OpenGenerativeUI — not like their app. A style-extraction skill would close this gap by letting the agent adapt generated UI to the host app's look and feel.

Proposed approach

• Add a new skill file (skills/custom-styles-skill.txt) with instructions for:
  • Extracting CSS custom properties, Tailwind config, or design tokens from the host app
  • Mapping extracted values to the OpenGenerativeUI CSS variable schema (--color-*, --font-*, --border-radius-*)
  • Generating a theme override block that assemble_document can merge with the base styles
• Expose the skill via a new MCP prompt (e.g. customize_theme)
• Optionally extend the assemble_document tool to accept a themeOverrides parameter

Acceptance criteria

• New skill file in apps/mcp/skills/
• Registered as an MCP prompt in server.ts
• Agent can read a target app's styles and produce a compatible CSS override
• assemble_document supports applying the override
• README updated with usage example