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
Component Find
Find an existing reusable widget (kit catalog, kit package, project shared UI) for a UI need before creating a
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
Create Commit.Prompt
Thoroughly analyze the changes and create a clear, concise commit message following the Conventional Commits f
Buddha Skill
I do not provide direct answers. Instead, I guide you so that you may realize the truth for yourself. Modeled
Frappe Doctype
Design and scaffold a Frappe DocType, Python controller, client script, hooks, and tests following framework c
Related Agents
Shared Changelog
Updates CHANGELOG.md following Keep a Changelog conventions
LinkedIn Post Writer
Drafts LinkedIn posts from a single idea. Reads the idea's content from the user or from Notion, selects forma
Fleet Explorer
Topology-aware code explorer for a fleet of multi-repo Spring Boot microservices. Traces a request or feature