skills.rest
Suriya-Kodehode
Suriya-KodehodeCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Suriya-Kodehode/Angular --skill custom-component-patterns
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
ehtbantonehtbanton

angular-component-generator

Generate Angular 17+ standalone components with TypeScript, HTML, and SCSS.

Community
Basic
emiljuchnikowskiemiljuchnikowski

angular-components-button

Create reusable Angular button components with configurable shapes, variants, and colors.

Community
Intermediate
IgniteUIIgniteUI
47

igniteui-angular-components

Provide UI components for Angular applications with reactive forms support.

Official
Intermediate
wuzhong-orderlywuzhong-orderly

Orderly SDK UI Components

Provide React UI components and hooks for Orderly Network DEX applications.

Community
Intermediate