Skip to content
UXClaim
Design Systems

TRDR Design System Plugins

Claude Code plugins that apply TRDR Design System to projects—analyze violations and auto-migrate components.

View source More in Design Systems

What it does

TRDR Plugins are Claude Code extensions that bring your company’s design system directly into your development workflow. The /trdr-ds skill automatically scans projects, identifies design system violations, and applies fixes—keeping your codebase aligned with TRDR standards.

How it works

The skill operates in two phases:

  1. Analysis — Scans your project structure, compares components against TRDR rules, and generates a migration plan showing all violations and recommended changes.
  2. Execution — After your approval, automatically creates tokens.css, components.css, CLAUDE.md, and fixes violations in-place.

Component data is fetched live from the TRDR Design Hub, so new components are immediately available without plugin updates.

Use cases

  • Onboard new projects to your design system quickly
  • Audit existing codebases for design system compliance
  • Migrate legacy components to current standards
  • Keep design tokens and component CSS synchronized across projects
  • Document component usage patterns automatically

Who benefits

Design systems managers, frontend teams, and product designers working with shared component libraries. Developers managing multiple projects can install once globally and use across all codebases.

Frequently asked questions

How do I install TRDR plugins?
Run `npx trdr-ds-install@latest` for global installation (all projects) or `npx trdr-ds-install@latest --project` for project-scoped installation. After installing, restart Claude Code to activate the skill.
How do I update TRDR plugins?
Run the same installation command: `npx trdr-ds-install@latest`. The `@latest` flag bypasses npm cache and always fetches the newest version.
What does the /trdr-ds skill do?
It scans your project for design system violations, presents a migration plan, and after approval, creates design tokens, component styles, and documentation while fixing violations automatically.
Where does TRDR fetch component data from?
Component data is fetched live from the TRDR Design Hub at https://trdr.mrocontent.com.br. New components added to the Hub are automatically available without needing plugin updates.
Can I install TRDR plugins for just one project?
Yes. Use the `--project` flag: `npx trdr-ds-install@latest --project`. This installs the skill into `.claude/skills/` in your current directory only.
Do I need to restart Claude Code after installing?
Yes, restart Claude Code after installation to activate the skill and make `/trdr-ds` available.
What files does TRDR create?
The skill creates tokens.css (design tokens), components.css (component styles), and CLAUDE.md (documentation) while fixing design system violations in your existing code.
How often should I run the TRDR skill?
Run it when onboarding projects, auditing compliance, or migrating to new design system versions. Analysis is non-destructive; execution requires your approval before making changes.

Glossary

Design Tokens
Reusable design values (colors, spacing, typography) stored as CSS variables that ensure consistency across components and projects.
Design System Violations
Instances where project code doesn't follow established design system rules, such as using non-standard colors or component patterns.
Design Hub
TRDR's centralized repository at trdr.mrocontent.com.br containing all design tokens, components, rules, and specifications.
Migration Plan
A detailed report generated by the analysis phase showing all violations found and the recommended changes needed for compliance.

More in Design Systems

All →
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.