Skills
.Work. You
Rest

vendix-frontend-component

Community

Enforce consistent Angular component structures.

Software Engineering#frontend#angular#component#best-practices#standalone#folder-structure
AuthorRzyfront
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill codifies a folder-based Angular component pattern to standardize project structure and component discovery.

Core Features & Use Cases

  • Folder-per-component: Every component lives in its own folder containing the component files.
  • Standardized naming: Follows kebab-case for folders and files, PascalCase for class names, and app- prefixed selectors.
  • Guidance for patterns: Covers standard, standalone component, and module-based structures with examples.

Quick Start

Create a new component folder following the standard structure, for example a folder named button/ containing button.component.ts, button.component.html, and button.component.scss. Follow the naming rules:

  • Folder: kebab-case (e.g., button/)
  • Files: kebab-case with suffix (e.g., button.component.ts)
  • Class: PascalCase (e.g., ButtonComponent)
  • Selector: kebab-case with app- prefix (e.g., app-button) A sample structure: button/ ├── button.component.ts ├── button.component.html └── button.component.scss

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: vendix-frontend-component
Download link: https://github.com/Rzyfront/Vendix/archive/main.zip#vendix-frontend-component

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.