trdr-plugins

TRDR company plugins for Claude Code.

Installation (one-time, per developer)

npx trdr-ds-install@latest

This installs the trdr-ds skill into ~/.claude/skills/ — available in all your projects.

For project-scoped install (goes into .claude/skills/ in the current directory):

npx trdr-ds-install@latest --project

After installing, restart Claude Code to activate the skill.

Updating

Same command. The @latest flag bypasses npm cache and always fetches the newest version:

npx trdr-ds-install@latest

Available skills

/trdr-ds — TRDR Design System

Applies the TRDR Design System to any project. Operates in two phases:

1. Analysis — scans the project, finds violations, presents a migration plan
2. Execution — after approval, creates tokens.css, components.css, CLAUDE.md, and fixes violations

The skill is offline-first: it ships with a snapshot of the catalog (data/components.json) and tokens (references/tokens.css) baked in, so it works without network access. The snapshot is refreshed by the maintainer via npm run sync and shipped to devs via npm publish.

Modes:

| Command | Behaviour | |---------|-----------| | /trdr-ds (default = analyze) | Scan + plan, no changes | | /trdr-ds apply | Scan + plan + execute after approval | | /trdr-ds apply batch 15 | Same as apply, but process violations in batches of 15 files (default: 25) | | /trdr-ds resume | Continue a batched migration from the last checkpoint (DS_PROGRESS.md) | | /trdr-ds status | Show migration progress from DS_PROGRESS.md — no files modified | | /trdr-ds sync | Refresh local snapshot from the Hub (no project changes) | | /trdr-ds apply --latest | Sync first, then apply |

Large project support:

For projects with more than 50 violations or 30 affected files, Phase 2 switches automatically to batched mode:

• Violations are processed folder by folder (e.g. src/components/, src/pages/, src/app/)
• Progress is saved to DS_PROGRESS.md after each batch — safe to stop and resume across sessions
• After each batch the dev chooses: "continuar" / "pular [pasta]" / "parar" / "tudo"

Logo audit:

Phase 1 automatically scans for logo files (logo*.svg, *trdr*.svg, brand*.svg) and checks each against the official TRDR logo fingerprint (viewBox="0 0 105 41", fill="#00D4FF"). Wrong logos are replaced in Phase 2 without changing the filename or path.

The skill matches detected UI patterns against the catalog. Implemented components (implemented: true) are applied with full code; stubs (implemented: false) get tokens + a banner comment + an entry in MISSING_COMPONENTS.md for the maintainer to revisit.

For maintainers (Mauro)

The full release workflow is in PROCESS.md. Quick summary:

# 1. Update the Hub (components.ts or tokens.css), commit, push, wait for Railway deploy.

# 2. Pull the latest catalog into the skill snapshot
npm run sync

# 3. Review the diff
git diff plugins/trdr-design-system/skills/trdr-ds/data/components.json

# 4. Commit, version, publish
git add . ; git commit -m "sync: <what changed>" ; git push
npm version patch ; npm publish

To sync directly from the local Hub build (skipping the deploy wait):

npm run sync:local

This reads ../trdr-design-hub/.next/server/app/components.json.body and ../trdr-design-hub/src/styles/tokens.css directly from the filesystem.

Design Hub

https://trdr.mrocontent.com.br

| Path | Purpose | |------|---------| | /components.json | Catalog as JSON (consumed by sync) | | /tokens.css | Tokens as CSS (consumed by sync) | | /tokens/semanticos | Token reference (browsable) | | /componentes | Component reference (browsable) | | /para-ia | Rules and CLAUDE.md template | | /design-md | Full design spec |

Structure

trdr-plugins/
├── README.md
├── PROCESS.md                ← release workflow + scenarios
├── package.json              ← npm package "trdr-ds-install"
├── marketplace.json          ← Claude Code marketplace metadata
├── bin/install.js            ← copies skill to ~/.claude/skills
├── scripts/
│   ├── sync-components.js    ← pull /components.json from Hub
│   ├── sync-tokens.js        ← pull /tokens.css from Hub
│   └── sync-version.js       ← syncs Skill version constant on npm version
└── plugins/trdr-design-system/
    ├── .claude-plugin/plugin.json
    └── skills/trdr-ds/
        ├── SKILL.md          ← skill definition
        ├── data/
        │   └── components.json    ← snapshot of /components.json
        └── references/
            ├── rules.md           ← absolute design rules (PT-BR)
            ├── tokens.css         ← snapshot of /tokens.css
            └── logo-trdr.svg      ← official TRDR logo (105×41px)