audit-design-system

Migrate legacy UI imports to the unified design-system in React projects.

1.8k|375|Updated Jan 15, 2025

Search Tags:#ui #react #codebase #audit #migration #imports #design-system

Ready to run

npx skills add https://github.com/trycompai/comp --skill audit-design-system-trycompai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: audit-design-system
Source: https://github.com/trycompai/comp/tree/main/.agents/skills/audit-design-system
Command: npx skills add https://github.com/trycompai/comp --skill audit-design-system-trycompai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit and fix design-system usage across a codebase by migrating legacy imports to the unified design-system and ensuring consistent styling.

Core Features & Use Cases

Migrate legacy @trycompai/ui imports to @trycompai/design-system when possible.
Replace lucide-react icons with the design-system icons where available.
Validate and enforce design-system compliance across components and views.

Quick Start

Run a full repository audit to identify non-compliant components and migrate them to the design-system using the provided migration plan.

Frequently Asked Questions about audit-design-system

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

FAQPage Schema

How do I migrate legacy UI imports to a unified design system in a React codebase?▼

Migrate legacy UI imports by running a full repository audit to identify non-compliant components, then apply a migration plan to update imports to the unified design system for consistent styling across pages.

What does a design system audit check for in a React project?▼

A design system audit checks for non-compliant component patterns, validating proper imports, icon usage, and component styling to ensure consistency with design-system guidelines across the codebase.

Can I replace lucide-react icons with design-system icons automatically?▼

Yes, you can replace lucide-react icons with design-system icons automatically by running a repository audit that identifies available replacements and migrates them according to design-system guidelines.

How do I validate design-system compliance across my React components?▼

Validate design-system compliance by auditing the codebase to detect non-compliant patterns, ensuring proper imports and icon usage, and generating a report of components that require migration.

Does this design-system migration work with any React project?▼

The migration applies to frontend React projects that use @trycompai/ui or lucide-react and require consistent components and icons across pages, ensuring proper imports according to design-system guidelines.