Skills angular-component
📦

angular-component

Content revision r2 Safe ⚙️ External commands🌐 Network access

Build Modern Angular Components

Modern Angular component APIs can be difficult to apply consistently across a project. This skill provides focused patterns for standalone, signal-based, accessible components.

Supports: Claude Codex Code(CC)
📊 74 Adequate

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
Review the Skillstore skill "angular-component" from https://skillstore.io/skills/analogjs-angular-component.md and its manifest at https://skillstore.io/api/skills/analogjs-angular-component/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/analogjs-angular-component.md Signed manifest GET /api/skills/analogjs-angular-component/manifest Signed lockfile GET /api/skills/analogjs-angular-component/lockfile

Test it

Using "angular-component". Create a signal-based user card with selection events.

Expected outcome:

  • Standalone component plan with required name input, optional email input, computed avatar URL, and typed selection output.
  • OnPush host bindings and native conditional template flow.
  • Accessibility notes for image alternatives, keyboard behavior, and focus handling.

Using "angular-component". Modernize a component that uses decorator inputs and structural directives.

Expected outcome:

  • Migration summary mapping each decorator input and output to a signal API.
  • Updated template approach using native conditional and loop control flow.
  • Compatibility notes covering aliases, transforms, and parent bindings.

Using "angular-component". Plan an accessible projected tab system.

Expected outcome:

  • Component responsibilities for the tab list, tab controls, and projected panels.
  • Signal-based selection and content query strategy.
  • Keyboard, ARIA, lazy loading, and test requirements.

Security Audit

Safe
v5 • 7/23/2026 Open versioned report

All 48 static findings are false positives caused by Markdown backticks, Angular template literals, a CSS selector, and an in-memory array filter. The placeholder URL is not requested, and no command execution, reconnaissance, exfiltration, or prompt injection is present.

2
Files scanned
648
Lines analyzed
0
Review items
0
False positives ignored

Risk Factors

⚙️ External commands (45)
references/component-patterns.md:31-46 references/component-patterns.md:69-83 references/component-patterns.md:108-136 references/component-patterns.md:136-146 references/component-patterns.md:158-175 references/component-patterns.md:184-197 references/component-patterns.md:205-217 references/component-patterns.md:217-224 references/component-patterns.md:249-260 references/component-patterns.md:260-264 references/component-patterns.md:282-287 references/component-patterns.md:306-311 references/component-patterns.md:329-332 references/component-patterns.md:348-358 SKILL.md:8 SKILL.md:12-23 SKILL.md:29-30 SKILL.md:33-47 SKILL.md:47-56 SKILL.md:56-60 SKILL.md:60-76 SKILL.md:76-80 SKILL.md:80-97 SKILL.md:97-101 SKILL.md:101 SKILL.md:103-126 SKILL.md:126-141 SKILL.md:141-145 SKILL.md:145-148 SKILL.md:158-168 SKILL.md:168-172 SKILL.md:172-190 SKILL.md:190-201 SKILL.md:201-213 SKILL.md:213-224 SKILL.md:224-228 SKILL.md:228 SKILL.md:230-253 SKILL.md:253-257 SKILL.md:257 SKILL.md:259-267 SKILL.md:267-271 SKILL.md:271-273 SKILL.md:273-278 SKILL.md:281-286
🌐 Network access (1)
SKILL.md:47
No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.
Audited by: codex View Audit History →
Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report
Security Assessment

Copy report link

https://skillstore.io/skills/analogjs-angular-component/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/analogjs-angular-component/security.svg)](https://skillstore.io/skills/analogjs-angular-component?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/analogjs-angular-component?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/analogjs-angular-component/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/analogjs-angular-component.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
Academic citations (APA · BibTeX · CFF)

APA citation

analogjs. (2026). angular-component security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/analogjs-angular-component/audits/5

BibTeX citation

@techreport{analogjs-analogjs-angular-component-2026, author = {analogjs}, title = {angular-component security audit report (audit version 5)}, institution = {Skillstore}, year = {2026}, number = {5}, url = {https://skillstore.io/skills/analogjs-angular-component/audits/5}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "angular-component security audit report (audit version 5)" version: "unspecified" type: report authors: - name: "analogjs" date-released: "2026-07-23" url: "https://skillstore.io/skills/analogjs-angular-component/audits/5" identifiers: - type: other value: "skillstore:analogjs-angular-component:audit:5" description: "Skillstore immutable audit report identifier"

Skillstore Score

Why this score Evidence Confidence: High
41
Architecture
85
Maintainability
87
Content
69
Community
83
Spec Compliance

What You Can Build

Create a New Component

Generate a standalone component with signal inputs, typed outputs, OnPush change detection, and modern template syntax.

Modernize Legacy Components

Replace decorator inputs, legacy structural directives, and host decorators with current Angular patterns while preserving behavior.

Build Accessible UI Primitives

Design reusable toggles, tabs, cards, and buttons with keyboard interaction, ARIA state, and content projection.

Try These Prompts

Create a Basic Component 
Create a standalone Angular v20+ user badge component. Use OnPush and signal inputs for name, avatar, and optional status. Explain the structure.
Refactor to Signal APIs 
Refactor the supplied Angular component from @Input and @Output decorators to signal APIs. Preserve behavior, aliases, validation, and public template bindings.
Design an Accessible Toggle 
Design an accessible toggle using host metadata, keyboard support, visible focus, ARIA state, and a two-way model input. Include usage guidance.
Architect Projected Tabs 
Build a tab system with content queries, projected panels, lazy content, and signal-based selection. Define boundaries, accessibility behavior, and test cases.

Best Practices

  • Provide the Angular version, existing component contract, and project conventions.
  • Request preserved public bindings when refactoring an established component.
  • Validate generated components with builds, tests, AXE checks, and keyboard review.

Avoid

  • Do not add standalone: true when the target project uses Angular v20+ defaults.
  • Do not replace native controls with custom roles unless the interaction requires it.
  • Do not claim accessibility compliance without automated and manual validation.

Frequently Asked Questions

Which Angular versions does this skill target?
It targets Angular v20+ and current standalone component conventions.
Can it convert decorator inputs and outputs?
Yes. It can guide migration to signal inputs, outputs, models, transforms, and aliases while preserving public bindings.
Does it create NgModule declarations?
No. It focuses on standalone components and direct component imports.
Does it support accessible interactive components?
Yes. It provides ARIA, keyboard, focus, and semantic control patterns that still require testing.
Can it run builds or accessibility scans?
No. The host agent must run project commands and external validation tools when requested.
What project context should I provide?
Provide the Angular version, component API, styling approach, test framework, and relevant repository conventions.

Developer Details

Author

analogjs

License

MIT

Skillstore revision

r2

Version notice

The author did not declare a version.

Repository

https://github.com/analogjs/angular-skills/tree/main/skills/angular-component/

Ref

89edfdc710d0846129dcee6a929477b04f08052c

Maintenance freshness

7/24/2026

Usage

5 downloads · 116 views

File structure

📁 references/

📄 component-patterns.md

📄 SKILL.md