Agent skill
new-component
Scaffold a new Angular component with test file following project conventions. Use when creating new components, widgets, or UI elements.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/testing/new-component-alysson-souza-hnews
SKILL.md
New Component Skill
Generate Angular standalone components following hnews project patterns.
File Structure
Create two files:
src/app/components/{component-name}/{component-name}.component.tssrc/app/components/{component-name}/{component-name}.component.spec.ts
For shared/reusable widgets, use src/app/components/shared/{component-name}/.
Component Template
typescript
// SPDX-License-Identifier: MIT
// Copyright (C) 2025 Alysson Souza
import { Component, ChangeDetectionStrategy, input, output } from '@angular/core';
@Component({
selector: 'app-{component-name}',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [],
template: `
<!-- Template here -->
`,
styles: [
`
@reference '../../../styles.css';
:host {
@apply contents;
}
`,
],
})
export class {ComponentName}Component {
// Use signal-based inputs/outputs
readonly someInput = input<string>('');
readonly someOutput = output<void>();
}
Test Template
typescript
// SPDX-License-Identifier: MIT
// Copyright (C) 2025 Alysson Souza
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { {ComponentName}Component } from './{component-name}.component';
describe('{ComponentName}Component', () => {
let component: {ComponentName}Component;
let fixture: ComponentFixture<{ComponentName}Component>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [{ComponentName}Component],
}).compileComponents();
fixture = TestBed.createComponent({ComponentName}Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
// Set inputs using fixture.componentRef.setInput('inputName', value)
});
Key Conventions
- No
standalone: true— It's the default in Angular 20+ - Use
ChangeDetectionStrategy.OnPushalways - Signal-based APIs: Use
input(),output(),viewChild()instead of decorators - Styles reference: Use
@reference '../../../styles.css';(adjust path depth) - Tailwind: Use
@applyfor component styles - Dark mode: Include
.dark:variants for colors - Selector prefix: Always
app-(kebab-case) - Class suffix:
{Name}Component
After Creation
Run ng test --include src/app/components/{component-name}/{component-name}.component.spec.ts to verify.
Didn't find tool you were looking for?