Component Architecture

Component Architecture Patterns

Template for project-specific component patterns skill Fill in [CUSTOMIZE] sections with your project's detected or chosen patterns

Project: [PROJECT NAME] Framework: [CUSTOMIZE: React / Angular / Vue / Svelte / SolidJS] Language: [CUSTOMIZE: TypeScript / JavaScript] Last Updated: [DATE]

Component Structure

File Organization

Location: [CUSTOMIZE: src/components / app/components / src/ui]

Directory Pattern: [CUSTOMIZE: Flat / By-feature / Atomic design / Nested]

Example Structure:

[CUSTOMIZE: Show your actual directory structure]

Examples:
- React: src/components/UserList/UserList.tsx, UserList.module.css, UserList.test.tsx
- Angular: src/app/components/user-list/user-list.component.ts, .html, .css
- Vue: src/components/UserList.vue

Component Type

Primary Pattern: [CUSTOMIZE: Functional components / Class components / Composition API / Components]

Example - Simple Component:

[CUSTOMIZE: Show basic component pattern]

Examples:
- React: export const UserCard: React.FC<Props> = ({ user }) => {...}
- Angular: @Component({...}) export class UserCardComponent {...}
- Vue: <script setup lang="ts">...</script>

Props / Inputs

Definition Pattern

[CUSTOMIZE WITH YOUR PROJECT PATTERN]

Example - Props Interface:

[CUSTOMIZE: How props/inputs are defined]

Examples:
- React: interface UserListProps { users: User[]; onSelect: (u: User) => void }
- Angular: @Input() users: User[] = []; @Output() select = new EventEmitter<User>()
- Vue: defineProps<{ users: User[] }>()

Naming Conventions

Props: [CUSTOMIZE: camelCase / kebab-case / PascalCase] Event Handlers: [CUSTOMIZE: onAction / handleAction / @action] Callbacks: [CUSTOMIZE: onUserClick / handleUserClick / userClick]

State Management

Local State

Pattern: [CUSTOMIZE: useState / reactive / ref / createSignal]

Example:

[CUSTOMIZE: Show local state pattern]

Examples:
- React: const [users, setUsers] = useState<User[]>([])
- Angular: users: User[] = []
- Vue: const users = ref<User[]>([])

Computed/Derived State

Pattern: [CUSTOMIZE: useMemo / computed / $: / createMemo]

Example:

[CUSTOMIZE: Show computed values]

Global State

Approach: [CUSTOMIZE: Context API / Redux / NgRx / Pinia / Zustand / Signals]

When to Use: [CUSTOMIZE: Authentication / Theme / Cached data / User preferences]

Pattern:

[CUSTOMIZE: Show global state usage]

Side Effects / Lifecycle

Pattern

Hooks/Lifecycle: [CUSTOMIZE: useEffect / ngOnInit / onMounted / onMount]

Example - Data Loading:

[CUSTOMIZE: Show data fetching pattern]

Example - Cleanup:

[CUSTOMIZE: Show cleanup pattern]

Event Handling

Naming Convention

Event Handlers: [CUSTOMIZE: handleClick / onClick / onButtonClick]

Example:

[CUSTOMIZE: Show event handler pattern]

Examples:
- React: const handleUserClick = (user: User) => {...}
- Angular: onUserClick(user: User): void {...}
- Vue: const handleUserClick = (user: User) => {...}

API Integration

Service Layer

Location: [CUSTOMIZE: src/services / src/api / app/services]

Pattern: [CUSTOMIZE: Class / Functions / Composables / Custom hooks]

Example:

[CUSTOMIZE: Show API service pattern]

Examples:
- React: export class UserService { static async getUsers() {...}}
- Angular: @Injectable() export class UserService {...}
- Vue: export function useUsers() {...}

HTTP Client

Library: [CUSTOMIZE: fetch / axios / Angular HttpClient / ky]

Error Handling:

[CUSTOMIZE: Show error handling pattern]

Loading States

Pattern: [CUSTOMIZE: Boolean / Enum / Status object]

Example:

[CUSTOMIZE: Show loading state pattern]

Examples:
- const [loading, setLoading] = useState(false)
- loading: boolean = false
- const loading = ref(false)

Styling Approach

Method

Primary: [CUSTOMIZE: CSS Modules / styled-components / Tailwind / SCSS / Vanilla CSS / Vue scoped]

File Extension: [CUSTOMIZE: .module.css / .styled.ts / .css / .scss]

Class Naming: [CUSTOMIZE: BEM / camelCase / kebab-case / Utility classes]

Example

[CUSTOMIZE: Show styling pattern]

Examples:
- CSS Modules: import styles from './UserList.module.css'; <div className={styles.container}>
- styled-components: const Container = styled.div`...`
- Tailwind: <div className="p-4 bg-white rounded-lg">

Form Handling

Form Library

Library: [CUSTOMIZE: React Hook Form / Formik / Angular Reactive Forms / VeeValidate / None]

Pattern:

[CUSTOMIZE: Show form handling pattern]

Validation

Approach: [CUSTOMIZE: Schema-based / Inline / Custom validators]

Example:

[CUSTOMIZE: Show validation pattern]

Error Display

Pattern: [CUSTOMIZE: Inline / Toast / Modal / Field-specific]

Component Testing

Testing Framework

Framework: [CUSTOMIZE: Jest + React Testing Library / Vitest / Jasmine/Karma / Vue Test Utils]

Pattern: [CUSTOMIZE: Behavior-driven / Implementation / Integration]

Test Structure

Example:

[CUSTOMIZE: Show component test pattern]

Examples:
- React: render(<Component />); expect(screen.getByText('...')).toBeInTheDocument()
- Angular: TestBed.configureTestingModule({...}); expect(compiled.querySelector('...')).toBeTruthy()

What to Test

[CUSTOMIZE WITH PROJECT GUIDELINES]

Always test:

• Component renders with props
• User interactions (clicks, typing)
• Loading states
• Error states
• Empty states
• [PROJECT-SPECIFIC REQUIREMENT]

Performance Patterns

Rendering Optimization

Techniques: [CUSTOMIZE: useMemo / React.memo / OnPush / v-memo / createMemo]

When to Use: [CUSTOMIZE: Expensive calculations / Large lists / Frequent re-renders]

Code Splitting

Approach: [CUSTOMIZE: React.lazy / loadChildren / defineAsyncComponent]

Example:

[CUSTOMIZE: Show lazy loading pattern]

Accessibility Patterns

Semantic HTML

Approach: [CUSTOMIZE: Use semantic tags / ARIA / Both]

Required Elements:

• Proper heading hierarchy (h1, h2, h3)
• Semantic tags (header, nav, main, section, article)
• Form labels with for attribute
• Button vs anchor usage
• [PROJECT-SPECIFIC REQUIREMENT]

ARIA Attributes

When to Use: [CUSTOMIZE: Custom components / Non-semantic elements / Complex widgets]

Common Patterns:

[CUSTOMIZE: Show ARIA usage]

Examples:
- aria-label, aria-describedby
- role="button", role="dialog"
- aria-live for dynamic content

Component Checklist

When generating components, always include:

• Proper TypeScript types for props
• Loading state handling
• Error state handling
• Empty state handling
• Accessible markup (semantic HTML, ARIA)
• Responsive design (mobile breakpoint)
• Component tests (>80% coverage)
• [PROJECT-SPECIFIC REQUIREMENT]

Project-Specific Patterns

[CUSTOMIZE - ADD DETECTED OR CHOSEN PATTERNS]

Custom Hooks / Composables

• [CUSTOMIZE: List reusable hooks/composables]

Higher-Order Components

• [CUSTOMIZE: If using HOCs, describe pattern]

Render Props

• [CUSTOMIZE: If using render props, describe pattern]

Context Usage

• [CUSTOMIZE: When and how to use Context]

Customization Complete: Replace all [CUSTOMIZE] sections with project-detected or chosen patterns.

Auto-generated by: /add-skill component-architecture command