skills.rest
Rzyfront
RzyfrontCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vendix-frontend-component

Codify folder-based Angular component patterns with standardized naming conventions.

5|Updated Aug 23, 2025
Search Tags:#frontend#angular#component#best-practices#standalone#folder-structure
One-click install
npx skills add https://github.com/Rzyfront/Vendix --skill vendix-frontend-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vendix-frontend-component
Source: https://github.com/Rzyfront/Vendix/tree/main/skills/vendix-frontend-component
Command: npx skills add https://github.com/Rzyfront/Vendix --skill vendix-frontend-component

SYSTEM DOCUMENTATION & REQUIREMENTS

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

Frequently Asked Questions about vendix-frontend-component

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

FAQPage Schema
What is the best way to organize Angular component folders and files?▼

The best way to structure Angular components is a folder-per-component pattern, placing each component in its own directory with its TypeScript, HTML, and SCSS files.

How do I name Angular component files, classes, and selectors consistently?▼

You name Angular components by using kebab-case for folders and files, PascalCase for class names, and app- prefixed kebab-case for selectors.

Does this Angular component structure work for both standalone and module-based components?▼

Yes, this folder-based Angular component pattern applies to both standalone and module-based components across small and large codebases.

How do I set up a standard Angular component folder step by step?▼

To set up an Angular component folder, create a kebab-case directory like button/, then add button.component.ts, button.component.html, and button.component.scss inside it.

When do I need a standardized folder structure for Angular components?▼

You need a standardized Angular component folder structure when you want to standardize project organization and simplify component discovery across your codebase.

Related Skills

Explore More Software Engineering Skills→
jamesscalescodejamesscalescode

claude-dev-toolkit

Scaffold Angular applications and generate components, services, modules, guards, and interceptors.

Community
Advanced
NachoOsellaNachoOsella
6

angular-expert

Implement Angular v17+ Signals, Hydration, Standalone Components with Jest and Playwright testing workflows.

Community
Advanced
TechyMTTechyMT
5

naming-conventions

Enforces naming conventions for files and identifiers in TypeScript and React projects.

Community
Basic
Faouzi91Faouzi91

angular-feature

Generate Angular feature modules with routes, components, services, and models.

Community
Intermediate