Create Shared Component — Design skill for Claude Code
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
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
- Create the component folder under
src/app/shared/ui/{{INPUT}}/ - 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 RepositoryRelated Skills
Add Effect
Add a new visual effect following the IPixelCanvas pattern
Ti New Screen
Create a new Alloy screen (controller + view + style) following project conventions
Buddha Skill
I do not provide direct answers. Instead, I guide you so that you may realize the truth for yourself. Modeled
Rails Claude Code
Rails plugins: simplifier, upgrade-assistant, ui-standards
UI Visual Validator Agent
A specialized Claude Code agent that addresses Claude's overly lenient validation standards and visual halluci
Visual Standards
Load visual formatting standards for screenshots, emoji headings, and image specs: $ARGUMENTS
Related Agents
Shared Changelog
Updates CHANGELOG.md following Keep a Changelog conventions
Diff Summarizer
MUST BE USED for generating commit messages and PR descriptions. Use immediately before finalizing commits. An
Report Agent
Security report writer agent. Use after the Red Team Agent completes an attack to generate professional penetr