frontend-ux-modernizer

Modernize Flutter frontend components with traceable ETS tags and ticket-based change logging.

Updated Jul 10, 2026
One-click install
npx skills add https://github.com/AvaTar-ArTs/.Agent-skills --skill frontend-ux-modernizer-avatar-arts
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-ux-modernizer
Source: https://github.com/AvaTar-ArTs/.Agent-skills/tree/main/skills/frontend-ux-modernizer
Command: npx skills add https://github.com/AvaTar-ArTs/.Agent-skills --skill frontend-ux-modernizer-avatar-arts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend modernization work often loses traceability: code changes get merged without a clear record of why they happened or which ticket they belong to. This Skill enforces a disciplined workflow where every UI/UX modernization in the ESO ecosystem is tagged in code and logged to a project history ticket. ## Core Features & Use Cases - Guided Modernization Workflow: Assess existing components, apply modern Flutter-based updates, and keep components clean and maintainable. - ETS Traceability Tags: Add // ETS: <TIMESTAMP>-<TICKET_ID> comments to modified files so every change links back to its history ticket. - Milestone Logging: Run ~/scripts/log-milestone.sh to record high-impact architectural changes in docs/HISTORY_TICKET.md. - Use Case: When refactoring a legacy UI screen into a modern Flutter component, the Skill ensures each edited file carries an ETS tag and the change is logged to the corresponding service ticket for full code lineage. ## Quick Start Ask the agent to modernize a specific frontend component using Flutter and log the change with an ETS tag tied to your current ticket ID.

Frequently Asked Questions about frontend-ux-modernizer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I modernize a frontend component with traceable changes?

Follow the four-step workflow: assess the existing component, modernize it using Flutter, add an ETS tag with timestamp and ticket ID to each modified file, then run the log-milestone script to record the change in the project history ticket.

What is an ETS tag in frontend code changes?

An ETS tag is a comment in the format `// ETS: <TIMESTAMP>-<TICKET_ID> | MOD | docs/HISTORY_TICKET.md#<TICKET_ID>` added to modified files. It links each code change directly to its corresponding history ticket for full lineage.

Which framework does this modernization workflow use?

Flutter is the preferred framework for modernizing UI/UX components in this workflow. The Skill favors clean, maintainable, and high-performance component implementations.

When should I log a milestone for frontend changes?

Log only architectural or high-impact changes, following the high-signal rule. Routine minor tweaks do not need milestone entries; run `~/scripts/log-milestone.sh` only when the change materially affects the project's structure or behavior.

Does this workflow apply outside the ESO project ecosystem?

The workflow is designed specifically for the ESO ecosystem, referencing its history ticket structure and logging script. The general pattern of tagged traceability could be adapted elsewhere, but the tooling assumes ESO conventions.