cursor-kit-cli 1.2.0-beta → 1.2.0-beta.3

package/templates/skills/aesthetic/assets/design-guideline-template.md

@@ -0,0 +1,163 @@
+# Design Guidelines: [Project Name]
+
+_Generated: [Date]_
+
+## Design Style
+
+[Specify: Minimalism, Glassmorphism, Neo-brutalism, Modern, Memphis, Flat Design, etc.]
+
+## Color Palette
+
+### Primary Colors
+- **Primary**: `#000000` - [Description/Usage]
+- **Secondary**: `#000000` - [Description/Usage]
+
+### Accent Colors
+- **Accent**: `#000000` - [Description/Usage]
+- **Success**: `#000000` - [Description/Usage]
+- **Warning**: `#000000` - [Description/Usage]
+- **Error**: `#000000` - [Description/Usage]
+
+### Neutral Colors
+- **Background**: `#000000` - [Description/Usage]
+- **Surface**: `#000000` - [Description/Usage]
+- **Border**: `#000000` - [Description/Usage]
+
+### Color Psychology
+[Explain mood and emotions evoked by color choices]
+
+## Typography System
+
+### Font Families
+- **Primary Font**: [Font Name] - Body text, paragraphs
+- **Secondary Font**: [Font Name] - Headings, emphasis
+- **Monospace Font**: [Font Name] - Code, technical content
+
+### Font Hierarchy
+- **H1**: [Size]px / [Weight] / [Line Height] - [Usage]
+- **H2**: [Size]px / [Weight] / [Line Height] - [Usage]
+- **H3**: [Size]px / [Weight] / [Line Height] - [Usage]
+- **Body**: [Size]px / [Weight] / [Line Height] - [Usage]
+- **Small**: [Size]px / [Weight] / [Line Height] - [Usage]
+
+### Typography Guidelines
+- Line length: [Character count] characters max
+- Paragraph spacing: [Value]
+- Letter spacing: [Value]
+
+## Layout Principles
+
+### Grid System
+- Columns: [Number]
+- Gutter: [Size]px
+- Margin: [Size]px
+- Max width: [Size]px
+
+### Spacing Scale
+- xs: [Size]px
+- sm: [Size]px
+- md: [Size]px
+- lg: [Size]px
+- xl: [Size]px
+- 2xl: [Size]px
+
+### Responsive Breakpoints
+- Mobile: [Width]px
+- Tablet: [Width]px
+- Desktop: [Width]px
+- Wide: [Width]px
+
+## Component Styling
+
+### Buttons
+- **Primary**: [Description of style]
+- **Secondary**: [Description of style]
+- **Ghost**: [Description of style]
+- **Sizes**: [List sizes]
+- **States**: Default, Hover, Active, Disabled
+
+### Cards
+- Border radius: [Value]
+- Shadow: [Value]
+- Padding: [Value]
+- Background: [Color]
+
+### Forms
+- Input height: [Value]
+- Border radius: [Value]
+- Focus state: [Description]
+- Error state: [Description]
+
+### Navigation
+- [Description of nav patterns]
+
+## Visual Hierarchy
+
+### Emphasis Techniques
+- [List how to draw attention: size, color, placement, etc.]
+
+### Content Flow
+- [Describe reading patterns: F-pattern, Z-pattern, etc.]
+
+## Micro-Interactions
+
+### Animation Timing
+- Fast: 150ms - [Usage]
+- Normal: 250ms - [Usage]
+- Slow: 350ms - [Usage]
+
+### Easing Curves
+- Ease-out: [Usage]
+- Ease-in: [Usage]
+- Spring: [Usage]
+
+### Interactive States
+- Hover: [Description]
+- Active: [Description]
+- Focus: [Description]
+- Loading: [Description]
+
+## Accessibility
+
+### Contrast Ratios
+- Text: [Ratio] (WCAG AA: 4.5:1 minimum)
+- Large text: [Ratio] (WCAG AA: 3:1 minimum)
+- UI elements: [Ratio]
+
+### Focus Indicators
+- [Description of focus styles]
+
+### Touch Targets
+- Minimum size: 44x44px
+
+## Design Highlights
+
+### What Works Well
+- [List successful design decisions]
+
+### Unique Elements
+- [List distinctive design features]
+
+### Brand Alignment
+- [Explain how design supports brand identity]
+
+## Implementation Notes
+
+### Technologies
+- [List frameworks, libraries, tools used]
+
+### Performance Considerations
+- [List optimization strategies]
+
+### Browser Support
+- [List supported browsers/versions]
+
+## Resources
+
+### Design Files
+- Figma: [Link]
+- Assets: [Link]
+
+### Related Documentation
+- [Link to design-story.md]
+- [Link to component library]

package/templates/skills/aesthetic/assets/design-story-template.md

@@ -0,0 +1,135 @@
+# Design Story: [Project Name]
+
+_Generated: [Date]_
+
+## Project Context
+
+### Purpose
+[What problem does this design solve?]
+
+### Target Audience
+[Who is this design for?]
+
+### Key Objectives
+1. [Objective 1]
+2. [Objective 2]
+3. [Objective 3]
+
+## Design Narrative
+
+### Core Message
+[What story does this design tell?]
+
+### Emotional Journey
+[What should users feel as they interact?]
+
+### Visual Metaphor
+[What metaphor or theme unifies the design?]
+
+## User Journey
+
+### Entry Point
+**First Impression**: [What users see first]
+**Goal**: [What should users understand immediately]
+**Design Choices**: [How design supports this]
+
+### Exploration Phase
+**User Actions**: [What users do next]
+**Design Response**: [How interface responds]
+**Micro-Interactions**: [Subtle feedback provided]
+
+### Engagement Phase
+**Key Interactions**: [Main user activities]
+**Visual Feedback**: [How design reinforces actions]
+**Storytelling Elements**: [Narrative reinforcement]
+
+### Peak Moment
+**Highlight**: [Most memorable interaction]
+**Implementation**: [How it's achieved technically]
+**Purpose**: [Why this moment matters]
+
+## Thematic Elements
+
+### Visual Theme
+[Description of consistent visual approach]
+
+### Narrative Devices
+- **Parallax**: [How depth is used]
+- **Transitions**: [How sections connect]
+- **Progressive Disclosure**: [How information unfolds]
+- **Motion**: [How animation tells the story]
+
+### Symbolism
+[Meaning behind design choices]
+
+## Design Decisions
+
+### Why This Style?
+[Rationale for design style choice]
+
+### Why These Colors?
+[Reasoning behind color palette]
+
+### Why This Layout?
+[Logic behind structure and flow]
+
+### Why These Interactions?
+[Purpose of micro-interactions chosen]
+
+## Technical Storytelling
+
+### Performance Story
+[How fast loading enhances narrative]
+
+### Responsive Story
+[How design adapts across devices]
+
+### Accessibility Story
+[How inclusive design supports everyone]
+
+## Evolution
+
+### Initial Concepts
+[Early ideas explored]
+
+### Key Iterations
+[Major changes and why]
+
+### Final Direction
+[Ultimate design rationale]
+
+## Inspiration
+
+### Design References
+- [Source 1]: [What inspired]
+- [Source 2]: [What inspired]
+- [Source 3]: [What inspired]
+
+### Cultural Context
+[Broader design trends considered]
+
+## Impact
+
+### Intended Effect
+[What users should take away]
+
+### Success Metrics
+[How to measure if story resonates]
+
+### Future Chapters
+[How design can evolve]
+
+## Reflections
+
+### What Worked
+[Successful narrative elements]
+
+### What We Learned
+[Insights gained from process]
+
+### What's Next
+[Future storytelling opportunities]
+
+---
+
+**Remember**: Every design tells a story. Make it intentional, coherent, and meaningful.

package/templates/skills/aesthetic/references/design-principles.md

@@ -0,0 +1,62 @@
+# Design Principles: Beautiful & Right
+
+## BEAUTIFUL: Understanding Aesthetic Principles
+
+### Study Process
+Analyze high-quality designs on Dribbble, Mobbin, Behance. Ask AI to identify:
+- Design styles (Memphis, Flat Design, Glassmorphism, Neo-brutalism, Minimalism)
+- Layout structures & applications
+- Typography systems (font pairing, hierarchy, scaling)
+- Color systems (palettes, contrasts, psychology)
+
+### Visual Hierarchy
+Guide users through interfaces effectively:
+- **Size**: Larger elements draw attention first
+- **Contrast**: High contrast (text/background) boosts readability
+- **Typography**: Use weight, size, style for hierarchy
+- **Placement**: F-pattern (web), Z-pattern (landing pages)
+- **Spacing**: White space improves clarity, reduces cognitive load
+
+### Typography Best Practices
+- Stick to 2-3 typefaces max
+- Clear font hierarchy with proper spacing, sizes, alignment
+- Appropriate font sizes for readability across devices
+- Short, scannable paragraphs
+
+### Color Theory Applications
+- **Blue**: Trust, security, calmness
+- **Red**: Urgency, passion, excitement
+- **Warm colors**: Drive urgency
+- **Cool colors**: Create trust
+- Use color intentionally to direct attention & evoke emotion
+- Ensure WCAG AA contrast ratios (4.5:1 text, 3:1 large text)
+
+### White Space
+Not empty—essential for clarity. Proper spacing between sections, buttons, text improves readability & gives visual breathing room.
+
+## RIGHT: Ensuring Functionality
+
+### Design Systems Research
+Search "Figma Design System + [style]" to understand:
+- Component architecture (atomic design: atoms → molecules → organisms)
+- Layout principles (grid systems, responsive breakpoints)
+- UX patterns & interactions
+
+### Component Library Standards
+- Semantic HTML first (button > div with ARIA roles)
+- Built-in accessibility, focus handling, keyboard interaction
+- Each component tested for accessibility before adding
+- Documentation includes structure, focus order, keyboard expectations, screen reader announcements
+
+### Accessibility Requirements
+- WCAG 2.1 AA minimum (work toward 2.2)
+- Color contrast ratios meet/exceed minimums
+- Alt text for images
+- Color-blind-friendly palettes
+- Keyboard navigation support
+- Screen reader compatibility
+
+### Testing Protocol
+- Automated tools catch 30-50% of issues
+- Manual testing crucial for comprehensive coverage
+- Test with real users when possible

package/templates/skills/aesthetic/references/design-resources.md

@@ -0,0 +1,75 @@
+# Design Resources & Tools
+
+## Inspiration Platforms
+
+### Design Galleries
+- **Dribbble**: High-quality UI/UX designs, trending styles
+- **Mobbin**: Mobile app design patterns, real-world examples
+- **Behance**: Creative portfolios, comprehensive projects
+- **Awwwards**: Award-winning web experiences
+- **21st.dev**: Component animations, micro-interactions
+- **CSS Design Awards**: Cutting-edge web designs
+
+### Design Systems
+Search pattern: "Figma Design System + [style name]"
+- Material Design (Google)
+- Human Interface Guidelines (Apple)
+- Carbon Design System (IBM)
+- Ant Design
+- Shadcn UI
+- Atlassian Design System
+
+## AI Tools for Design
+
+### Generation
+- **Gemini**: Image generation via ai-multimodal skill
+- **Claude**: Design variations, component code
+
+### Prompt Structure
+Include in prompts:
+- Task description
+- Preferred design style
+- Color palette
+- Typography preferences
+- Target audience/user story
+- Animation specifications
+
+## MCP Integrations
+
+### Available MCPs
+- **Chrome MCP**: Research designs, analyze trends from Dribbble/Mobbin
+- **Figma MCP**: Code based on community designs
+- **Freepik MCP**: Access stock imagery
+- **ChatGPT-Image MCP**: Image resources
+- **gallery-dl**: Download reference images via bash
+
+### Usage
+Connect MCPs for enhanced capabilities when researching, analyzing, or implementing designs.
+
+## Development Approach
+
+### Git Worktrees Strategy
+Maintain separate branches for different design style variations during development.
+Allows parallel exploration of Minimalist, Modern, Glassmorphism interpretations.
+
+### Parallel Agents
+Use multiple agents to generate design style variations simultaneously, compare approaches.
+
+## Documentation Standards
+
+### Required Files
+Create in `./docs/` directory:
+- **design-guideline.md**: Color patterns, typography, layout principles, component styling, design highlights
+- **design-story.md**: Narrative elements, thematic decisions, user journey considerations
+
+### Content
+Document:
+- Rationale for design decisions
+- Style guide (colors, fonts, spacing)
+- Component patterns & usage
+- Responsive breakpoints
+- Accessibility considerations
+- Brand alignment
+
+### Maintenance
+Update during development. Use development rules to remind Claude Code to follow guidelines consistently.

package/templates/skills/aesthetic/references/micro-interactions.md

@@ -0,0 +1,53 @@
+# Micro-Interactions: Satisfying Experience
+
+## SATISFYING: Adding Micro-Interactions
+
+### Duration Guidelines
+- **General micro-interactions**: 150-300ms (avoid interrupting flow)
+- **Button presses**: Start within 16ms of click
+- **Standard animations**: 200-500ms
+- **UI motions**: 0.5-2s typically
+- **Rule**: A tenth of a second makes big difference; half second wrong feels jarring
+
+### Basic Effects
+- **Fade**: Smooth opacity transitions
+- **Slide**: Directional movement (left/right/up/down)
+- **Scale**: Size changes (grow/shrink)
+- **Rotate**: Angular transformations
+- Sequential timing with 0.1s delays between elements
+
+### Easing Curves
+Linear motion = robotic. Use easing for natural feel:
+
+**Ease-out** (starts fast, slows down):
+- Best for: Elements entering screen
+- Makes animation feel responsive
+- Allows eye time to focus as element settles
+- Most common for UI micro-interactions
+
+**Ease-in** (starts slow, speeds up):
+- Best for: Elements leaving screen
+- Natural exit motion
+
+**Spring/bounce**:
+- Playful, energetic feel
+- Use sparingly for emphasis
+
+**Cubic-bezier**:
+- Fine-tuned control over motion curves
+- Custom easing for specific needs
+
+### Motion Characteristics
+- Follow real-world physics (objects speed up when starting, slow down when stopping)
+- Subtle curves for micro-interactions
+- Bolder curves for attention-grabbing transitions
+- Always have purpose—guide users or give feedback
+
+### Performance
+- Aim for smooth 60fps
+- Prefer hardware-accelerated properties (transforms, opacity)
+- Avoid fancy effects causing frame drops or battery drain
+- Provide motion-reduced alternatives for accessibility
+
+### Resources
+Study 21st.dev for component animations & subtle effects worth emulating.

package/templates/skills/aesthetic/references/storytelling-design.md

@@ -0,0 +1,50 @@
+# Storytelling Design: Peak Experience
+
+## PEAK: Storytelling Through Design
+
+### Narrative Elements
+Elevate designs by incorporating story-driven interactions:
+- **Parallax effects**: Different scroll speeds create depth
+- **Particle systems**: Dynamic, living background elements
+- **Thematic consistency**: Every element reinforces the narrative
+- **Progressive disclosure**: Reveal information as user explores
+
+### Key Principle
+"Too much of anything isn't good"—use restraint. Peak moments should be intentional, not overwhelming.
+
+### Implementation Approaches
+
+**Scroll-Based Storytelling**:
+- Reveal content in meaningful sequences
+- Use scroll position to trigger animations
+- Create depth with parallax layers
+- Build anticipation through pacing
+
+**Interactive Elements**:
+- Hover states that reveal additional context
+- Click interactions that unfold stories
+- Drag interactions that manipulate narrative elements
+- Gesture-based reveals on mobile
+
+**Visual Narrative**:
+- Hero sections that set tone
+- Consistent visual metaphors throughout
+- Imagery that supports the message
+- Typography that reinforces brand personality
+
+### Technical Considerations
+- Ensure storytelling enhances, not hinders, usability
+- Maintain performance (60fps) during narrative elements
+- Provide accessibility alternatives
+- Test across devices & screen sizes
+- Graceful degradation for older browsers
+
+### Inspiration Sources
+Study award-winning sites like:
+- Awwwards.com winners
+- CSS Design Awards
+- FWA (Favourite Website Awards)
+- Brand campaign sites
+
+### Balance
+Strong storytelling + solid functionality = peak experience. Neither should sacrifice the other.

package/templates/skills/backend-development/SKILL.mdc

@@ -0,0 +1,95 @@
+---
+name: backend-development
+description: Build robust backend systems with modern technologies (Node.js, Python, Go, Rust), frameworks (NestJS, FastAPI, Django), databases (PostgreSQL, MongoDB, Redis), APIs (REST, GraphQL, gRPC), authentication (OAuth 2.1, JWT), testing strategies, security best practices (OWASP Top 10), performance optimization, scalability patterns (microservices, caching, sharding), DevOps practices (Docker, Kubernetes, CI/CD), and monitoring. Use when designing APIs, implementing authentication, optimizing database queries, setting up CI/CD pipelines, handling security vulnerabilities, building microservices, or developing production-ready backend systems.
+license: MIT
+version: 1.0.0
+---
+
+# Backend Development Skill
+
+Production-ready backend development with modern technologies, best practices, and proven patterns.
+
+## When to Use
+
+- Designing RESTful, GraphQL, or gRPC APIs
+- Building authentication/authorization systems
+- Optimizing database queries and schemas
+- Implementing caching and performance optimization
+- OWASP Top 10 security mitigation
+- Designing scalable microservices
+- Testing strategies (unit, integration, E2E)
+- CI/CD pipelines and deployment
+- Monitoring and debugging production systems
+
+## Technology Selection Guide
+
+**Languages:** Node.js/TypeScript (full-stack), Python (data/ML), Go (concurrency), Rust (performance)
+**Frameworks:** NestJS, FastAPI, Django, Express, Gin
+**Databases:** PostgreSQL (ACID), MongoDB (flexible schema), Redis (caching)
+**APIs:** REST (simple), GraphQL (flexible), gRPC (performance)
+
+See: `references/backend-technologies.md` for detailed comparisons
+
+## Reference Navigation
+
+**Core Technologies:**
+- `backend-technologies.md` - Languages, frameworks, databases, message queues, ORMs
+- `backend-api-design.md` - REST, GraphQL, gRPC patterns and best practices
+
+**Security & Authentication:**
+- `backend-security.md` - OWASP Top 10 2025, security best practices, input validation
+- `backend-authentication.md` - OAuth 2.1, JWT, RBAC, MFA, session management
+
+**Performance & Architecture:**
+- `backend-performance.md` - Caching, query optimization, load balancing, scaling
+- `backend-architecture.md` - Microservices, event-driven, CQRS, saga patterns
+
+**Quality & Operations:**
+- `backend-testing.md` - Testing strategies, frameworks, tools, CI/CD testing
+- `backend-code-quality.md` - SOLID principles, design patterns, clean code
+- `backend-devops.md` - Docker, Kubernetes, deployment strategies, monitoring
+- `backend-debugging.md` - Debugging strategies, profiling, logging, production debugging
+- `backend-mindset.md` - Problem-solving, architectural thinking, collaboration
+
+## Key Best Practices (2025)
+
+**Security:** Argon2id passwords, parameterized queries (98% SQL injection reduction), OAuth 2.1 + PKCE, rate limiting, security headers
+
+**Performance:** Redis caching (90% DB load reduction), database indexing (30% I/O reduction), CDN (50%+ latency cut), connection pooling
+
+**Testing:** 70-20-10 pyramid (unit-integration-E2E), Vitest 50% faster than Jest, contract testing for microservices, 83% migrations fail without tests
+
+**DevOps:** Blue-green/canary deployments, feature flags (90% fewer failures), Kubernetes 84% adoption, Prometheus/Grafana monitoring, OpenTelemetry tracing
+
+## Quick Decision Matrix
+
+| Need | Choose |
+|------|--------|
+| Fast development | Node.js + NestJS |
+| Data/ML integration | Python + FastAPI |
+| High concurrency | Go + Gin |
+| Max performance | Rust + Axum |
+| ACID transactions | PostgreSQL |
+| Flexible schema | MongoDB |
+| Caching | Redis |
+| Internal services | gRPC |
+| Public APIs | GraphQL/REST |
+| Real-time events | Kafka |
+
+## Implementation Checklist
+
+**API:** Choose style → Design schema → Validate input → Add auth → Rate limiting → Documentation → Error handling
+
+**Database:** Choose DB → Design schema → Create indexes → Connection pooling → Migration strategy → Backup/restore → Test performance
+
+**Security:** OWASP Top 10 → Parameterized queries → OAuth 2.1 + JWT → Security headers → Rate limiting → Input validation → Argon2id passwords
+
+**Testing:** Unit 70% → Integration 20% → E2E 10% → Load tests → Migration tests → Contract tests (microservices)
+
+**Deployment:** Docker → CI/CD → Blue-green/canary → Feature flags → Monitoring → Logging → Health checks
+
+## Resources
+
+- OWASP Top 10: https://owasp.org/www-project-top-ten/
+- OAuth 2.1: https://oauth.net/2.1/
+- OpenTelemetry: https://opentelemetry.io/