技能 angular-component
📦
angular-component
安全
建置 Angular Signal 元件
現代 Angular 元件需要 signal API、無障礙範本，以及目前的 standalone 模式。此技能可引導 Claude、Codex 和 Claude Code 一致地建立或重構 Angular v20+ 元件。
支援: Claude Codex Code(CC)
1
下載技能 ZIP
2
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
3
開啟並開始使用
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨上下文、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「angular-component」。 請求建立具備 name、email 和選取行為的 standalone 個人檔案卡片元件。
預期結果:
使用 signal inputs、型別化 output 事件、OnPush change detection、host classes 和無障礙圖片文字的元件計畫與實作大綱。
正在使用「angular-component」。 請求現代化較舊的 Angular 按鈕元件。
預期結果:
重構摘要，將 decorator inputs、HostBinding 和 ngClass 替換為 signal inputs、host metadata、直接類別繫結和鍵盤支援。
正在使用「angular-component」。 請求建立具備 projected tab content 的 tabs 元件。
預期結果:
使用 content queries、作用中 tab signal 狀態、ARIA roles、鍵盤導覽和清楚父子通訊的結構化元件設計。
安全審計
安全v2 • 6/28/2026
Static analysis reported many high and medium indicators, but review found they are false positives in Markdown documentation and TypeScript examples. The files do not define executable scripts, shell commands, credential access, data exfiltration, or prompt injection attempts, so the skill is safe to publish.
2
已掃描檔案
648
分析行數
4
發現項
2
審計總數
低風險問題 (4)
references/component-patterns.md:13references/component-patterns.md:15-23references/component-patterns.md:31-46references/component-patterns.md:46-50references/component-patterns.md:50-52references/component-patterns.md:52-58references/component-patterns.md:58-63references/component-patterns.md:69-83references/component-patterns.md:83-89references/component-patterns.md:89-94references/component-patterns.md:108-136references/component-patterns.md:136-146references/component-patterns.md:146-150references/component-patterns.md:150-152references/component-patterns.md:152-158references/component-patterns.md:158-175references/component-patterns.md:175-181references/component-patterns.md:181-184references/component-patterns.md:184-197references/component-patterns.md:197-201references/component-patterns.md:201-205references/component-patterns.md:205-217references/component-patterns.md:217-224references/component-patterns.md:224-228references/component-patterns.md:228-249references/component-patterns.md:249-260references/component-patterns.md:260-264references/component-patterns.md:264-268references/component-patterns.md:268-270references/component-patterns.md:270-272references/component-patterns.md:282-287references/component-patterns.md:287-290references/component-patterns.md:290-291references/component-patterns.md:291-292references/component-patterns.md:292-293references/component-patterns.md:293-294references/component-patterns.md:294-295references/component-patterns.md:295-296references/component-patterns.md:296-298references/component-patterns.md:298-300references/component-patterns.md:306-311references/component-patterns.md:311-315references/component-patterns.md:315-329references/component-patterns.md:329-332references/component-patterns.md:332-336references/component-patterns.md:336-339references/component-patterns.md:348-358SKILL.md:8SKILL.md:12-23SKILL.md:29-30SKILL.md:33-47SKILL.md:47-56SKILL.md:56-60SKILL.md:60-76SKILL.md:76-80SKILL.md:80-97SKILL.md:97-101SKILL.md:101SKILL.md:101SKILL.md:101SKILL.md:101-103SKILL.md:103-126SKILL.md:126-141SKILL.md:141-145SKILL.md:145-148SKILL.md:158-168SKILL.md:168-172SKILL.md:172-190SKILL.md:190-201SKILL.md:201-213SKILL.md:213-224SKILL.md:224-228SKILL.md:228SKILL.md:228SKILL.md:228-230SKILL.md:230-253SKILL.md:253-257SKILL.md:257SKILL.md:257-259SKILL.md:259-267SKILL.md:267-271SKILL.md:271-273SKILL.md:273-278SKILL.md:281-286
External Command Detections Are Documentation False Positives
FALSE POSITIVE: The reported Ruby or shell backtick matches occur in Markdown code fences, Angular examples, and TypeScript template literals. They are instructional snippets, not commands executed by the skill.
Hardcoded URL Is Example Component Data
FALSE POSITIVE: The URL at SKILL.md line 47 is an example avatar endpoint inside a computed Angular property. It does not perform a network request from the skill itself.
Weak Cryptography Alerts Are Token Matches
FALSE POSITIVE: The weak-cryptography alerts match ordinary Angular wording such as change detection and OnDestroy lifecycle examples. No cryptographic API or hash algorithm is used.
System Reconnaissance Alerts Are Benign Examples
FALSE POSITIVE: The system reconnaissance alerts point to CSS/template and data-model examples, not host inspection commands. No file, process, network, or environment enumeration is present.
審計者: codex 查看審計歷史 →
品質評分
41
架構
100
可維護性
87
內容
69
社群
97
安全
83
規範符合性
你能建構什麼
建立新的 UI 元件
產生具備 signal inputs、outputs、host bindings 和無障礙範本結構的 standalone 元件。
現代化既有元件
將較舊的 Angular 元件模式重構為 signals、原生控制流程，以及適合 OnPush 的狀態。
標準化團隊模式
在內容投影、queries、依賴注入和延遲渲染之間保持元件範例一致。
試試這些提示
建立基本元件
Create an Angular v20 standalone user card component with signal inputs for name, avatar URL, and active state. Include accessible markup and host bindings.
加入互動和 Outputs
Build an Angular standalone toggle component using signal inputs and outputs. Add host bindings for ARIA state, click handling, and keyboard activation.
重構為 Signal 模式
Refactor this Angular component from decorator inputs and outputs to signal input and output APIs. Use native control flow and avoid ngClass and ngStyle.
設計組合式元件系統
Design an Angular tabs component using content queries, projected tab panels, signal state, accessible roles, and current Angular v20 template syntax.
最佳實務
- 請在請求程式碼前提供目標 Angular 版本和既有元件慣例。
- 當元件具備互動性時，請要求無障礙行為。
- 請在你的專案建置與測試設定中審查產生的範例。
避免
- 不要將其用於非 Angular 框架或僅限舊版 Angular 的語法。
- 不要在未描述 inputs、outputs 和使用者互動的情況下請求產生元件。
- 不要跳過針對樣式、測試和依賴項限制的專案專屬審查。
常見問題
此技能的目標 Angular 版本是什麼？
它以 Angular v20+ standalone 元件模式和現代 signal API 為目標。
它可以建立完整的 Angular 應用程式嗎？
不會。它專注於元件模式、範本、繫結和元件通訊。
它會執行 Angular CLI 命令嗎？
不會。此技能提供指引和程式碼範例，但不會執行命令。
它支援無障礙需求嗎？
會。它強調 ARIA attributes、鍵盤導覽、焦點狀態和 WCAG AA 期望。
Claude Code 和 Codex 可以使用此技能嗎？
會。報告列出對 Claude、Codex 和 Claude Code 的支援。
為什麼靜態安全性警示被駁回？
它們符合 Markdown code fences、template literals、example URLs 和 Angular lifecycle names，而非可執行的高風險行為。