skills.rest
sheldrapps
sheldrappsCOMMUNITY
Explore all skills by this author →
GitHub

add-ui-component

Create reusable UI components in the @sheldrapps/ui-theme package with SCSS and validation.

Updated Jan 28, 2026
Search Tags:#angular#pnpm#monorepo#design-system#ui-component#ionic#ui-theme
One-click install
npx skills add https://github.com/sheldrapps/sheldrapps --skill add-ui-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-ui-component
Source: https://github.com/sheldrapps/sheldrapps/tree/main/skills/add-ui-component
Command: npx skills add https://github.com/sheldrapps/sheldrapps --skill add-ui-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reduces duplication and inconsistency by guiding engineers to add or update reusable UI components in the shared design system so components are discoverable, properly styled, and consumable across Ionic + Angular apps in the monorepo.

Core Features & Use Cases

  • Search-first workflow: Instructs developers to search packages/ui-theme for existing components and styles before creating new ones to maximize reuse.
  • Shared component creation: Defines where to add TypeScript, template, and SCSS files inside packages/ui-theme/src/lib/components and how to export them so apps can import from @sheldrapps/ui-theme.
  • Style and validation rules: Explains adding shared style partials to styles/index.scss, avoiding app-level global SCSS, and validating changes via pnpm test, lint, and build. Use case: implement a SaveCoverModalComponent in ui-theme and consume it from the cover-creator app without adding new app-level SCSS.

Quick Start

Search packages/ui-theme for similar components, add your component under packages/ui-theme/src/lib/components, export it from the component and package indexes, import it from @sheldrapps/ui-theme in the app, and run pnpm test, lint, and build.

Frequently Asked Questions about add-ui-component

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

FAQPage Schema
How do I add reusable UI components to a shared Angular design system?▼

To add reusable UI components, place TypeScript, template, and SCSS files inside packages/ui-theme/src/lib/components, then export them from the component and package index files so Angular apps can import them from the @sheldrapps/ui-theme package.

How do I share SCSS styles across Ionic apps in an Angular monorepo?▼

Share SCSS styles across Ionic apps by adding style partials to styles/index.scss within the ui-theme package, specifically avoiding app-level global SCSS to ensure consistent styling and maximize style reuse throughout the monorepo.

Where do I export a new component from so it can be consumed by other apps?▼

Export a new component from both the component-level index file and the package index file inside packages/ui-theme, which allows apps to import and consume the shared component directly from the @sheldrapps/ui-theme package.

Why should I search the ui-theme package before creating a new UI component?▼

You should search the ui-theme package before creating a UI component to find existing components and styles, which reduces duplication, ensures design system consistency, and maximizes reuse across your Ionic and Angular apps.

What validation steps should I run after updating a design system component?▼

After updating a design system component, validate your changes by running pnpm test, pnpm lint, and pnpm build to ensure the shared component passes all tests, lints correctly, and compiles successfully within the monorepo.

Related Skills

Explore More Software Engineering Skills→
sheldrappssheldrapps

create-ionic-app

Create a standardized Ionic Angular app scaffold with tabs shell and workspace dependencies.

Community
Intermediate
deomiarndeomiarn
5

shadcn-ui-blocks

Install pre-built Shadcn UI blocks with pnpm dlx shadcn add commands.

Community
Intermediate
GolferGeekGolferGeek

Quality Gates

Run npm lint, format, test, and build before commits.

Community
Advanced
ehtbantonehtbanton

angular-component-generator

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

Community
Basic