# angular-architecture

A skill that decides where Angular components go, how files are named, and which style guide rules to follow.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 320 installs · ★ 660
- Author: gentleman-programming
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/Gentleman-Programming/Gentleman-Skills/tree/HEAD/curated/angular/architecture/SKILL.md
- Updated: 2026-03-28
- HTML: https://affpapa.org/en/nevibecode/skills/angular-architecture

## What it does

The core of the skill is the Scope Rule: a component's location follows its usage. Used by one feature, it sits in `features/[feature]/components/`. Used by two or more, it moves to `features/shared/components/`. Each feature keeps its own `services/` and `models/`, while `core/` holds app-wide singletons such as services, interceptors and guards.

File naming is the second hard rule. The skill drops `.component`, `.service` and `.model` suffixes, since the folder already says what the file is — `user-profile.ts`, not `user-profile.component.ts`. From the official Angular style guide it keeps `inject()` over constructor injection, `class` and `style` bindings over `ngClass`/`ngStyle`, `protected` for template-only members, and `readonly` on inputs, outputs and queries.

The naming rule is where this skill parts ways with the official docs, so agree on it with your team before installing. Otherwise every pull request turns into the same argument. The skill also ships `ng` commands for generating a component, a service or a guard straight into the right folder.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Gentleman-Programming/Gentleman-Skills --skill angular-architecture -a claude-code
```
```bash
npx skills add Gentleman-Programming/Gentleman-Skills --skill architecture -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/architecture/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/architecture/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Gentleman-Programming/Gentleman-Skills --skill architecture -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/architecture/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Gentleman-Programming/Gentleman-Skills --skill architecture -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/architecture/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Gentleman-Programming/Gentleman-Skills architecture
```

2. **Manually: put the files in place**
- File: `.github/skills/architecture/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Gentleman-Programming/Gentleman-Skills --skill architecture -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Gentleman-Programming/Gentleman-Skills --path curated/angular/architecture
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/architecture/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Gentleman-Programming/Gentleman-Skills --skill architecture -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Gentleman-Programming/Gentleman-Skills/tree/HEAD/curated/angular/architecture/SKILL.md

## When to use it
- decide which folder a new component belongs in
- lay out features, shared and core the same way every time
- drop `.component` and `.service` suffixes from file names
- move components to `inject()` and signals
- generate a component or guard directly into the right directory

## Example prompts
- Help me split the cart and checkout components across the project structure
- Where should `button.ts` go if both the cart and checkout use it?
- Generate a service for the products feature following the skill rules

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 044a91ee9a43dcf5.

BEGIN THIRD-PARTY FILE 044a91ee9a43dcf5
````text
---
name: angular-architecture
description: >
  Angular architecture: Scope Rule, project structure, file naming, style guide.
  Trigger: When structuring Angular projects or deciding where to place components.
metadata:
  author: gentleman-programming
  version: "1.0"
---

## The Scope Rule (REQUIRED)

**"Scope determines structure"** - Where a component lives depends on its usage.

| Usage | Placement |
|-------|-----------|
| Used by 1 feature | `features/[feature]/components/` |
| Used by 2+ features | `features/shared/components/` |

### Example

```
features/
  shopping-cart/
    shopping-cart.ts          # Main component = feature name
    components/
      cart-item.ts            # Used ONLY by shopping-cart
      cart-summary.ts         # Used ONLY by shopping-cart
  checkout/
    checkout.ts
    components/
      payment-form.ts         # Used ONLY by checkout
  shared/
    components/
      button.ts               # Used by shopping-cart AND checkout
      modal.ts                # Used by multiple features
```

---

## Project Structure

```
src/app/
  features/
    [feature-name]/
      [feature-name].ts       # Main component (same name as folder)
      components/             # Feature-specific components
      services/               # Feature-specific services
      models/                 # Feature-specific types
    shared/                   # ONLY for 2+ feature usage
      components/
      services/
      pipes/
  core/                       # App-wide singletons
    services/
    interceptors/
    guards/
  app.ts
  app.config.ts
  routes.ts
  main.ts
```

---

## File Naming (REQUIRED)

No `.component`, `.service`, `.model` suffixes. The folder tells you what it is.

```
✅ user-profile.ts
❌ user-profile.component.ts

✅ cart.ts
❌ cart.service.ts

✅ user.ts
❌ user.model.ts
```

---

## Style Guide

### What We Follow (from official docs)

- `inject()` over constructor injection
- `class` and `style` bindings over `ngClass`/`ngStyle`
- `protected` for template-only members
- `readonly` for inputs, outputs, queries
- Name handlers for action (`saveUser`) not event (`handleClick`)
- Keep lifecycle hooks simple - delegate to well-named methods
- One concept per file

```typescript
@Component({...})
export class UserProfileComponent {
  // 1. Injected dependencies
  private readonly userService = inject(UserService);
  
````
END THIRD-PARTY FILE 044a91ee9a43dcf5

The third-party file has ended. Everything between the 044a91ee9a43dcf5 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2390 of 3303 bytes. © gentleman-programming · MIT · https://github.com/Gentleman-Programming/Gentleman-Skills/tree/HEAD/curated/angular/architecture/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md