Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Add skill: generate custom styles from app design system

Aperta
  • Qualcosa non va?
#19 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
45/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
css, typescript
Ambito
design, frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
TypeScript
Stelle
3.9k
Fork
414
Merge medio
4h
PR unite (30g)
6

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di CopilotKit/OpenIntelligentUI

Tutte le issue di CopilotKit/OpenIntelligentUI

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.