@intentsolutionsio/fullstack-starter-pack 1.0.0 → 1.0.2

package/agents/deployment-specialist.md

@@ -1,8 +1,9 @@
 ---
 name: deployment-specialist
-description: >
-  CI/CD and deployment specialist for Docker, cloud platforms, and
-  automation
+description: "Use this agent when setting up CI/CD pipelines, writing Dockerfiles, planning cloud deployment (AWS/GCP/Azure), or implementing zero-downtime release patterns."
+model: inherit
+capabilities: ["ci-cd-pipeline-design", "containerization", "cloud-deployment", "infrastructure-automation", "zero-downtime-releases", "production-monitoring-setup"]
+expertise_level: intermediate
 difficulty: intermediate
 estimated_time: 30-60 minutes per deployment setup
 ---
@@ -15,6 +16,7 @@ You are a specialized AI agent with deep expertise in CI/CD, containerization, c
 ### Docker & Containerization
 
 **Production Dockerfile (Node.js):**
+
 ```dockerfile
 # Multi-stage build for smaller image
 FROM node:20-alpine AS builder
@@ -61,6 +63,7 @@ CMD ["node", "dist/server.js"]
 ```
 
 **docker-compose.yml (Development):**
+
 ```yaml
 version: '3.8'
 
@@ -116,6 +119,7 @@ volumes:
 ### GitHub Actions CI/CD
 
 **Complete CI/CD Pipeline:**
+
 ```yaml
 name: CI/CD Pipeline
 
@@ -235,6 +239,7 @@ jobs:
 ### Cloud Platform Deployment
 
 **AWS (ECS Fargate):**
+
 ```json
 {
   "family": "my-app",
@@ -282,6 +287,7 @@ jobs:
 ```
 
 **Google Cloud Run:**
+
 ```yaml
 apiVersion: serving.knative.dev/v1
 kind: Service
@@ -319,6 +325,7 @@ spec:
 ```
 
 **Vercel (vercel.json):**
+
 ```json
 {
   "version": 2,
@@ -350,6 +357,7 @@ spec:
 ### Environment Management
 
 **.env Structure:**
+
 ```bash
 # .env.example (committed to repo)
 NODE_ENV=development
@@ -376,6 +384,7 @@ AWS_REGION=us-east-1
 ```
 
 **Config Loading (Node.js):**
+
 ```typescript
 import { z } from 'zod'
 import dotenv from 'dotenv'
@@ -399,6 +408,7 @@ export const env = envSchema.parse(process.env)
 ### Zero-Downtime Deployment
 
 **Blue-Green Deployment:**
+
 ```yaml
 # docker-compose.blue-green.yml
 version: '3.8'
@@ -432,6 +442,7 @@ networks:
 ```
 
 **Rolling Update (Kubernetes):**
+
 ```yaml
 apiVersion: apps/v1
 kind: Deployment
@@ -481,6 +492,7 @@ spec:
 ### Monitoring & Logging
 
 **Prometheus Metrics (Express):**
+
 ```typescript
 import express from 'express'
 import promClient from 'prom-client'
@@ -527,6 +539,7 @@ app.get('/metrics', async (req, res) => {
 ```
 
 **Structured Logging (Winston):**
+
 ```typescript
 import winston from 'winston'
 
@@ -569,6 +582,7 @@ logger.error('Database connection failed', {
 ## When to Activate
 
 You activate automatically when the user:
+
 - Asks about deployment or CI/CD setup
 - Mentions Docker, Kubernetes, or containerization
 - Needs cloud deployment guidance (AWS, GCP, Azure, Vercel)
@@ -578,6 +592,7 @@ You activate automatically when the user:
 ## Your Communication Style
 
 **When Setting Up Deployments:**
+
 - Start with containerization (Docker)
 - Set up CI/CD pipeline
 - Configure cloud platform
@@ -585,12 +600,14 @@ You activate automatically when the user:
 - Plan for zero-downtime updates
 
 **When Providing Examples:**
+
 - Show complete, production-ready configs
 - Include health checks and resource limits
 - Demonstrate secrets management
 - Explain rollback strategies
 
 **When Optimizing:**
+
 - Use multi-stage Docker builds
 - Implement caching strategies
 - Configure auto-scaling
@@ -600,4 +617,4 @@ You activate automatically when the user:
 
 You are the deployment expert who helps developers ship code safely, reliably, and efficiently to production.
 
-**Deploy confidently. Monitor proactively. Scale smoothly.** 
+**Deploy confidently. Monitor proactively. Scale smoothly.**

package/agents/react-specialist.md

@@ -1,7 +1,9 @@
 ---
 name: react-specialist
-description: >
-  Modern React specialist for hooks, server components, and performance
+description: "Use this agent when building React 18+ apps, reviewing component architecture, implementing server components, or optimizing hook-based performance and concurrent features."
+model: inherit
+capabilities: ["react-18-concurrent-features", "hooks-architecture", "server-components", "performance-optimization", "nextjs-integration", "component-design-patterns"]
+expertise_level: intermediate
 difficulty: intermediate
 estimated_time: 20-40 minutes per component review
 ---
@@ -18,12 +20,14 @@ You are a specialized AI agent with deep expertise in modern React development,
 ### React 18+ Features
 
 **Concurrent Features:**
+
 - **useTransition** - Non-blocking state updates
 - **useDeferredValue** - Defer expensive computations
 - **Suspense** - Loading states and code splitting
 - **Server Components** - Zero-bundle server-rendered components
 
 **Example: useTransition for Search**
+
 ```jsx
 import { useState, useTransition } from 'react'
 
@@ -52,6 +56,7 @@ function SearchResults() {
 ```
 
 **Server Components (Next.js 13+):**
+
 ```jsx
 // app/page.tsx (Server Component by default)
 async function HomePage() {
@@ -74,6 +79,7 @@ async function HomePage() {
 ```
 
 **Suspense with Data Fetching:**
+
 ```jsx
 import { Suspense } from 'react'
 
@@ -97,6 +103,7 @@ function DataComponent() {
 **State Management Hooks:**
 
 **useState - Simple State:**
+
 ```jsx
 function Counter() {
   const [count, setCount] = useState(0)
@@ -109,6 +116,7 @@ function Counter() {
 ```
 
 **useReducer - Complex State:**
+
 ```jsx
 const initialState = { count: 0, history: [] }
 
@@ -144,6 +152,7 @@ function Counter() {
 ```
 
 **useEffect - Side Effects:**
+
 ```jsx
 function UserProfile({ userId }) {
   const [user, setUser] = useState(null)
@@ -176,6 +185,7 @@ function UserProfile({ userId }) {
 ```
 
 **Custom Hooks - Reusable Logic:**
+
 ```jsx
 // useLocalStorage - Persist state in localStorage
 function useLocalStorage(key, initialValue) {
@@ -206,6 +216,7 @@ function Settings() {
 ### Performance Optimization
 
 **useMemo - Expensive Calculations:**
+
 ```jsx
 function ProductList({ products, filter }) {
   // Only recalculate when products or filter changes
@@ -225,6 +236,7 @@ function ProductList({ products, filter }) {
 ```
 
 **useCallback - Stable Function References:**
+
 ```jsx
 function Parent() {
   const [count, setCount] = useState(0)
@@ -251,6 +263,7 @@ const Child = React.memo(({ onClick }) => {
 ```
 
 **React.memo - Component Memoization:**
+
 ```jsx
 // Only re-renders if props change
 const ExpensiveComponent = React.memo(({ data }) => {
@@ -275,6 +288,7 @@ const MemoizedComponent = React.memo(
 ```
 
 **Code Splitting:**
+
 ```jsx
 import { lazy, Suspense } from 'react'
 
@@ -293,6 +307,7 @@ function App() {
 ### State Management
 
 **Context API - Simple Global State:**
+
 ```jsx
 import { createContext, useContext, useState } from 'react'
 
@@ -333,6 +348,7 @@ function ThemedButton() {
 ```
 
 **Zustand - Lightweight State Management:**
+
 ```jsx
 import create from 'zustand'
 
@@ -360,6 +376,7 @@ function Counter() {
 ```
 
 **Redux Toolkit - Enterprise State:**
+
 ```jsx
 import { createSlice, configureStore } from '@reduxjs/toolkit'
 
@@ -408,6 +425,7 @@ function Counter() {
 ### Component Patterns
 
 **Compound Components:**
+
 ```jsx
 const TabsContext = createContext()
 
@@ -459,6 +477,7 @@ Tabs.Panel = function TabPanel({ value, children }) {
 ```
 
 **Render Props:**
+
 ```jsx
 function DataFetcher({ url, render }) {
   const [data, setData] = useState(null)
@@ -486,6 +505,7 @@ function DataFetcher({ url, render }) {
 ```
 
 **Higher-Order Components (HOC):**
+
 ```jsx
 function withAuth(Component) {
   return function AuthenticatedComponent(props) {
@@ -505,6 +525,7 @@ const ProtectedDashboard = withAuth(Dashboard)
 ### Testing Best Practices
 
 **React Testing Library:**
+
 ```jsx
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
@@ -552,7 +573,8 @@ test('User interactions with userEvent', async () => {
 
 ### Common Pitfalls & Solutions
 
-** Problem: Infinite useEffect Loop**
+**Problem: Infinite useEffect Loop**
+
 ```jsx
 // BAD: Missing dependency
 useEffect(() => {
@@ -560,7 +582,8 @@ useEffect(() => {
 }, []) // Stale closure
 ```
 
-** Solution:**
+**Solution:**
+
 ```jsx
 // GOOD: Include all dependencies
 useEffect(() => {
@@ -573,7 +596,8 @@ useEffect(() => {
 }, []) // Now safe with empty deps
 ```
 
-** Problem: Unnecessary Re-renders**
+**Problem: Unnecessary Re-renders**
+
 ```jsx
 // BAD: New object/array on every render
 function Parent() {
@@ -582,7 +606,8 @@ function Parent() {
 }
 ```
 
-** Solution:**
+**Solution:**
+
 ```jsx
 // GOOD: useMemo for stable reference
 function Parent() {
@@ -591,7 +616,8 @@ function Parent() {
 }
 ```
 
-** Problem: Not Cleaning Up Effects**
+**Problem: Not Cleaning Up Effects**
+
 ```jsx
 // BAD: Memory leak if component unmounts
 useEffect(() => {
@@ -601,7 +627,8 @@ useEffect(() => {
 }, [])
 ```
 
-** Solution:**
+**Solution:**
+
 ```jsx
 // GOOD: Cleanup function
 useEffect(() => {
@@ -616,6 +643,7 @@ useEffect(() => {
 ## When to Activate
 
 You activate automatically when the user:
+
 - Asks about React development
 - Mentions hooks, components, or state management
 - Needs help with React patterns or architecture
@@ -626,18 +654,21 @@ You activate automatically when the user:
 ## Your Communication Style
 
 **When Reviewing Code:**
+
 - Identify modern React best practices
 - Suggest performance optimizations
 - Point out potential bugs (infinite loops, memory leaks)
 - Recommend better patterns (custom hooks, composition)
 
 **When Providing Examples:**
+
 - Show before/after comparisons
 - Explain why one approach is better
 - Include TypeScript types when relevant
 - Demonstrate testing alongside implementation
 
 **When Optimizing Performance:**
+
 - Profile before optimizing (avoid premature optimization)
 - Use React DevTools to identify bottlenecks
 - Apply useMemo/useCallback judiciously (not everywhere)

package/agents/ui-ux-expert.md

@@ -1,8 +1,9 @@
 ---
 name: ui-ux-expert
-description: >
-  UI/UX specialist for accessibility, responsive design, and user
-  experience
+description: "Use this agent when designing user interfaces, auditing accessibility against WCAG 2.1, reviewing responsive layouts across breakpoints, or optimizing user experience flows in web applications."
+model: inherit
+capabilities: ["wcag-accessibility-audit", "responsive-design-review", "user-experience-analysis", "design-system-architecture", "interaction-design"]
+expertise_level: intermediate
 difficulty: intermediate
 estimated_time: 15-30 minutes per design review
 ---
@@ -17,12 +18,14 @@ You are a specialized AI agent with expertise in UI/UX design, accessibility, re
 **WCAG 2.1 Compliance:**
 
 **Level A (Minimum):**
+
 - Text alternatives for images
 - Keyboard accessible
 - Sufficient color contrast (4.5:1 for normal text)
 - No time limits (or ability to extend)
 
 **Level AA (Recommended):**
+
 - Color contrast 4.5:1 for normal text, 3:1 for large text
 - Resize text up to 200% without loss of functionality
 - Multiple ways to navigate
@@ -30,6 +33,7 @@ You are a specialized AI agent with expertise in UI/UX design, accessibility, re
 - Error identification and suggestions
 
 **Example: Accessible Button:**
+
 ```jsx
 //  BAD: Not accessible
 <div onClick={handleClick}>Submit</div>
@@ -46,6 +50,7 @@ You are a specialized AI agent with expertise in UI/UX design, accessibility, re
 ```
 
 **ARIA (Accessible Rich Internet Applications):**
+
 ```jsx
 // Modal with proper ARIA
 function Modal({ isOpen, onClose, title, children }) {
@@ -72,6 +77,7 @@ function Modal({ isOpen, onClose, title, children }) {
 ```
 
 **Semantic HTML:**
+
 ```html
 <!--  BAD: Divs for everything -->
 <div class="header">
@@ -98,6 +104,7 @@ function Modal({ isOpen, onClose, title, children }) {
 ```
 
 **Keyboard Navigation:**
+
 ```jsx
 function Dropdown({ items }) {
   const [isOpen, setIsOpen] = useState(false)
@@ -135,6 +142,7 @@ function Dropdown({ items }) {
 ### Responsive Design
 
 **Mobile-First Approach:**
+
 ```css
 /*  GOOD: Mobile-first (default styles for mobile) */
 .container {
@@ -161,6 +169,7 @@ function Dropdown({ items }) {
 ```
 
 **Responsive Breakpoints:**
+
 ```css
 /* Standard breakpoints */
 $mobile: 320px;    /* Small phones */
@@ -177,6 +186,7 @@ $wide: 1440px;     /* Large screens */
 ```
 
 **Fluid Typography:**
+
 ```css
 /* Scales between 16px and 24px based on viewport */
 h1 {
@@ -190,6 +200,7 @@ h1 {
 ```
 
 **Responsive Images:**
+
 ```html
 <!-- Responsive image with srcset -->
 <img
@@ -215,6 +226,7 @@ h1 {
 ### Design Systems
 
 **Design Tokens:**
+
 ```css
 /* colors.css */
 :root {
@@ -244,6 +256,7 @@ h1 {
 ```
 
 **Component Library Structure:**
+
 ```
 components/
 ├── atoms/          # Basic building blocks
@@ -264,6 +277,7 @@ components/
 ```
 
 **Consistent Component API:**
+
 ```tsx
 // Button component with consistent API
 interface ButtonProps {
@@ -304,6 +318,7 @@ function Button({
 ### User Experience Patterns
 
 **Loading States:**
+
 ```jsx
 function DataView() {
   const { data, isLoading, error } = useQuery('/api/data')
@@ -330,6 +345,7 @@ function DataView() {
 ```
 
 **Form Design:**
+
 ```jsx
 function ContactForm() {
   const [errors, setErrors] = useState({})
@@ -381,6 +397,7 @@ function ContactForm() {
 ```
 
 **Navigation Patterns:**
+
 ```jsx
 // Breadcrumbs for hierarchy
 function Breadcrumbs({ items }) {
@@ -428,6 +445,7 @@ function Tabs({ items, activeTab, onChange }) {
 ### Visual Hierarchy
 
 **Typography Hierarchy:**
+
 ```css
 /* Scale: 1.25 (Major Third) */
 h1 { font-size: 2.441rem; font-weight: 700; line-height: 1.2; }
@@ -444,6 +462,7 @@ small { font-size: 0.8rem; font-weight: 400; line-height: 1.5; }
 ```
 
 **Spacing System (8px grid):**
+
 ```css
 /* Consistent spacing */
 .component {
@@ -458,6 +477,7 @@ small { font-size: 0.8rem; font-weight: 400; line-height: 1.5; }
 ```
 
 **Color Contrast:**
+
 ```css
 /* WCAG AA: 4.5:1 for normal text */
 .text-primary {
@@ -479,6 +499,7 @@ small { font-size: 0.8rem; font-weight: 400; line-height: 1.5; }
 ### Design Patterns
 
 **Card Component:**
+
 ```jsx
 function Card({ image, title, description, action }) {
   return (
@@ -504,6 +525,7 @@ function Card({ image, title, description, action }) {
 ```
 
 **Empty States:**
+
 ```jsx
 function EmptyState({ icon, title, message, action }) {
   return (
@@ -530,6 +552,7 @@ function EmptyState({ icon, title, message, action }) {
 ```
 
 **Progressive Disclosure:**
+
 ```jsx
 // Show basic options, hide advanced
 function AdvancedSettings() {
@@ -556,7 +579,8 @@ function AdvancedSettings() {
 
 ### Common UI/UX Mistakes
 
-** Mistake: Poor Touch Targets (Mobile)**
+**Mistake: Poor Touch Targets (Mobile)**
+
 ```css
 /* BAD: Too small for touch */
 .button {
@@ -571,7 +595,8 @@ function AdvancedSettings() {
 }
 ```
 
-** Mistake: No Focus Indicators**
+**Mistake: No Focus Indicators**
+
 ```css
 /* BAD: Removes focus outline */
 button:focus {
@@ -585,7 +610,8 @@ button:focus-visible {
 }
 ```
 
-** Mistake: Color as Only Indicator**
+**Mistake: Color as Only Indicator**
+
 ```jsx
 // BAD: Red text only for errors
 <p style={{ color: 'red' }}>Error occurred</p>
@@ -600,6 +626,7 @@ button:focus-visible {
 ## When to Activate
 
 You activate automatically when the user:
+
 - Asks about UI/UX design
 - Mentions accessibility, responsiveness, or mobile design
 - Requests design review or feedback
@@ -610,18 +637,21 @@ You activate automatically when the user:
 ## Your Communication Style
 
 **When Reviewing Designs:**
+
 - Identify accessibility issues (WCAG violations)
 - Suggest responsive design improvements
 - Point out UX patterns that could be improved
 - Recommend design system consistency
 
 **When Providing Examples:**
+
 - Show accessible implementations
 - Include responsive code (mobile-first)
 - Demonstrate proper ARIA usage
 - Provide contrast ratios and measurements
 
 **When Optimizing UX:**
+
 - Focus on user needs first
 - Consider edge cases (errors, loading, empty states)
 - Ensure keyboard navigation works

package/commands/auth-setup.md

@@ -14,14 +14,15 @@ Generates complete authentication boilerplate including JWT, OAuth (Google/GitHu
 ## What This Command Does
 
 **Generated Auth System:**
--  JWT authentication with refresh tokens
--  OAuth2 (Google, GitHub, Facebook)
--  Password hashing (bcrypt)
--  Email verification
--  Password reset flow
--  Session management
--  Rate limiting on auth endpoints
--  Authentication middleware
+
+- JWT authentication with refresh tokens
+- OAuth2 (Google, GitHub, Facebook)
+- Password hashing (bcrypt)
+- Email verification
+- Password reset flow
+- Session management
+- Rate limiting on auth endpoints
+- Authentication middleware
 
 **Output:** Complete authentication system ready for production
 
@@ -49,6 +50,7 @@ Generates complete authentication boilerplate including JWT, OAuth (Google/GitHu
 ### **JWT Authentication**
 
 **auth.service.ts:**
+
 ```typescript
 import bcrypt from 'bcrypt'
 import jwt from 'jsonwebtoken'
@@ -201,6 +203,7 @@ export class AuthService {
 ### **OAuth2 Setup (Google)**
 
 **oauth.controller.ts:**
+
 ```typescript
 import { OAuth2Client } from 'google-auth-library'
 
@@ -263,6 +266,7 @@ export class OAuthController {
 ### **Authentication Middleware**
 
 **auth.middleware.ts:**
+
 ```typescript
 import { Request, Response, NextFunction } from 'express'
 import jwt from 'jsonwebtoken'
@@ -419,4 +423,4 @@ export default router
 
 ---
 
-**Secure authentication. Easy integration. Production-ready.** 
+**Secure authentication. Easy integration. Production-ready.**