Angular Architect
技能 已验证 活跃Generates Angular 17+ standalone components, configures advanced routing with lazy loading and guards, implements NgRx state management, applies RxJS patterns, and optimizes bundle performance. Use when building Angular 17+ applications with standalone components or signals, setting up NgRx stores, establishing RxJS reactive patterns, performance tuning, or writing Angular tests for enterprise apps.
To act as a senior Angular architect, guiding the implementation of modern Angular applications with best practices for components, state, routing, and performance.
功能
- Generates Angular 17+ standalone components and signals.
- Configures advanced routing with lazy loading and guards.
- Implements NgRx state management.
- Applies RxJS patterns and error handling.
- Optimizes bundle performance and tests enterprise applications.
使用场景
- Building new Angular 17+ applications with standalone components or signals.
- Setting up NgRx stores and managing state effectively.
- Establishing robust RxJS reactive patterns and error handling.
- Performance tuning and optimization of Angular applications.
- Writing comprehensive unit and integration tests for enterprise apps.
非目标
- Using NgModule-based components (except for compatibility).
- Forgetting to unsubscribe from observables or using async operations without error handling.
- Skipping accessibility attributes or exposing sensitive data in client-side code.
- Using 'any' type without justification or mutating state directly in NgRx.
工作流
- Analyze requirements for components, state, and routing.
- Design architecture focusing on standalone components, signals, and state flow.
- Implement features using OnPush strategy and reactive patterns.
- Setup NgRx store, effects, and selectors, verifying store hydration.
- Optimize performance and bundle size, verifying production builds.
- Write unit and integration tests aiming for >85% coverage.
实践
- Component Design
- State Management
- Reactive Programming
- Routing
- Performance Optimization
- Testing Strategies
先决条件
- Angular 17+ environment
- Node.js and npm/yarn/pnpm
- IDE with TypeScript support (e.g., VS Code)
安装
请先添加 Marketplace
/plugin marketplace add jeffallan/claude-skills/plugin install claude-skills@fullstack-dev-skills质量评分
已验证类似扩展
Angular Developer
100生成 Angular 代码并提供架构指导。在创建项目、组件或服务时触发，或针对响应式（signals, linkedSignal, resource）、表单、依赖注入、路由、SSR、可访问性（ARIA）、动画、样式（组件样式, Tailwind CSS）、测试或 CLI 工具的最佳实践。
Testing Clickup Cli
100运行和管理 clickup-cli 的测试。涵盖单元测试、针对真实 ClickUp 工作区的端到端测试以及测试数据设置。在运行测试、添加测试覆盖率、调试测试失败或设置测试夹具时使用。
Playwright Best Practices
100用于编写 Playwright 测试、修复不稳定测试、调试失败、实现页面对象模型 (Page Object Model)、配置 CI/CD、优化性能、模拟 API、处理身份验证或 OAuth、测试可访问性 (axe-core)、文件上传/下载、日期/时间模拟、WebSockets、地理定位、权限、多标签/弹出窗口流程、移动/响应式布局、触摸手势、GraphQL、错误处理、离线模式、多人协作、第三方服务（付款、电子邮件验证）、控制台错误监控、全局设置/拆卸、测试注解（skip, fixme, slow）、测试标签（@smoke, @fast, @critical, 使用 --grep 过滤）、项目依赖项、安全测试（XSS, CSRF, 身份验证）、性能预算（Web Vitals, Lighthouse）、iframe、组件测试、canvas/WebGL、服务工作线程/PWA、测试覆盖率、i18n/本地化、Electron 应用或浏览器扩展测试。涵盖 E2E、组件、API、视觉、可访问性、安全、Electron 和扩展测试。
Senior Backend Engineer
100Designs and implements backend systems including REST APIs, microservices, database architectures, authentication flows, and security hardening. Use when the user asks to "design REST APIs", "optimize database queries", "implement authentication", "build microservices", "review backend code", "set up GraphQL", "handle database migrations", or "load test APIs". Covers Node.js/Express/Fastify development, PostgreSQL optimization, API security, and backend architecture patterns.
Ui Ux Pro Max
100UI/UX design intelligence with searchable style, palette, typography, and chart databases. Use when designing UI components, choosing colors/fonts, reviewing code for UX issues, building landing pages, or implementing responsive layouts.
Fixing Accessibility
100审计和修复 HTML 可访问性问题，包括 ARIA 标签、键盘导航、焦点管理、颜色对比度和表单错误。在添加交互式控件、表单、对话框或审查 WCAG 合规性时使用。