design-migrate

Migrate legacy CSS styles to the --zaq-* token system for ZAQ UI.

66|9|Updated Feb 26, 2026
One-click install
npx skills add https://github.com/www-zaq-ai/zaq --skill design-migrate
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-migrate
Source: https://github.com/www-zaq-ai/zaq/tree/main/.agents/skills/design-migrate
Command: npx skills add https://github.com/www-zaq-ai/zaq --skill design-migrate

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the migration of legacy ZAQ web UI styling to the modern --zaq-* token system, ensuring consistency and efficiency.

Core Features & Use Cases

  • Design Migration: Converts CSS styling from legacy systems to the new --zaq-* token-based system.
  • Mode Support: Handles design-led migrations using Figma frame URLs, audits existing files, and performs full codebase sweeps.
  • Role-Based Constraints: Enforces styling rules for buttons, forms, modals, tables, and general chrome to maintain UI coherence.
  • Code Verification & Approval: Provides a human-validation table for code review and approval before applying changes.
  • Incremental Updates: Supports incremental updates to maintain UI integrity during large-scale migrations.

Quick Start

Run /design-migrate <file> to begin the migration process for a specific file.

Frequently Asked Questions about design-migrate

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

FAQPage Schema
How do I migrate legacy CSS styles to the --zaq-* token system?

To migrate legacy CSS styles to the --zaq-* token system, you can use this Skill to parse existing styles, apply new token-based styles, and verify changes. It converts legacy ZAQ web UI styling to the modern token system for consistency.

Can I perform a design-led CSS migration using a Figma frame URL?

Yes, you can perform a design-led CSS migration using a Figma frame URL. The Skill supports design-led migrations, existing file audits, and full codebase sweeps to apply the new --zaq-* token-based styling system.

Do I need Elixir and Phoenix knowledge to use this CSS conversion tool?

Yes, you need Elixir and Phoenix knowledge along with familiarity with ZAQ UI structure to use this CSS conversion tool. The Skill requires this technical background to accurately parse and migrate legacy styles to the token system.

What is the best way to enforce styling rules for UI components during a codebase sweep?

The best way to enforce styling rules for UI components during a codebase sweep is using this Skill, which enforces role-based constraints for buttons, forms, modals, and tables. It provides a human-validation table to review and approve changes before applying them.

Does this migration tool support incremental updates for large codebases?

Yes, this migration tool supports incremental updates for large codebases. It maintains UI integrity during large-scale migrations by allowing you to run targeted file migrations and verify changes progressively before full application.

Why should I use a token system for UI modernization instead of legacy CSS?

You should use a token system for UI modernization instead of legacy CSS to ensure styling consistency and efficiency across your application. The --zaq-* token system enforces role-based constraints for chrome, buttons, and forms to maintain UI coherence.