How to use the Angular UI Patterns agent skill

What the skill makes the agent do

An agent skill is a folder of instructions that an AI agent can load when a task matches it. When this skill is active, the agent follows Angular-specific patterns for UI components that work with asynchronous data. The README lists these areas: loading states (choosing between skeletons and spinners), error handling (error boundaries and recovery), progressive disclosure with @defer, data display for empty, loading and error states, form submission and validation feedback, and dialog lifecycle.

The core principles in the README are: never show stale UI, surface all errors instead of failing silently, use optimistic updates where appropriate, use @defer to load non-critical content, and provide graceful degradation when a feature fails.

Install the Angular UI Patterns skill

Download the ZIP file for the skill from this page. Then install it using one of these methods.

For a personal install, unzip the download into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.

• Personal install: unzip into ~/.claude/skills/
• Project install: unzip into the project's .claude/skills/ folder
• Claude apps: Settings → Capabilities → Skills, then upload the skill

Check the files in the skill folder

The skill contains four files. SKILL.md holds the skill's name, description and short instructions. references/detailed-guide.md holds the full procedure and reference material, and SKILL.md tells the agent to read it before executing the skill. README.md gives an overview, and metadata.json holds metadata.

SKILL.md says that for focused work the agent should load only the relevant sections of the guide, and for end-to-end work it should read the guide completely. Treat the guide's safety, prerequisites and validation requirements as mandatory.

• SKILL.md: name, description and the instruction to read the guide first
• references/detailed-guide.md: the detailed procedure and reference material
• README.md: overview of the topics covered
• metadata.json: metadata file

How to trigger the skill with natural requests

The skill's description says to use it when building UI components, handling async data, or managing component states. You do not need a special command. Describe the Angular work in ordinary language and mention the state you care about, such as loading, errors or empty data.

The skill is a good fit when the request is clearly about Angular UI. If your request is about something else, the agent may not load it, and the skill's own limitations say to use it only when the task clearly matches its scope.

• Add loading and error states to my Angular product list component that fetches from our API.
• Refactor this Angular component so it handles async data and empty results more cleanly.
• Build a dialog component in Angular with proper open and close lifecycle handling.
• Use @defer to lazy-load the comments section on this Angular article page.

What to expect from the output

The guide's examples are fragments, not complete files. Before compiling, the agent needs to import the Angular core, forms, CDK or RxJS symbols it uses and inject the application's own store, service, toast or router dependencies. Child templates must declare every bound input and required title.

The guide also notes that @defer handles code loading only, not a child component's HTTP request or error lifecycle. Background refetches may keep existing data on screen with a non-blocking refresh or error banner. Optimistic writes should be used only when rollback and concurrency behaviour is safe.

• Expect fragments that you must wire into your own app's imports and services
• Check that child components receive all required inputs
• Review optimistic updates for rollback and concurrency safety

Safety, requirements and limits

The skill lists no requirements. It does not run scripts and does not use the network, according to its listing. It is a set of instructions, so the agent reads files and writes code, and you decide what to keep.

The skill's limitations say its output is not a substitute for environment-specific validation, testing or expert review. Test any component against your own API, data and browsers before shipping it. The skill also says the agent should stop and ask for clarification if inputs, permissions or success criteria are missing.

• Requires: nothing listed
• Runs scripts: no
• Uses network: no
• Always test generated components in your own environment