name: coss-ui-sync description: Sync COSS UI components from shadcn registry and fix imports to relative paths disable-model-invocation: true argument-hint: "<components...> (e.g. @coss/ui @coss/colors-neutral, or accordion button)"
Add shadcn/ui Components
This project is an Electron app with the renderer source at src/renderer/src/. The shadcn CLI generates files with @/ alias imports, but this project uses relative imports in renderer code. After running the CLI, a post-processing script converts @/ → relative paths.
Steps
Ensure
tsconfig.jsonhas thepathsalias that shadcn needs to resolve output paths. Read the currenttsconfig.jsonand add the paths entry if missing:// tsconfig.json compilerOptions must include: "paths": { "@/*": ["./src/renderer/src/*"] }If
compilerOptionsdoesn't exist, add it. Ifpathsalready contains the entry, skip this step.Run the shadcn CLI to add components:
bunx --bun shadcn@latest add <components...> --overwriteRun the import fixer to convert
@/alias imports to relative imports:bun .claude/skills/coss-ui-sync/scripts/fix-imports.tsRemove the
pathsentry fromtsconfig.jsonthat was added in step 1. The finaltsconfig.jsonshould not contain thepathskey incompilerOptions. IfcompilerOptionsis left empty, remove it too.Report what was added and how many files were fixed.
Important Notes
- The
pathsalias is only needed temporarily for the shadcn CLI to resolve where to place files. It must be removed afterward so it doesn't conflict with the project's actual TypeScript config. - The
components.jsonat project root uses@/aliases. This is intentional — shadcn needs them to place files insrc/renderer/src/. - The
@cossregistry (https://coss.com/ui/r/{name}.json) provides Base UI components. Use@coss/prefix for Base UI variants (e.g.@coss/accordion,@coss/uifor all). - Always pass
--overwriteto avoid interactive prompts. - For
@coss/colors-*packages, the CLI may prompt for confirmation about overwriting styles — pipeecho "y"if needed.