shadcn-ng
ALWAYS use when writing code importing shadcn-ng (shadcn/angular). Consult for debugging, best practices, or modifying Angular shadcn components.
Works with
---
name: shadcn-ng
description: ALWAYS use when writing code importing shadcn-ng (shadcn/angular). Consult for debugging, best practices, or modifying Angular shadcn components.
license: MIT
---
# unovue/shadcn-ng `shadcn-ng`
**Version:** Latest (2025)
**Tags:** Angular, Tailwind CSS, Radix Primitives
**References:** [Docs](./references/docs/_INDEX.md) — installation, components, theming • [GitHub Issues](./references/issues/_INDEX.md) — bugs, workarounds • [GitHub Discussions](./references/discussions/_INDEX.md) — Q&A, patterns
## API Changes
This section documents version-specific API changes.
- NEW: Angular support — shadcn-ng is the Angular port of shadcn/ui, providing copy-paste components styled with Tailwind CSS
- NEW: CLI commands — Use `npx shadcn-ng@latest init` for initialization and `npx shadcn-ng@latest add <component>` for adding components
- NEW: Standalone components — All components are Angular standalone components with proper imports
- NEW: `cn` utility — Use the `cn()` helper from `lib/utils.ts` to merge Tailwind CSS classes
- NEW: CSS variables theming — Configure colors via CSS variables in `globals.css`
## Best Practices
- Use standalone components — All shadcn-ng components are standalone, import them directly in `imports` array
```ts
import { Component } from "@angular/core";
import { UbButtonDirective } from "~/components/ui/button";
@Component({
standalone: true,
imports: [UbButtonDirective],
// ...
})
export class ExampleComponent {}
```
- Configure Tailwind CSS — Follow the official installation guide to set up tailwindcss-animate, class-variance-authority, clsx, and tailwind-merge
- Use CSS variables for theming — Define colors in `:root` in your globals.css for dynamic theming
- Treat components as your own code — Copy components into your project and customize as needed
- Use registry for custom components — Create your own registry.json to share and reuse custom components across projectsMore Debugging skills
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.
explore-code
lllllllama/rigorpilot-skills
Rigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated branch or worktree to transplant modules, adapt a backbone, add LoRA or adapter layers, replace a head, or stitch together meaningful low-risk migration ideas with rollback-aware records in `explore_outputs/`. Do not use for end-to-end exploration orchestration on top of `current_research`, trusted baseline reproduction, conservative debugging, environment setup, verified contribution claims, or default repository analysis.
safe-debug
lllllllama/rigorpilot-skills
Rigor Debug / Rigor Audit skill for deep learning research work. Use when the user pastes a traceback, terminal error, CUDA OOM, checkpoint load failure, shape mismatch, NaN loss symptom, or training failure and wants conservative diagnosis before any patching, with debug fixes clearly separated from research contributions. Do not use for broad refactoring, speculative adaptation, automatic exploratory patching, or general repository familiarization.
