skills.rest
bittlinkm
bittlinkmCOMMUNITY
Explore all skills by this author →
GitHub

angular-webapp-conventions

Documents the actual coding conventions of one specific Angular webapp codebase.

Updated Aug 20, 2026
Search Tags:#angular#supabase#signals#conventions#scss#reactive forms#vertical slice
One-click install
npx skills add https://github.com/bittlinkm/claude-setup --skill angular-webapp-conventions-bittlinkm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-webapp-conventions
Source: https://github.com/bittlinkm/claude-setup/tree/main/skills/angular-webapp-conventions
Command: npx skills add https://github.com/bittlinkm/claude-setup --skill angular-webapp-conventions-bittlinkm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? When writing or extending code in the angular-webapp-template project, generic Angular best practices often conflict with what the codebase actually does — leading to inconsistent components, wrong DI patterns, and mismatched styling. This Skill captures the repo's real conventions (including its known inconsistencies) so generated code matches sibling files instead of textbook Angular. ## Core Features & Use Cases - Architecture guidance: Vertical Slice project structure, standalone components, inject()-only DI, signal-based stores, and the three-piece data-access token pattern for Supabase-backed features. - Cross-cutting rules: Reactive Forms without FormBuilder, Transloco i18n usage, RxJS conventions with takeUntilDestroyed and toSignal, and @if/@for template control flow. - Styling conventions: BEM-via-Sass naming, is-* state classes, --mat-sys-* design tokens, and the global styles.scss duplication pattern for Material overlay content. - Use Case: When asked to add a new CRUD feature to the project, follow the documented token pattern (InjectionToken + interface, Supabase implementation, binding in app.config.ts) plus a signal-based store service, matching how existing features like sights are built. ## Quick Start Use the angular-webapp-conventions skill to create a new feature page with a signal-based store and Supabase data-access layer in this project.

Frequently Asked Questions about angular-webapp-conventions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new feature to an Angular project using vertical slice architecture?▼

Create a features/<feature>/ folder containing pages/, services/, data-access/, models/, enums/, and routes/ subfolders, keeping everything the feature needs inside its own slice. Add a lazy-loaded routes file and wire it into the root Routes array with loadChildren.

How do I build Angular reactive forms without FormBuilder?▼

Construct forms directly with new FormGroup({...}) and new FormControl(...), typing controls generically where useful. Compose validators from a configurable defaultValidator factory and bridge form status to a signal via toSignal instead of reading form.valid in templates.

Should I use signals or RxJS for Angular state management?▼

In this codebase, state lives in a providedIn: 'root' service holding a private writable signal exposed via asReadonly() or computed(), with no NgRx. RxJS is reserved for router and form streams, bridged into signals with toSignal() and cleaned up with takeUntilDestroyed.

Does this skill apply to any Angular project?▼

No. It documents one specific repository's conventions, including its inconsistencies, and explicitly should not be used for other Angular projects or generic Angular questions. Verify applicability by checking for provideZonelessChangeDetection() in app.config.ts and a Supabase client service.

Why does my Angular Material dialog styling not apply from the component SCSS file?▼

Content rendered into the CDK overlay container (mat-menu, mat-dialog, mat-select panels) attaches to <body>, outside component style encapsulation. The convention here is to duplicate those class rules into the global src/styles.scss in addition to the component file.

What testing conventions exist in this Angular codebase?▼

None — there are zero .spec.ts files despite Karma/Jasmine being configured. If tests are requested, default to standard TestBed/Jasmine idioms, flag that it is the first spec in the repo, and use the data-access token pattern as the mocking seam.

Related Skills

Explore More Software Engineering Skills→
mauriciodelriomauriciodelrio
3

code-quality-rules

Configure ESLint, Prettier, or Biome with strict linting rules for React projects.

Community
Advanced
craft-tscraft-ts
3

migrate-to-craft-ts

Migrates Angular applications to @craft-ts/core using the craft-migrate codemod and manual diagnostics.

Community
Advanced
WesleySmitsWesleySmits
6

enforcing-code-linting

Lint and fix changed files in JavaScript/TypeScript pull requests with ESLint, Prettier, and stylelint.

Community
Advanced
JaiminVadadoriyaJaiminVadadoriya
1

zoneless-angular

Implement zoneless change detection in Angular 21+ applications using Angular Signals.

Community
Intermediate