angular-best-practices — Claude Code skill: Angular 21 done right
Keeps your agent inside Angular 21 conventions: signals, standalone components, reactive forms. Useful when it keeps reaching for outdated syntax.
npx skills add Boise-State-Development/agentcore-public-stack --skill angular-best-practices -a claude-code
npx skills add Boise-State-Development/agentcore-public-stack --skill angualar-best-practices -a claude-codeWhat angular-best-practices does
The skill is a rulebook for Angular work. It covers TypeScript with strict checking and no any, components built on input() and output(), signal-based state, native control flow in templates, services via inject(), and lazy-loaded routes. There are sections on resource() for async data, file naming, ng-icon setup, NgOptimizedImage, and Tailwind 4.1 for styling.
Some rules are blunt. You do not set standalone: true because it has been the default since v20, and @HostBinding/@HostListener are out in favour of the host object in the decorator. Complex derived state points to references/signal-patterns.md, so if that file is not next to the skill, the agent never reads it.
Accessibility is part of the deal: AXE checks and WCAG AA minimums for focus, contrast and ARIA. Expect the agent to touch markup, not just logic. The skill installs into Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode through the same npx skills add command.
What it helps with
- write Angular 21 components without legacy decorators
- move component state onto signals and
computed() - swap
*ngIfand*ngForfor@ifand@for - set up lazy feature routes with
loadComponent - bring a template up to WCAG AA minimums
Example prompts for the agent
- create a standalone task-list component using signals and ChangeDetectionStrategy.OnPush
- rewrite this service with inject() and providedIn: 'root'
- add lazy loading for the admin route with loadComponent
How to install angular-best-practices
1Skills CLI (Vercel)
npx skills add Boise-State-Development/agentcore-public-stack --skill angular-best-practices -a claude-codenpx skills add Boise-State-Development/agentcore-public-stack --skill angualar-best-practices -a claude-code2Manually: put the files in place
~/.claude/skills/angualar-best-practices/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/angualar-best-practices/
1Skills CLI (Vercel)
npx skills add Boise-State-Development/agentcore-public-stack --skill angualar-best-practices -a codex2Manually: put the files in place
.agents/skills/angualar-best-practices/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Boise-State-Development/agentcore-public-stack --skill angualar-best-practices -a cursor2Manually: put the files in place
.cursor/skills/angualar-best-practices/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Boise-State-Development/agentcore-public-stack angualar-best-practices2Manually: put the files in place
.github/skills/angualar-best-practices/SKILL.md1Skills CLI (Vercel)
npx skills add Boise-State-Development/agentcore-public-stack --skill angualar-best-practices -a gemini-cli2Platform CLI
gemini skills install https://github.com/Boise-State-Development/agentcore-public-stack --path .claude/skills/angualar-best-practicesManually: put the files in place
.devin/skills/angualar-best-practices/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Boise-State-Development/agentcore-public-stack --skill angualar-best-practices -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about angular-best-practices
How do I install angular-best-practices in Claude?
Run npx skills add Boise-State-Development/agentcore-public-stack --skill angular-best-practices -a claude-code. The skill file then lives at ~/.claude/skills/angualar-best-practices/SKILL.md.
What does angular-best-practices do?
It gives the agent Angular 21 rules: signals, standalone components, reactive forms, strict TypeScript typing, lazy loading and accessibility. The agent follows them while writing components, services and templates.
Do I need Tailwind for this skill?
The skill recommends Tailwind 4.1 for CSS and mentions Angular CDK when needed. There is no separate tailwind skill in the set, so the agent writes styles by these rules itself.
