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

Claude Code Agent Design Kit

AI-powered multi-agent design system generator that creates production-ready UI components, design tokens, and documentation from natural language briefs.

MichelSR25
Design Systems

Claude Code Design Kit

AI-powered multi-agent design system generator that creates production-ready UI components, design tokens, and documentation from natural language descriptions.

MichelSR25
Design Systems

Claude Design Studio Toolkit

AI-powered design co-pilot with responsive UI engine, design tokens, accessibility validation, and multi-agent workflows for code-first design teams.