component-architecture
Reference for design system component organization, naming conventions, and documentation patterns.
Content Preview
# Component Architecture Guide Reference for design system component organization, naming conventions, and documentation patterns. --- ## Table of Contents - [Component Hierarchy](#component-hierarchy) - [Naming Conventions](#naming-conventions) - [Component Documentation](#component-documentation) - [Variant Patterns](#variant-patterns) - [Token Integration](#token-integration) --- ## Component Hierarchy ### Atomic Design Structure ``` ┌──────────────────────────────────────────────────
How to Use
Recommended: Install to project (local)
mkdir -p .claude/skills
curl -o .claude/skills/component-architecture.md \
https://raw.githubusercontent.com/alirezarezvani/claude-skills/main/product-team/ui-design-system/references/component-architecture.mdSkill is scoped to this project only. Add .claude/skills/ to your .gitignoreif you don't want to commit it.
Alternative: Clone full repo
git clone https://github.com/alirezarezvani/claude-skillsThen reference at product-team/ui-design-system/references/component-architecture.md
Related Skills
svelte:component
Create new Svelte components with best practices, proper structure, and optional TypeScript support.
commandssvelte:componentsvelte
by qdhenry · claude-command-suite
SKILL
10 product agent skills and plugins for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw. PM toolkit (RICE), agile PO, product strategist (OKR), UX researcher, UI design system, competitive teardown, landing page generator, SaaS scaffolder, research summarizer. Python tools (stdlib-only).
product-teamskillagentpython
by alirezarezvani · alirezarezvani-claude-skills
sample-prd-readme
My App — Product Requirements Document
product-teamsampleprdreadme
by alirezarezvani · alirezarezvani-claude-skills
statistics-reference
Statistics Reference for Product Managers
product-teamstatisticsreference
by alirezarezvani · alirezarezvani-claude-skills