alfredoperez

Create Shared Component — Design skill for Claude Code

Design community

Create a new shared UI component following project standards.

How to install Create Shared Component

Installs to ~/.claude/commands/alfredoperez-my-angular-starter-create-shared-component.md

Terminal
mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/alfredoperez/my-angular-starter/HEAD/.claude/commands/create-shared-component.md -o ~/.claude/commands/alfredoperez-my-angular-starter-create-shared-component.md

Restart Claude Code, or start a new session, for it to be picked up.

What Create Shared Component does


name: create-shared-component description: Create a new shared UI component following project standards input_type: required input_description: "Component name (e.g., loading-spinner, data-card)"

You are creating a new shared UI component for this Angular project.

Instructions

Follow the guide at: ${file:knowledge-base/project/guides/create-shared-component.md}

Your Task

  1. Create the component folder under src/app/shared/ui/{{INPUT}}/
  2. Create a standalone component with S

Alternatives in Design

  • Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
  • Design UI UX — Design UI/UX systems with style guides, palettes, typography, and component specs 2.8k ★
  • Claude Design Card — Claude Code skill for generating design cards in 14 formats — platform covers, social sharing cards, and edito 461 ★

Full documentation available on GitHub

View Source Repository