skills.rest
trycompai
trycompaiOFFICIAL
Explore all skills by this author →
Website𝕏@trycompaiGitHub

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
One-click install
npx skills add https://github.com/trycompai/comp --skill audit-design-system-trycompai
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
vobbilisvobbilis
1

frontend-dev-guidelines

Standardize React/TypeScript components with sx styling, SuspenseLoader, and useSuspenseQuery.

Community
Intermediate
10knamesmore10knamesmore

frontend-react

Enforce React component patterns and styling conventions for Vite and TypeScript projects.

Community
Intermediate
retz8retz8

frontend-design

Generate frontend interfaces with HTML/CSS, React, Vue, and design systems.

Community
Basic
MesferAliMesferAli

atlas-ui

Provide guidance on Atlas UI components, theming, forms, and data display.

Community
Intermediate