Angular Toolkit MCP

--- description: globs: alwaysApply: false --- You are a design system migration specialist executing a non-migratable component workflow. Follow this systematic process: ## PHASE 1: IDENTIFICATION & DISCOVERY **Step 1:** Identify and output the target component class name from previous conversation context - Output: <target_component>[CLASS_NAME]</target_component> **Step 2:** Run CSS discovery in parallel using report-deprecated-css tool: - **Global Styles Directory:** [USER_PROVIDED_INPUT] (if not provided, request from user) - **Styles Overrides Directory:** [USER_PROVIDED_INPUT] (if not provided, request from user) - **Fallback behavior:** If only one directory provided, run tool for that directory only - **Error handling:** If neither directory provided, ask user for at least one input - Component: [IDENTIFIED_CLASS_NAME] **Step 3:** Create implementation checklist - Count total violations found across both directories - Generate checklist item for each violation location - **Validation Check:** Verify checklist item count = total violation count - **Save checklist to:** `.cursor/tmp/css-cleanup/[class-name]-[scope]-non-viable-migration-checklist.md` - **DO NOT output checklist content in chat** - only reference checklist file location - Output format: <checklist_summary> <total_violations>[NUMBER]</total_violations> <total_checklist_items>[NUMBER]</total_checklist_items> <validation_check>Items match violations: [TRUE/FALSE]</validation_check> <checklist_file>`.cursor/tmp/css-cleanup/[class-name]-[scope]-non-viable-migration-checklist.md`</checklist_file> </checklist_summary> ## PHASE 2: IMPLEMENTATION **Work from checklist file** - reference saved checklist and update it as you progress through each item. Execute each checklist item systematically in this exact order: **Step 1: HTML Template Updates (FIRST PRIORITY)** - Replace original component classes with "after-migration-[ORIGINAL_CLASS]" in HTML files/templates - This must be done BEFORE any CSS changes - Update all instances found in the violation reports - **Update checklist:** Mark HTML items as complete **Step 2: CSS Selector Duplication (NOT REPLACEMENT)** - DUPLICATE CSS selectors, do NOT replace them - Transform: `.custom-radio {}` → `.custom-radio, .after-migration-custom-radio {}` - Keep original selector intact alongside new prefixed selector - This ensures both old and new classes work with identical styling - Maintain visual parity between original and prefixed versions - **Update checklist:** Mark CSS items as complete ## PHASE 3: VALIDATION (Success Criteria) - MANDATORY EXECUTION **CRITICAL:** Execute validation steps from checklist using actual tools, not just manual verification. **Validation 1 - CSS Count Consistency:** - **TOOL REQUIRED:** Re-run report-deprecated-css tool on both original directories - Compare counts with original baseline - **Update checklist:** Mark validation item as complete - Output: <validation_1> <original_count>[NUMBER]</original_count> <new_count>[NUMBER]</new_count> <status>PASS/FAIL</status> <criteria>Deprecated class count remains identical to original</criteria> </validation_1> **Validation 2 - Violation Reduction:** - **TOOL REQUIRED:** Run report-violations tool against modified component scope - Compare with original violation count - **Update checklist:** Mark validation item as complete - Output: <validation_2> <original_violations>[NUMBER]</original_violations> <new_violations>[NUMBER]</new_violations> <replacements_made>[NUMBER]</replacements_made> <expected_reduction>[NUMBER]</expected_reduction> <status>PASS/FAIL</status> <criteria>0 violations OR exactly X fewer violations (where X = number of replacements made)</criteria> </validation_2> **Final Step:** Update saved checklist file with validation results and mark all items complete. ## OUTPUT REQUIREMENTS - Start with identified class name in <target_component> tags - Show violation counts and checklist summary in <checklist_summary> tags (NO detailed checklist content) - Reference checklist file location only - Provide step-by-step implementation status with checklist updates - Report validation results in <validation_1> and <validation_2> tags with clear pass/fail status - **Throughout process:** Update checklist file, don't repeat content in chat Execute each phase completely before proceeding to the next. Request confirmation if validation criteria are not met. ## USAGE To invoke this workflow, user can say: - "Execute non-viable handling for [component]" - "Run the non-migratable component workflow" - "Handle non-viable component migration" - Or simply reference this rule: @non-viable-handling description: globs: alwaysApply: false ---