Will this skill help with data feeding logic?

Absolutely. It provides a plan for implementing the data-feeding lifecycle, including how to call shell setters like setMultiSelectOptions with the boundsOnly pattern to preserve user selections.

Does it handle mobile layout verification?

Yes, the skill ensures mobile parity by verifying that all mapped primitives work within the FilterSheet bottom-sheet interaction pattern on mobile devices.

Which UI primitives does this skill support?

The skill maps filters to four generic shell primitives: dateRange, range, viewMode, and multiSelect, which automatically handle both desktop and mobile rendering.

What is the Dual-Mode migration pattern?

It is a strategy where a single screen component detects its environment using hooks like useFiltersOptional(), allowing it to serve both the new shell route and the legacy route simultaneously without code duplication.

Klair Shell Migration Planner

Name: Klair Shell Migration Planner
Author: AI-Builder-Team

byAI-Builder-Team

•

デザインツール

Plans the migration of legacy frontend screens to the New-UI shell system using a standardized 6-phase workflow.

The Klair Shell Migration Planner is a specialized architectural skill designed to transition legacy web screens into a modern, unified shell system. It automates the process of cataloging legacy filters, mapping them to high-performance shell primitives (like multiSelect and dateRange), and generating production-ready route configurations. By following a 'Dual-Mode' philosophy, this skill ensures that migrated screens remain compatible with legacy routes while gaining advanced desktop sidebar and mobile bottom-sheet capabilities, all while maintaining a single source of truth for component logic.

主な機能

01Gap analysis for identifying necessary custom filter enhancements

022 GitHub stars

03Automated mapping of legacy filters to standardized shell primitives

04Comprehensive 6-phase migration workflow from cataloging to verification

05Production-ready route configuration generation for routes.tsx

06Dual-mode implementation strategy to prevent breaking legacy routes

ユースケース

01Implementing responsive mobile-first filtering logic for existing desktop features

02Modernizing legacy dashboard screens to support unified filter sidebars and mobile sheets

03Refactoring complex inline filter components into standardized shell-managed primitives

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ai-builder-team/ai-builder-plugin-marketplace klair-shell-migrate-temp

For use in Claude.ai and ChatGPT

主な機能

01Gap analysis for identifying necessary custom filter enhancements

022 GitHub stars

03Automated mapping of legacy filters to standardized shell primitives

04Comprehensive 6-phase migration workflow from cataloging to verification

05Production-ready route configuration generation for routes.tsx

06Dual-mode implementation strategy to prevent breaking legacy routes

ユースケース

01Implementing responsive mobile-first filtering logic for existing desktop features

02Modernizing legacy dashboard screens to support unified filter sidebars and mobile sheets

03Refactoring complex inline filter components into standardized shell-managed primitives

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ai-builder-team/ai-builder-plugin-marketplace klair-shell-migrate-temp

For use in Claude.ai and ChatGPT