custom-component-patterns

Implement Angular ButtonComponent variants with shared SCSS styling conventions.

Updated Apr 20, 2026

Search Tags:#angular #ui components #scss #button component #shared controls

Ready to run

npx skills add https://github.com/Suriya-Kodehode/Angular --skill custom-component-patterns

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: custom-component-patterns
Source: https://github.com/Suriya-Kodehode/Angular/tree/main/.github/skills/custom-component-patterns
Command: npx skills add https://github.com/Suriya-Kodehode/Angular --skill custom-component-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you apply the repository’s shared component conventions so custom UI stays consistent, reusable, and easy to extend across the Angular app.

Core Features & Use Cases

Shared button architecture: Understand how ButtonComponent inputs map to theme color, visual variant, and size.
Repo-specific styling guidance: Keep reusable appearance in the shared _buttons.scss file while limiting component styles to internal behavior.
Safe extension pattern: Add new component options without changing consumer markup, making it easier to evolve shared controls like button variants or icon-only actions.

Quick Start

Use the custom-component-patterns skill to explain how I should extend the shared ButtonComponent for a new variant while keeping the repo’s styling and markup conventions intact.

Frequently Asked Questions about custom-component-patterns

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

FAQPage Schema

How do I add a new variant to a shared Angular button component?▼

To add a new variant to a shared Angular button component, you extend the ButtonComponent using typed inputs while separating theme and variant behavior to ensure consumer markup remains unchanged.

Where should shared button styling be kept in an Angular workspace?▼

Shared button styling should be centralized in the designated `_buttons.scss` file, limiting component-specific styles to internal behavior only to maintain consistency across the workspace.

How do Angular ButtonComponent inputs map to visual properties?▼

Angular ButtonComponent inputs map directly to theme color, visual variant, and size, allowing you to control the shared actions' appearance through typed inputs without altering markup.

What's the best way to extend shared UI controls without breaking existing Angular markup?▼

The best way to extend shared UI controls is using a safe extension pattern that adds new component options via typed inputs, ensuring existing Angular consumer markup remains intact.

Can I use this approach for icon-only actions in Angular shared controls?▼

Yes, you can apply this pattern to icon-only actions by extending shared controls like button variants while keeping the repo’s styling and markup conventions centralized.

Why separate theme behavior from component logic in Angular UI components?▼

Separating theme behavior from component logic in Angular UI components keeps reusable appearance centralized in SCSS files, making custom UI consistent, reusable, and easy to extend.