spinder-component-creation

name	spinder-component-creation
description	Create new Lit-based components for the Spinder expense tracking app, following the project's coding standards and architecture patterns.

Spinder Component Creation Skill

This skill helps create new Lit components for the Spinder web application, ensuring they follow the established patterns and coding standards.

When to Use

Use this skill when you need to:

• Add new UI components to the Spinder app
• Create reusable components for transaction display, filtering, or data visualization
• Implement new features that require custom UI elements
• Follow the project's Lit + TypeScript + Zod architecture

Component Structure

All Spinder components should:

• Be created in src/client/component.<component-name>.ts
• Extend LitElement with proper decorators
• Use the globalStyles from ./styles.global.ts
• Consume context from ./context.js when needed
• Dispatch custom events using the event system
• Follow the naming convention: Spinder<ComponentName>

Steps to Create a Component

1. Define the component class with @customElement("spinder-<component-name>")
2. Import required dependencies: Lit decorators, global styles, contexts, types
3. Add static styles array with globalStyles and component-specific CSS
4. Implement properties and state using Lit decorators
5. Consume contexts if the component needs shared data (transactions, filters, etc.)
6. Implement the render method returning a