skills.rest
devdavidalonso
devdavidalonsoCOMMUNITY
Explore all skills by this author →
GitHub

angular-frontend

Define Angular 17+ frontend standards with i18n and Material Design.

1|Updated Mar 10, 2025
Search Tags:#typescript#performance#frontend#angular#material design#i18n
One-click install
npx skills add https://github.com/devdavidalonso/cecor --skill angular-frontend-devdavidalonso
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-frontend
Source: https://github.com/devdavidalonso/cecor/tree/main/.agent/skills/angular-frontend
Command: npx skills add https://github.com/devdavidalonso/cecor --skill angular-frontend-devdavidalonso

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill establishes and enforces consistent technical and UI patterns for the Angular 17+ frontend of the CECOR project, ensuring maintainability, performance, and a cohesive user experience.

Core Features & Use Cases

  • Coding Standards: Enforces naming conventions, i18n for UI text, and consistent file structure.
  • Material Design: Promotes the use of Angular Material components for a unified look and feel.
  • Form Handling: Guides the implementation of reactive forms with best practices for validation and complexity management.
  • Performance Optimization: Provides guidelines for optimizing bundle size, lazy loading, and change detection.
  • Use Case: A new developer joins the CECOR project and needs to create a new component. This Skill provides the exact naming conventions, translation key structure, and component implementation template to ensure their work aligns with the project's standards.

Quick Start

Use the angular-frontend skill to create a new Angular component named 'user-profile' following the project's naming conventions and i18n standards.

Frequently Asked Questions about angular-frontend

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

FAQPage Schema
How do I implement i18n in Angular 17 using ngx-translate?▼

To implement i18n in Angular 17, use ngx-translate for UI labels and establish a consistent translation key structure. This ensures UI text remains maintainable and separate from component logic across the project.

What are the best practices for reactive forms in Angular 17?▼

Best practices for reactive forms include managing validation complexity and adhering to structured service patterns. Following these guidelines ensures robust form handling and consistent UX feedback mechanisms.

How do I optimize Angular performance with lazy loading and change detection?▼

Optimize Angular performance by applying guidelines for bundle size reduction, implementing lazy loading for modules, and optimizing change detection strategies. These strategies collectively improve application load times and runtime efficiency.

How do I structure a new Angular component using Material Design conventions?▼

Structure a new Angular component by following specific naming conventions, utilizing Angular Material components for UI, and applying project checklists. This ensures a unified look and feel while maintaining code consistency.

Does Angular Material work well with TypeScript for frontend development?▼

Yes, Angular Material integrates seamlessly with TypeScript to enforce UI standards and technical patterns. Using them together ensures a cohesive user experience and maintainable frontend architecture.

Why use English naming conventions for Angular code?▼

Using English naming conventions for Angular code ensures technical consistency and maintainability across diverse development teams. It standardizes file structures and service patterns for easier collaboration.

Related Skills

Explore More Software Engineering Skills→
nholder88nholder88
2

impl-angular

Automate Angular feature implementation, migration, and modernization tasks.

Community
Advanced
CrazyDubyaCrazyDubya

internationalization-helper

Extract hardcoded strings and manage translation files across locales.

Community
Intermediate
partme-aipartme-ai
610

cypress

Guide Cypress end-to-end and component testing with CI/CD configuration.

Official
Intermediate
JCE-Joshhh77JCE-Joshhh77
16

frontend

Automate frontend UI quality checks for React, Vue, or Svelte codebases.

Community
Advanced