[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JCN615YVMPJB1T50JT325P":3,"skill-same:01M6JCN615YVMPJB1T50JT325P":218},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":27,"publishedAt":48,"linkOnly":49,"markdownContent":50,"markdownBody":51,"frontMatter":52,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":57,"repositoryHtmlUrl":58,"repositoryHomepageUrl":59,"ownerHtmlUrl":60,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":61,"install":62,"resources":75},"01M6JCN615YVMPJB1T50JT325P","angular-developer",null,"Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.","S3YED\u002Fappie-kit","S3YED","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F62743867?v=4","01M6JBKBRRVP6KMS0VWZ27T3R6","01M6JBKBX0KG30284PW1DBYJT1",14,"MIT","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47],"angular developer","developer","angular","Tailwind","for","dependency injection","signals","forms","aria","styling","dependency","projects","testing","injection","code","ssr","component","components","css","cli","2026-11-10 10:12:30",false,"---\nname: angular-developer\ndescription: Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.\norigin: ECC\n---\n\n# Angular Developer Guidelines\n\n## When to Activate\n\n- Working in any Angular project or codebase\n- Creating or scaffolding a new Angular project, application, or library\n- Generating components, services, directives, pipes, guards, or resolvers\n- Implementing reactivity with Angular Signals, `linkedSignal`, or `resource`\n- Working with Angular forms (signal forms, reactive forms, or template-driven)\n- Setting up dependency injection, routing, lazy loading, or route guards\n- Adding accessibility (ARIA), animations, or component styling\n- Writing or debugging Angular-specific tests (unit, component harness, E2E)\n- Configuring Angular CLI tooling or the Angular MCP server\n\n1. Always analyze the project's Angular version before providing guidance, as best practices and available features can vary significantly between versions. If creating a new project with Angular CLI, do not specify a version unless prompted by the user.\n\n2. When generating code, follow Angular's style guide and best practices for maintainability and performance. Use the Angular CLI for scaffolding components, services, directives, pipes, and routes to ensure consistency.\n\n3. Once you finish generating code, run `ng build` to ensure there are no build errors. If there are errors, analyze the error messages and fix them before proceeding. Do not skip this step, as it is critical for ensuring the generated code is correct and functional.\n\n## Creating New Projects\n\nIf no guidelines are provided by the user, use these defaults when creating a new Angular project:\n\n1. Use the latest stable version of Angular unless the user specifies otherwise.\n2. Prefer Signal Forms for new projects only when the target Angular version supports them. [Find out more](references\u002Fsignal-forms.md).\n\n**Execution Rules for `ng new`:**\nWhen asked to create a new Angular project, you must determine the correct execution command by following these strict steps:\n\n**Step 1: Check for an explicit user version.**\n\n- **IF** the user requests a specific version (e.g., Angular 15), bypass local installations and strictly use `npx`.\n- **Command:** `npx @angular\u002Fcli@\u003Crequested_version> new \u003Cproject-name>`\n\n**Step 2: Check for an existing Angular installation.**\n\n- **IF** no specific version is requested, run `ng version` in the terminal to check if the Angular CLI is already installed on the system.\n- **IF** the command succeeds and returns an installed version, use the local\u002Fglobal installation directly.\n- **Command:** `ng new \u003Cproject-name>`\n\n**Step 3: Fallback to Latest.**\n\n- **IF** no specific version is requested AND the `ng version` command fails (indicating no Angular installation exists), you must use `npx` to fetch the latest version.\n- **Command:** `npx @angular\u002Fcli@latest new \u003Cproject-name>`\n\n## Components\n\nWhen working with Angular components, consult the following references based on the task:\n\n- **Fundamentals**: Anatomy, metadata, core concepts, and template control flow (@if, @for, @switch). Read [components.md](references\u002Fcomponents.md)\n- **Inputs**: Signal-based inputs, transforms, and model inputs. Read [inputs.md](references\u002Finputs.md)\n- **Outputs**: Signal-based outputs and custom event best practices. Read [outputs.md](references\u002Foutputs.md)\n- **Host Elements**: Host bindings and attribute injection. Read [host-elements.md](references\u002Fhost-elements.md)\n\nIf you require deeper documentation not found in the references above, read the documentation at `https:\u002F\u002Fangular.dev\u002Fguide\u002Fcomponents`.\n\n## Reactivity and Data Management\n\nWhen managing state and data reactivity, use Angular Signals and consult the following references:\n\n- **Signals Overview**: Core signal concepts (`signal`, `computed`), reactive contexts, and `untracked`. Read [signals-overview.md](references\u002Fsignals-overview.md)\n- **Dependent State (`linkedSignal`)**: Creating writable state linked to source signals. Read [linked-signal.md](references\u002Flinked-signal.md)\n- **Async Reactivity (`resource`)**: Fetching asynchronous data directly into signal state. Read [resource.md](references\u002Fresource.md)\n- **Side Effects (`effect`)**: Logging, third-party DOM manipulation (`afterRenderEffect`), and when NOT to use effects. Read [effects.md](references\u002Feffects.md)\n\n## Forms\n\nIn most cases for new apps, **prefer signal forms**. When making a forms decision, analyze the project and consider the following guidelines:\n\n- If the application version supports Signal Forms and this is a new form, **prefer signal forms**.\n- For older applications or existing forms, match the application's current form strategy.\n\n- **Signal Forms**: Use signals for form state management. Read [signal-forms.md](references\u002Fsignal-forms.md)\n- **Template-driven forms**: Use for simple forms. Read [template-driven-forms.md](references\u002Ftemplate-driven-forms.md)\n- **Reactive forms**: Use for complex forms. Read [reactive-forms.md](references\u002Freactive-forms.md)\n\n## Dependency Injection\n\nWhen implementing dependency injection in Angular, follow these guidelines:\n\n- **Fundamentals**: Overview of Dependency Injection, services, and the `inject()` function. Read [di-fundamentals.md](references\u002Fdi-fundamentals.md)\n- **Creating and Using Services**: Creating services, the `providedIn: 'root'` option, and injecting into components or other services. Read [creating-services.md](references\u002Fcreating-services.md)\n- **Defining Dependency Providers**: Automatic vs manual provision, `InjectionToken`, `useClass`, `useValue`, `useFactory`, and scopes. Read [defining-providers.md](references\u002Fdefining-providers.md)\n- **Injection Context**: Where `inject()` is allowed, `runInInjectionContext`, and `assertInInjectionContext`. Read [injection-context.md](references\u002Finjection-context.md)\n- **Hierarchical Injectors**: The `EnvironmentInjector` vs `ElementInjector`, resolution rules, modifiers (`optional`, `skipSelf`), and `providers` vs `viewProviders`. Read [hierarchical-injectors.md](references\u002Fhierarchical-injectors.md)\n\n## Angular Aria\n\nWhen building accessible custom components for any of the following patterns: Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid, consult the following reference:\n\n- **Angular Aria Components**: Building headless, accessible components (Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid) and styling ARIA attributes. Read [angular-aria.md](references\u002Fangular-aria.md)\n\n## Routing\n\nWhen implementing navigation in Angular, consult the following references:\n\n- **Define Routes**: URL paths, static vs dynamic segments, wildcards, and redirects. Read [define-routes.md](references\u002Fdefine-routes.md)\n- **Route Loading Strategies**: Eager vs lazy loading, and context-aware loading. Read [loading-strategies.md](references\u002Floading-strategies.md)\n- **Show Routes with Outlets**: Using `\u003Crouter-outlet>`, nested outlets, and named outlets. Read [show-routes-with-outlets.md](references\u002Fshow-routes-with-outlets.md)\n- **Navigate to Routes**: Declarative navigation with `RouterLink` and programmatic navigation with `Router`. Read [navigate-to-routes.md](references\u002Fnavigate-to-routes.md)\n- **Control Route Access with Guards**: Implementing `CanActivate`, `CanMatch`, and other guards for security. Read [route-guards.md](references\u002Froute-guards.md)\n- **Data Resolvers**: Pre-fetching data before route activation with `ResolveFn`. Read [data-resolvers.md](references\u002Fdata-resolvers.md)\n- **Router Lifecycle and Events**: Chronological order of navigation events and debugging. Read [router-lifecycle.md](references\u002Frouter-lifecycle.md)\n- **Rendering Strategies**: CSR, SSG (Prerendering), and SSR with hydration. Read [rendering-strategies.md](references\u002Frendering-strategies.md)\n- **Route Transition Animations**: Enabling and customizing the View Transitions API. Read [route-animations.md](references\u002Froute-animations.md)\n\nIf you require deeper documentation or more context, visit the [official Angular Routing guide](https:\u002F\u002Fangular.dev\u002Fguide\u002Frouting).\n\n## Styling and Animations\n\nWhen implementing styling and animations in Angular, consult the following references:\n\n- **Using Tailwind CSS with Angular**: Integrating Tailwind CSS into Angular projects. Read [tailwind-css.md](references\u002Ftailwind-css.md)\n- **Angular Animations**: Using native CSS (recommended) or the legacy DSL for dynamic effects. Read [angular-animations.md](references\u002Fangular-animations.md)\n- **Styling components**: Best practices for component styles and encapsulation. Read [component-styling.md](references\u002Fcomponent-styling.md)\n\n## Testing\n\nWhen writing or updating tests, consult the following references based on the task:\n\n- **Fundamentals**: Best practices for unit testing, async patterns, and `TestBed`. Read [testing-fundamentals.md](references\u002Ftesting-fundamentals.md)\n- **Component Harnesses**: Standard patterns for robust component interaction. Read [component-harnesses.md](references\u002Fcomponent-harnesses.md)\n- **Router Testing**: Using `RouterTestingHarness` for reliable navigation tests. Read [router-testing.md](references\u002Frouter-testing.md)\n- **End-to-End (E2E) Testing**: Best practices for E2E tests with Cypress or Playwright. Read [e2e-testing.md](references\u002Fe2e-testing.md)\n\n## Tooling\n\nWhen working with Angular tooling, consult the following references:\n\n- **Angular CLI**: Creating applications, generating code (components, routes, services), serving, and building. Read [cli.md](references\u002Fcli.md)\n- **Angular MCP Server**: Available tools, configuration, and experimental features. Read [mcp.md](references\u002Fmcp.md)\n\n## Anti-Patterns\n\n- Using `null` or `undefined` as initial signal form field values — use `''`, `0`, or `[]` instead\n- Accessing form field state flags without calling the field first: `form.field.valid()` — use `form.field().valid()`\n- Starting new forms with older form APIs when the target Angular version supports Signal Forms\n- Setting `min`, `max`, `value`, `disabled`, or `readonly` HTML attributes on `[formField]` inputs — define these as schema rules instead\n- Calling `inject()` outside an injection context — use `runInInjectionContext` when needed\n- Using `effect()` for derived state that should use `computed()`\n- Referencing `$parent.$index` in nested `@for` loops — Angular does not support `$parent`; use `let outerIdx = $index` instead\n\n## Related Skills\n\n- `tdd-workflow` — test-driven development workflow applicable to Angular components and services\n- `security-review` — security checklist for web applications including Angular-specific concerns\n- `frontend-patterns` — general frontend patterns for context on React\u002FNext.js approaches\n","# Angular Developer Guidelines\n\n## When to Activate\n\n- Working in any Angular project or codebase\n- Creating or scaffolding a new Angular project, application, or library\n- Generating components, services, directives, pipes, guards, or resolvers\n- Implementing reactivity with Angular Signals, `linkedSignal`, or `resource`\n- Working with Angular forms (signal forms, reactive forms, or template-driven)\n- Setting up dependency injection, routing, lazy loading, or route guards\n- Adding accessibility (ARIA), animations, or component styling\n- Writing or debugging Angular-specific tests (unit, component harness, E2E)\n- Configuring Angular CLI tooling or the Angular MCP server\n\n1. Always analyze the project's Angular version before providing guidance, as best practices and available features can vary significantly between versions. If creating a new project with Angular CLI, do not specify a version unless prompted by the user.\n\n2. When generating code, follow Angular's style guide and best practices for maintainability and performance. Use the Angular CLI for scaffolding components, services, directives, pipes, and routes to ensure consistency.\n\n3. Once you finish generating code, run `ng build` to ensure there are no build errors. If there are errors, analyze the error messages and fix them before proceeding. Do not skip this step, as it is critical for ensuring the generated code is correct and functional.\n\n## Creating New Projects\n\nIf no guidelines are provided by the user, use these defaults when creating a new Angular project:\n\n1. Use the latest stable version of Angular unless the user specifies otherwise.\n2. Prefer Signal Forms for new projects only when the target Angular version supports them. [Find out more](references\u002Fsignal-forms.md).\n\n**Execution Rules for `ng new`:**\nWhen asked to create a new Angular project, you must determine the correct execution command by following these strict steps:\n\n**Step 1: Check for an explicit user version.**\n\n- **IF** the user requests a specific version (e.g., Angular 15), bypass local installations and strictly use `npx`.\n- **Command:** `npx @angular\u002Fcli@\u003Crequested_version> new \u003Cproject-name>`\n\n**Step 2: Check for an existing Angular installation.**\n\n- **IF** no specific version is requested, run `ng version` in the terminal to check if the Angular CLI is already installed on the system.\n- **IF** the command succeeds and returns an installed version, use the local\u002Fglobal installation directly.\n- **Command:** `ng new \u003Cproject-name>`\n\n**Step 3: Fallback to Latest.**\n\n- **IF** no specific version is requested AND the `ng version` command fails (indicating no Angular installation exists), you must use `npx` to fetch the latest version.\n- **Command:** `npx @angular\u002Fcli@latest new \u003Cproject-name>`\n\n## Components\n\nWhen working with Angular components, consult the following references based on the task:\n\n- **Fundamentals**: Anatomy, metadata, core concepts, and template control flow (@if, @for, @switch). Read [components.md](references\u002Fcomponents.md)\n- **Inputs**: Signal-based inputs, transforms, and model inputs. Read [inputs.md](references\u002Finputs.md)\n- **Outputs**: Signal-based outputs and custom event best practices. Read [outputs.md](references\u002Foutputs.md)\n- **Host Elements**: Host bindings and attribute injection. Read [host-elements.md](references\u002Fhost-elements.md)\n\nIf you require deeper documentation not found in the references above, read the documentation at `https:\u002F\u002Fangular.dev\u002Fguide\u002Fcomponents`.\n\n## Reactivity and Data Management\n\nWhen managing state and data reactivity, use Angular Signals and consult the following references:\n\n- **Signals Overview**: Core signal concepts (`signal`, `computed`), reactive contexts, and `untracked`. Read [signals-overview.md](references\u002Fsignals-overview.md)\n- **Dependent State (`linkedSignal`)**: Creating writable state linked to source signals. Read [linked-signal.md](references\u002Flinked-signal.md)\n- **Async Reactivity (`resource`)**: Fetching asynchronous data directly into signal state. Read [resource.md](references\u002Fresource.md)\n- **Side Effects (`effect`)**: Logging, third-party DOM manipulation (`afterRenderEffect`), and when NOT to use effects. Read [effects.md](references\u002Feffects.md)\n\n## Forms\n\nIn most cases for new apps, **prefer signal forms**. When making a forms decision, analyze the project and consider the following guidelines:\n\n- If the application version supports Signal Forms and this is a new form, **prefer signal forms**.\n- For older applications or existing forms, match the application's current form strategy.\n\n- **Signal Forms**: Use signals for form state management. Read [signal-forms.md](references\u002Fsignal-forms.md)\n- **Template-driven forms**: Use for simple forms. Read [template-driven-forms.md](references\u002Ftemplate-driven-forms.md)\n- **Reactive forms**: Use for complex forms. Read [reactive-forms.md](references\u002Freactive-forms.md)\n\n## Dependency Injection\n\nWhen implementing dependency injection in Angular, follow these guidelines:\n\n- **Fundamentals**: Overview of Dependency Injection, services, and the `inject()` function. Read [di-fundamentals.md](references\u002Fdi-fundamentals.md)\n- **Creating and Using Services**: Creating services, the `providedIn: 'root'` option, and injecting into components or other services. Read [creating-services.md](references\u002Fcreating-services.md)\n- **Defining Dependency Providers**: Automatic vs manual provision, `InjectionToken`, `useClass`, `useValue`, `useFactory`, and scopes. Read [defining-providers.md](references\u002Fdefining-providers.md)\n- **Injection Context**: Where `inject()` is allowed, `runInInjectionContext`, and `assertInInjectionContext`. Read [injection-context.md](references\u002Finjection-context.md)\n- **Hierarchical Injectors**: The `EnvironmentInjector` vs `ElementInjector`, resolution rules, modifiers (`optional`, `skipSelf`), and `providers` vs `viewProviders`. Read [hierarchical-injectors.md](references\u002Fhierarchical-injectors.md)\n\n## Angular Aria\n\nWhen building accessible custom components for any of the following patterns: Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid, consult the following reference:\n\n- **Angular Aria Components**: Building headless, accessible components (Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid) and styling ARIA attributes. Read [angular-aria.md](references\u002Fangular-aria.md)\n\n## Routing\n\nWhen implementing navigation in Angular, consult the following references:\n\n- **Define Routes**: URL paths, static vs dynamic segments, wildcards, and redirects. Read [define-routes.md](references\u002Fdefine-routes.md)\n- **Route Loading Strategies**: Eager vs lazy loading, and context-aware loading. Read [loading-strategies.md](references\u002Floading-strategies.md)\n- **Show Routes with Outlets**: Using `\u003Crouter-outlet>`, nested outlets, and named outlets. Read [show-routes-with-outlets.md](references\u002Fshow-routes-with-outlets.md)\n- **Navigate to Routes**: Declarative navigation with `RouterLink` and programmatic navigation with `Router`. Read [navigate-to-routes.md](references\u002Fnavigate-to-routes.md)\n- **Control Route Access with Guards**: Implementing `CanActivate`, `CanMatch`, and other guards for security. Read [route-guards.md](references\u002Froute-guards.md)\n- **Data Resolvers**: Pre-fetching data before route activation with `ResolveFn`. Read [data-resolvers.md](references\u002Fdata-resolvers.md)\n- **Router Lifecycle and Events**: Chronological order of navigation events and debugging. Read [router-lifecycle.md](references\u002Frouter-lifecycle.md)\n- **Rendering Strategies**: CSR, SSG (Prerendering), and SSR with hydration. Read [rendering-strategies.md](references\u002Frendering-strategies.md)\n- **Route Transition Animations**: Enabling and customizing the View Transitions API. Read [route-animations.md](references\u002Froute-animations.md)\n\nIf you require deeper documentation or more context, visit the [official Angular Routing guide](https:\u002F\u002Fangular.dev\u002Fguide\u002Frouting).\n\n## Styling and Animations\n\nWhen implementing styling and animations in Angular, consult the following references:\n\n- **Using Tailwind CSS with Angular**: Integrating Tailwind CSS into Angular projects. Read [tailwind-css.md](references\u002Ftailwind-css.md)\n- **Angular Animations**: Using native CSS (recommended) or the legacy DSL for dynamic effects. Read [angular-animations.md](references\u002Fangular-animations.md)\n- **Styling components**: Best practices for component styles and encapsulation. Read [component-styling.md](references\u002Fcomponent-styling.md)\n\n## Testing\n\nWhen writing or updating tests, consult the following references based on the task:\n\n- **Fundamentals**: Best practices for unit testing, async patterns, and `TestBed`. Read [testing-fundamentals.md](references\u002Ftesting-fundamentals.md)\n- **Component Harnesses**: Standard patterns for robust component interaction. Read [component-harnesses.md](references\u002Fcomponent-harnesses.md)\n- **Router Testing**: Using `RouterTestingHarness` for reliable navigation tests. Read [router-testing.md](references\u002Frouter-testing.md)\n- **End-to-End (E2E) Testing**: Best practices for E2E tests with Cypress or Playwright. Read [e2e-testing.md](references\u002Fe2e-testing.md)\n\n## Tooling\n\nWhen working with Angular tooling, consult the following references:\n\n- **Angular CLI**: Creating applications, generating code (components, routes, services), serving, and building. Read [cli.md](references\u002Fcli.md)\n- **Angular MCP Server**: Available tools, configuration, and experimental features. Read [mcp.md](references\u002Fmcp.md)\n\n## Anti-Patterns\n\n- Using `null` or `undefined` as initial signal form field values — use `''`, `0`, or `[]` instead\n- Accessing form field state flags without calling the field first: `form.field.valid()` — use `form.field().valid()`\n- Starting new forms with older form APIs when the target Angular version supports Signal Forms\n- Setting `min`, `max`, `value`, `disabled`, or `readonly` HTML attributes on `[formField]` inputs — define these as schema rules instead\n- Calling `inject()` outside an injection context — use `runInInjectionContext` when needed\n- Using `effect()` for derived state that should use `computed()`\n- Referencing `$parent.$index` in nested `@for` loops — Angular does not support `$parent`; use `let outerIdx = $index` instead\n\n## Related Skills\n\n- `tdd-workflow` — test-driven development workflow applicable to Angular components and services\n- `security-review` — security checklist for web applications including Angular-specific concerns\n- `frontend-patterns` — general frontend patterns for context on React\u002FNext.js approaches\n",{"name":5,"origin":53,"description":7},"ECC","master","8ec37df6d71fb664ea19d32c079e7d3ff931a8e0","skills\u002Fecc\u002Fangular-developer",3,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit","https:\u002F\u002Fweblyfe.ai","https:\u002F\u002Fgithub.com\u002FS3YED","2026-08-27 01:54:02",{"source":8,"skillName":5,"commands":63,"prompt":73,"zipAvailable":74},[64,67,70],{"tool":65,"command":66},"npx","npx skills add S3YED\u002Fappie-kit --skill angular-developer",{"tool":68,"command":69},"bunx","bunx skills add S3YED\u002Fappie-kit --skill angular-developer",{"tool":71,"command":72},"pnpm","pnpm dlx skills add S3YED\u002Fappie-kit --skill angular-developer","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002FSKILL.md",true,[76,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214],{"path":77,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002Fangular-animations.md","REFERENCE","参考文档",3955,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fangular-animations.md",{"path":83,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":84,"sourceHtmlUrl":85},"references\u002Fangular-aria.md",12642,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fangular-aria.md",{"path":87,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":88,"sourceHtmlUrl":89},"references\u002Fcli.md",3714,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fcli.md",{"path":91,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":92,"sourceHtmlUrl":93},"references\u002Fcomponent-harnesses.md",2903,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fcomponent-harnesses.md",{"path":95,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":96,"sourceHtmlUrl":97},"references\u002Fcomponent-styling.md",2531,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fcomponent-styling.md",{"path":99,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":100,"sourceHtmlUrl":101},"references\u002Fcomponents.md",3422,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fcomponents.md",{"path":103,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":104,"sourceHtmlUrl":105},"references\u002Fcreating-services.md",2700,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fcreating-services.md",{"path":107,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":108,"sourceHtmlUrl":109},"references\u002Fdata-resolvers.md",1587,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fdata-resolvers.md",{"path":111,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":112,"sourceHtmlUrl":113},"references\u002Fdefine-routes.md",1727,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fdefine-routes.md",{"path":115,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":116,"sourceHtmlUrl":117},"references\u002Fdefining-providers.md",2256,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fdefining-providers.md",{"path":119,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":120,"sourceHtmlUrl":121},"references\u002Fdi-fundamentals.md",3594,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fdi-fundamentals.md",{"path":123,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":124,"sourceHtmlUrl":125},"references\u002Fe2e-testing.md",1904,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fe2e-testing.md",{"path":127,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":128,"sourceHtmlUrl":129},"references\u002Feffects.md",2758,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Feffects.md",{"path":131,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":132,"sourceHtmlUrl":133},"references\u002Fhierarchical-injectors.md",2091,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fhierarchical-injectors.md",{"path":135,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":136,"sourceHtmlUrl":137},"references\u002Fhost-elements.md",2114,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fhost-elements.md",{"path":139,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":140,"sourceHtmlUrl":141},"references\u002Finjection-context.md",1927,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Finjection-context.md",{"path":143,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":144,"sourceHtmlUrl":145},"references\u002Finputs.md",2445,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Finputs.md",{"path":147,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":148,"sourceHtmlUrl":149},"references\u002Flinked-signal.md",2584,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Flinked-signal.md",{"path":151,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":152,"sourceHtmlUrl":153},"references\u002Floading-strategies.md",1457,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Floading-strategies.md",{"path":155,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":156,"sourceHtmlUrl":157},"references\u002Fmcp.md",4079,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fmcp.md",{"path":159,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":160,"sourceHtmlUrl":161},"references\u002Fnavigate-to-routes.md",1639,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fnavigate-to-routes.md",{"path":163,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":164,"sourceHtmlUrl":165},"references\u002Foutputs.md",2604,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Foutputs.md",{"path":167,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":168,"sourceHtmlUrl":169},"references\u002Freactive-forms.md",3561,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Freactive-forms.md",{"path":171,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":172,"sourceHtmlUrl":173},"references\u002Frendering-strategies.md",1828,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Frendering-strategies.md",{"path":175,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":176,"sourceHtmlUrl":177},"references\u002Fresource.md",2714,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fresource.md",{"path":179,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":180,"sourceHtmlUrl":181},"references\u002Froute-animations.md",1688,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Froute-animations.md",{"path":183,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":184,"sourceHtmlUrl":185},"references\u002Froute-guards.md",1397,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Froute-guards.md",{"path":187,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":188,"sourceHtmlUrl":189},"references\u002Frouter-lifecycle.md",1534,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Frouter-lifecycle.md",{"path":191,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":192,"sourceHtmlUrl":193},"references\u002Frouter-testing.md",3840,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Frouter-testing.md",{"path":195,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":196,"sourceHtmlUrl":197},"references\u002Fshow-routes-with-outlets.md",1672,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fshow-routes-with-outlets.md",{"path":199,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":200,"sourceHtmlUrl":201},"references\u002Fsignal-forms.md",24203,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fsignal-forms.md",{"path":203,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":204,"sourceHtmlUrl":205},"references\u002Fsignals-overview.md",2841,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Fsignals-overview.md",{"path":207,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":208,"sourceHtmlUrl":209},"references\u002Ftailwind-css.md",1868,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Ftailwind-css.md",{"path":211,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":212,"sourceHtmlUrl":213},"references\u002Ftemplate-driven-forms.md",3752,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Ftemplate-driven-forms.md",{"path":215,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":216,"sourceHtmlUrl":217},"references\u002Ftesting-fundamentals.md",2640,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fangular-developer\u002Freferences\u002Ftesting-fundamentals.md",[219,253,284,310,340,363],{"skillNo":220,"name":221,"nameZh":6,"description":222,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":223,"categories":224,"keywords":234,"publishedAt":48},"01M6JFD4M6N4DSGC7TXEJ5R3J2","ai-music","AI music generation and audio tools: HeartMuLa lyrics-to-music generation, songwriting craft (+ Suno prompts), and audio spectrogram\u002Ffeature visualization.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fwethlete\u002Fai-music\u002FSKILL.md",[225,228,231],{"categoryNo":226,"categoryName":227,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":229,"categoryName":230,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":232,"categoryName":233,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252],"music","ai music","humanizer","visualization","Tools","Audio","hermes","hermes agent","songwriting","suno","lyrics","prompts","heartmula","craft","generation","feature","ai music generation","music generation",{"skillNo":254,"name":255,"nameZh":6,"description":256,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":257,"categories":258,"keywords":265,"publishedAt":48},"01M6JFCZE4XNFQFMNZDHKHT5V5","agentic-webdesign-design-system-ingestion","Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-design-system-ingestion\u002FSKILL.md",[259,262],{"categoryNo":260,"categoryName":261,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":263,"categoryName":264,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000032","设计师",[266,267,268,269,270,271,272,45,273,274,275,276,31,277,278,279,280,281,282,283],"design","agentic","design system","system","ingestion","webdesign","agentic webdesign design system ingestion","generate","design systems","website","ui","bolt","lovable","v0","design-system","wed","design system components","appie",{"skillNo":285,"name":286,"nameZh":6,"description":287,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":288,"categories":289,"keywords":292,"publishedAt":48},"01M6JFCVPX3913CFAS6QQJ33ZB","agentic-webdesign-agent-elements","Use 21st.dev Agent Elements — 25 shadcn\u002Fui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-agent-elements\u002FSKILL.md",[290,291],{"categoryNo":232,"categoryName":233,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":263,"categoryName":264,"taxonomyType":25,"taxonomyTypeDesc":26},[267,293,271,294,295,296,45,297,298,299,300,301,302,303,304,305,306,307,308,309],"elements","agentic webdesign agent elements","MCP","ai agent","registry","search","streaming","open source","open","Bash","plan","subagent","edit","install","input","lock","source",{"skillNo":311,"name":312,"nameZh":6,"description":313,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":314,"categories":315,"keywords":320,"publishedAt":48},"01M6JFCQC7H65M9QJ6TRE71BS1","vercel-deployment","Deploy static sites and frontends to Vercel — handles both CLI and REST API paths, including the CLI token sanitization workaround.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fvercel-deployment\u002FSKILL.md",[316,319],{"categoryNo":317,"categoryName":318,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":232,"categoryName":233,"taxonomyType":20,"taxonomyTypeDesc":21},[321,322,323,324,47,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339],"deployment","vercel deployment","vercel","macos","linux","windows","deploy","vercel deploy","REST","api","site","deploy to vercel","token","rest api","host","sites","paths","sanitization","static site",{"skillNo":341,"name":342,"nameZh":6,"description":343,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":344,"categories":345,"keywords":347,"publishedAt":48},"01M6JFCM4SMTXBM5A01BK2YQG1","software-quality-workflows","Umbrella workflow for TDD, debugging, code simplification, spikes, pre-commit review, and debugger-assisted investigation.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fsoftware-quality-workflows\u002FSKILL.md",[346],{"categoryNo":232,"categoryName":233,"taxonomyType":20,"taxonomyTypeDesc":21},[348,349,350,351,352,353,354,355,356,42,357,358,359,360,361,362,32],"workflows","quality","software","software quality workflows","review","tdd","workflow","commit","debugging","debugger","pre-commit","investigation","code simplification","user","simplification",{"skillNo":364,"name":365,"nameZh":6,"description":366,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":367,"categories":368,"keywords":376,"publishedAt":48},"01M6JFCGD0M6CEATY01W7YN6DB","react-component-refactoring","Safely refactor large React components into smaller, maintainable pieces using proven patterns","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Freact-component-refactoring\u002FSKILL.md",[369,372,375],{"categoryNo":370,"categoryName":371,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":373,"categoryName":374,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":232,"categoryName":233,"taxonomyType":20,"taxonomyTypeDesc":21},[377,44,378,379,380,381,382,383,324,384,385,45,386,326,387,42,388,389,390,391],"react","refactoring","component refactoring","react component","react component refactoring","frontend","writing","safe","typescript","react components","modular","refactor","simplify","patterns","test-driven-development"]