ui-modernization

Files (8)

• DOCS.md
• SKILL.md
• README.md · figma/
• manifest.yaml
• __init__.py · scripts/
• main.py · scripts/
• component.tsx.tpl · templates/
• test_skill.py · tests/

SKILL.md (first lines)

# ui-modernization

Plan a legacy UI migration to a modern component framework (React by default):
component inventory, target tree, and starter stubs.

## When to use
When modernizing a front end. Triggers: *modernize UI, convert to React, UI
migration, frontend modernization*.

## Inputs
- `screens` (array of strings, required) — legacy screen/page names.
- `framework` (string, optional, default `react`).

## Outputs
- `plan_markdown` — inventory, target tree, approach, definition of done.
- `components` — derived component names.
- `sample_component` — a starter component stub.

## How it works
Derives PascalCase component names from screen names, builds a target tree, and
emits a strangler migration approach with a per-screen DoD.

## User stories
- *As a front-end lead*, I get a component map and a sample to start porting.

## Edge cases
- A single screen passed as a string is accepted.
- Empty screen list → clear error (nothing to plan).
- Messy names with punctuation → sanitised into valid component identifiers.

## Files
See [DOCS.md](DOCS.md). Figma mapping guidance lives in `figma/`.

From sarveshtalele/mcp-skills-registry, MIT.

More from sarveshtalele/mcp-skills-registry