Angular custom directives let you change how elements look and behave. You can create reusable pieces of code that add highlighting, tooltips, or button styles. This skill covers attribute directives that modify an element, host directives that combine behaviors, and more.
You will learn to write directives that listen to events like clicks or keyboard shortcuts. You can also add and remove CSS classes or styles. The examples use Angular v20+ with modern signals and the host property instead of older decorators.
Note that for control flow like if and loops, you should use the native @if, @for, and @switch. Do not build custom structural directives for that. Use this skill to extend element behavior in a clean and reusable way.
Global
mkdir -p ~/.claude/skills/angular-directivesProject
mkdir -p .claude/skills/angular-directivesSource Repository
Frontend Designanthropics/skills
Create striking frontend interfaces with bold design and polished code every time
Vercel React Best Practicesvercel-labs/agent-skills
Optimize React and Next.js apps using proven Vercel performance guidelines
Design Taste Frontendleonxlnx/taste-skill
Enforce premium frontend design with metric-based rules and smart component architecture
Vercel Composition Patternsvercel-labs/agent-skills
Clean React components with composition instead of boolean props
Shadcnshadcn/ui
Manage shadcn UI components easily with CLI commands and clear styling rules
Impeccablepbakaus/impeccable
Polish your frontend interfaces with expert design critique and code
Minimalist Uileonxlnx/taste-skill
Build warm minimal web interfaces with editorial typography and flat bento grids
Industrial Brutalist Uileonxlnx/taste-skill
Raw mechanical UIs fusing Swiss print with military terminal aesthetics and high data density