@kkelly-offical/kkcode 0.1.2

package/src/skill/builtin/frontend-patterns.mjs

@@ -0,0 +1,120 @@
+export const name = "frontend-patterns"
+export const description = "Frontend development patterns reference: React/Vue/Svelte components, state management, performance, accessibility"
+
+export async function run(ctx) {
+  const topic = (ctx.args || "").trim().toLowerCase()
+
+  const sections = {
+    components: `## Component Patterns
+
+### Single Responsibility
+Each component does ONE thing. Split when:
+- Component exceeds ~150 lines
+- It has multiple unrelated state variables
+- It renders multiple distinct UI sections
+
+### Composition over Inheritance
+\`\`\`jsx
+// BAD: prop drilling
+<App user={user} theme={theme} locale={locale}>
+  <Page user={user} theme={theme} locale={locale}>
+    <Widget user={user} theme={theme} locale={locale} />
+
+// GOOD: composition + context
+<UserProvider><ThemeProvider><LocaleProvider>
+  <App><Page><Widget /></Page></App>
+</LocaleProvider></ThemeProvider></UserProvider>
+\`\`\`
+
+### Container vs Presentational
+- **Container**: fetches data, manages state, passes props down
+- **Presentational**: renders UI from props, no side effects, easily testable
+
+### Naming Conventions
+- Components: PascalCase (UserProfile, SearchBar)
+- Hooks: camelCase with "use" prefix (useAuth, useDebounce)
+- Utils: camelCase (formatDate, parseQuery)
+- Constants: UPPER_SNAKE_CASE (MAX_RETRIES, API_BASE_URL)`,
+
+    state: `## State Management
+
+### Local State First
+Use component state (useState/ref) until you NEED to share:
+- Form inputs, toggles, UI state → local
+- User session, theme, locale → global context
+- Server data → query cache (React Query / SWR / TanStack Query)
+
+### State Categories
+1. **UI State**: modals, tabs, scroll position → component state
+2. **Form State**: input values, validation → form library (react-hook-form, vee-validate)
+3. **Server State**: API responses → query cache with stale-while-revalidate
+4. **URL State**: filters, pagination → URL search params (source of truth)
+5. **Global State**: auth, theme → Context API or lightweight store (Zustand, Pinia)
+
+### Anti-Patterns
+- Don't put everything in global store
+- Don't duplicate server state in client store
+- Don't derive state that can be computed from existing state
+- Don't sync state between components — lift it to common parent`,
+
+    performance: `## Performance Patterns
+
+### Rendering
+- **Memoize expensive computations**: useMemo / computed
+- **Prevent unnecessary re-renders**: React.memo, shouldComponentUpdate
+- **Virtualize long lists**: react-window, vue-virtual-scroller (1000+ items)
+- **Lazy load routes and heavy components**: React.lazy, defineAsyncComponent
+
+### Network
+- **Debounce search inputs**: 300ms delay before API call
+- **Cache API responses**: stale-while-revalidate pattern
+- **Prefetch next page**: on hover or intersection observer
+- **Compress images**: WebP/AVIF, srcset for responsive, lazy loading
+
+### Bundle
+- **Code split by route**: dynamic import() for each route
+- **Tree shake**: use ESM imports, avoid barrel re-exports
+- **Analyze bundle**: webpack-bundle-analyzer, vite-plugin-visualizer
+- **External large deps**: load from CDN if rarely changing`,
+
+    a11y: `## Accessibility (a11y)
+
+### Semantic HTML First
+- Use \`<button>\` not \`<div onClick>\`
+- Use \`<nav>\`, \`<main>\`, \`<aside>\`, \`<article>\` landmarks
+- Use \`<label>\` with \`htmlFor\` for form inputs
+- Use heading hierarchy (h1 → h2 → h3, don't skip levels)
+
+### ARIA When Needed
+- \`aria-label\` for icon-only buttons
+- \`aria-expanded\` for accordions/dropdowns
+- \`aria-live="polite"\` for dynamic content updates
+- \`role="alert"\` for error messages
+
+### Keyboard Navigation
+- All interactive elements must be focusable (tab order)
+- Escape closes modals/dropdowns
+- Enter/Space activates buttons
+- Arrow keys navigate within lists/menus
+- Visible focus indicators (never \`outline: none\` without replacement)
+
+### Testing
+- aXe browser extension for automated checks
+- Screen reader testing (VoiceOver, NVDA)
+- Keyboard-only navigation testing
+- Color contrast ratio: 4.5:1 for text, 3:1 for large text`
+  }
+
+  if (topic && sections[topic]) {
+    return sections[topic]
+  }
+
+  const overview = Object.values(sections).join("\n\n---\n\n")
+  return `# Frontend Development Patterns
+
+Use \`/frontend-patterns <topic>\` for a specific section: components, state, performance, a11y
+
+---
+
+${overview}`
+}

package/src/skill/builtin/frontend.mjs

@@ -0,0 +1,188 @@
+import { readFile } from "node:fs/promises"
+import path from "node:path"
+
+export const name = "frontend"
+export const description = "Frontend development guidance with framework awareness (usage: /frontend <task description>)"
+
+async function detectCurrentFramework(cwd) {
+  try {
+    const pkg = JSON.parse(await readFile(path.join(cwd, "package.json"), "utf8"))
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies }
+    if (deps.next) return "next"
+    if (deps.nuxt) return "nuxt"
+    if (deps["@sveltejs/kit"] || deps.svelte) return "svelte"
+    if (deps["@angular/core"]) return "angular"
+    if (deps.vue) return "vue"
+    if (deps.react) return "react"
+  } catch { /* no package.json */ }
+  return null
+}
+
+const FRAMEWORK_GUIDES = {
+  vue: `## Vue 3 Frontend Development Guide
+
+### Component Architecture
+- Break UI into small, focused single-file components (.vue)
+- Use <script setup lang="ts"> for all components
+- Props: defineProps<{ title: string }>()
+- Events: defineEmits<{ (e: 'update', value: string): void }>()
+- Slots: use <slot> for content projection
+
+### State Management (Pinia)
+- One store per domain (useUserStore, useCartStore)
+- Use setup syntax: export const useXxxStore = defineStore('xxx', () => { ... })
+- Access stores in components: const store = useXxxStore()
+
+### Routing (Vue Router)
+- Define routes in src/router/index.ts
+- Use <RouterView> and <RouterLink>
+- Lazy-load pages: () => import('../views/About.vue')
+- Use route params: useRoute().params
+
+### Styling
+- <style scoped> for component styles (default)
+- CSS variables for theming
+- If Tailwind/UnoCSS is installed, use utility classes
+- If Element Plus / Ant Design Vue is installed, use their components
+
+### Data Fetching
+- Use composables: useFetch(), useApi()
+- Handle loading/error states in the component
+- Use onMounted() or watchEffect() for side effects`,
+
+  react: `## React Frontend Development Guide
+
+### Component Architecture
+- Functional components only (no class components)
+- One component per file, named export
+- Props interface: interface Props { title: string }
+- Use React.memo() for expensive pure components
+
+### State Management
+- Local state: useState()
+- Complex state: useReducer()
+- Global state: React Context or Zustand/Jotai
+- Server state: TanStack Query (React Query)
+
+### Routing (React Router v6)
+- createBrowserRouter with route objects
+- Use <Outlet> for nested routes
+- useParams(), useSearchParams(), useNavigate()
+- Lazy routes: lazy(() => import('./pages/About'))
+
+### Styling
+- CSS Modules (.module.css) or Tailwind CSS
+- Styled-components if already in deps
+- Avoid inline styles for complex styling
+
+### Data Fetching
+- Use useEffect + fetch for simple cases
+- Use TanStack Query for caching and deduplication
+- Handle loading/error/success states`,
+
+  next: `## Next.js Frontend Development Guide
+
+### App Router Architecture
+- Server Components by default (no 'use client')
+- Add 'use client' ONLY for: useState, useEffect, onClick, onChange, etc.
+- Layouts: app/layout.tsx (shared UI, persistent across navigation)
+- Pages: app/page.tsx, app/[slug]/page.tsx
+
+### Data Fetching
+- Server Components: async function + direct fetch/db calls
+- Client Components: use SWR or TanStack Query
+- Server Actions: 'use server' functions for mutations
+
+### Styling
+- Tailwind CSS (default with create-next-app)
+- CSS Modules for component-scoped styles
+- Use next/font for optimized font loading
+
+### Performance
+- Use next/image for optimized images
+- Use next/link for client-side navigation
+- Use loading.tsx for streaming/suspense
+- Use generateStaticParams for static generation`,
+
+  nuxt: `## Nuxt 3 Frontend Development Guide
+
+### Auto-imports
+- No need to import: ref, computed, watch, onMounted, etc.
+- No need to import components from components/ directory
+- No need to import composables from composables/ directory
+
+### Pages & Routing
+- File-based: pages/index.vue, pages/users/[id].vue
+- definePageMeta({ layout: 'admin', middleware: 'auth' })
+- Use NuxtLink for navigation
+- Use useRoute() for route params
+
+### Data Fetching
+- useFetch('/api/users') — SSR-friendly, auto-cached
+- useAsyncData('key', () => $fetch('/api/data'))
+- useLazyFetch for client-only fetching
+
+### State
+- useState('key', () => defaultValue) for SSR-safe state
+- Pinia with @pinia/nuxt for complex state
+
+### Server
+- server/api/ for API routes
+- server/middleware/ for server middleware
+- defineEventHandler() for route handlers`,
+
+  svelte: `## SvelteKit Frontend Development Guide
+
+### Runes (Svelte 5)
+- let count = $state(0) for reactive state
+- let doubled = $derived(count * 2) for computed values
+- $effect(() => { ... }) for side effects
+- $props() for component props
+
+### Routing
+- src/routes/+page.svelte for pages
+- src/routes/+layout.svelte for layouts
+- src/routes/+page.server.ts for server-side data loading
+- [param] for dynamic routes
+
+### Data Loading
+- +page.server.ts: export const load = async ({ params }) => { ... }
+- Access in page: let { data } = $props()
+
+### Styling
+- <style> is scoped by default in Svelte
+- Use Tailwind if installed
+- Use CSS variables for theming`,
+}
+
+export async function run(ctx) {
+  const task = (ctx.args || "").trim()
+  const cwd = ctx.cwd || process.cwd()
+  const framework = await detectCurrentFramework(cwd)
+
+  const parts = []
+
+  if (task) {
+    parts.push(`Task: ${task}`)
+    parts.push("")
+  }
+
+  if (framework && FRAMEWORK_GUIDES[framework]) {
+    parts.push(FRAMEWORK_GUIDES[framework])
+  } else if (framework) {
+    parts.push(`Detected framework: ${framework}. Use its standard conventions and idioms.`)
+  } else {
+    parts.push(`No framework detected in this project. If you need to create a frontend project, use /init <framework> first.`)
+    parts.push("")
+    parts.push("For a quick single-page app without a framework, consider using Vite:")
+    parts.push("  npm create vite@latest . -- --template vanilla-ts")
+  }
+
+  if (task) {
+    parts.push("")
+    parts.push("Now implement the task described above using the project's framework and conventions.")
+    parts.push("Break the work into components, create proper file structure, and use the framework's idioms.")
+  }
+
+  return parts.join("\n")
+}

package/src/skill/builtin/init.mjs

@@ -0,0 +1,220 @@
+export const name = "init"
+export const description = "Initialize a new project with framework scaffolding (usage: /init <framework>)"
+
+const GUIDES = {
+  vue: `Initialize a Vue 3 project with Vite. Follow these steps exactly:
+
+1. Run: npm create vite@latest . -- --template vue-ts
+   (If the directory is not empty, create in a subdirectory or confirm overwrite)
+
+2. Install dependencies: npm install
+
+3. Install common extras:
+   npm install vue-router@4 pinia
+   npm install -D @vitejs/plugin-vue
+
+4. Create the standard directory structure:
+   src/
+   ├── components/    # Reusable UI components
+   ├── views/         # Page-level components (routed)
+   ├── stores/        # Pinia stores
+   ├── router/        # Vue Router config
+   ├── composables/   # Shared composition functions
+   ├── assets/        # Static assets (images, fonts)
+   ├── styles/        # Global styles
+   ├── App.vue        # Root component
+   └── main.ts        # Entry point
+
+5. Code conventions:
+   - Use <script setup lang="ts"> in all .vue files
+   - Use Composition API (ref, reactive, computed, watch)
+   - Use defineProps<T>() and defineEmits<T>() for component interfaces
+   - Use <style scoped> for component styles
+   - Use Pinia for state management (defineStore with setup syntax)
+   - Use vue-router with typed route params
+
+6. Set up router in src/router/index.ts with createRouter + createWebHistory
+
+7. Set up a root Pinia store in src/main.ts with createPinia()
+
+After scaffolding, verify with: npm run dev (tell user to run manually)`,
+
+  react: `Initialize a React project with Vite. Follow these steps exactly:
+
+1. Run: npm create vite@latest . -- --template react-ts
+
+2. Install dependencies: npm install
+
+3. Install common extras:
+   npm install react-router-dom
+   npm install -D @types/react @types/react-dom
+
+4. Create the standard directory structure:
+   src/
+   ├── components/    # Reusable UI components
+   ├── pages/         # Page-level components (routed)
+   ├── hooks/         # Custom React hooks
+   ├── contexts/      # React context providers
+   ├── services/      # API calls and external services
+   ├── assets/        # Static assets
+   ├── styles/        # Global styles
+   ├── App.tsx        # Root component
+   └── main.tsx       # Entry point
+
+5. Code conventions:
+   - Use functional components with TypeScript
+   - Use hooks (useState, useEffect, useMemo, useCallback)
+   - Use React.FC<Props> or explicit return types
+   - Prefer named exports for components
+   - Use React Router v6 with createBrowserRouter
+
+After scaffolding, verify with: npm run dev (tell user to run manually)`,
+
+  next: `Initialize a Next.js project. Follow these steps exactly:
+
+1. Run: npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
+
+2. Directory structure (App Router):
+   src/
+   ├── app/
+   │   ├── layout.tsx      # Root layout
+   │   ├── page.tsx        # Home page
+   │   ├── globals.css     # Global styles
+   │   └── [feature]/
+   │       └── page.tsx    # Feature pages
+   ├── components/         # Shared components
+   ├── lib/                # Utility functions
+   └── types/              # TypeScript types
+
+3. Code conventions:
+   - Server Components by default (no 'use client' unless needed)
+   - Add 'use client' only for interactive components (useState, onClick, etc.)
+   - Use Next.js Image, Link, and metadata APIs
+   - Use Route Handlers (app/api/) for API endpoints
+
+After scaffolding, verify with: npm run dev (tell user to run manually)`,
+
+  nuxt: `Initialize a Nuxt 3 project. Follow these steps exactly:
+
+1. Run: npx nuxi@latest init .
+
+2. Install dependencies: npm install
+
+3. Directory structure:
+   ├── pages/          # File-based routing (auto-registered)
+   ├── components/     # Auto-imported components
+   ├── composables/    # Auto-imported composables
+   ├── layouts/        # Layout components
+   ├── stores/         # Pinia stores (install @pinia/nuxt)
+   ├── server/         # Server routes and middleware
+   ├── assets/         # Build-processed assets
+   ├── public/         # Static files
+   └── nuxt.config.ts  # Nuxt configuration
+
+4. Code conventions:
+   - Auto-imports: no need to import ref, computed, useState, etc.
+   - Pages auto-register routes based on file structure
+   - Components auto-register based on file name
+   - Use useFetch() or useAsyncData() for data fetching
+   - Use definePageMeta() for page-level metadata
+
+After scaffolding, verify with: npm run dev (tell user to run manually)`,
+
+  svelte: `Initialize a SvelteKit project. Follow these steps exactly:
+
+1. Run: npx sv create . (select skeleton project + TypeScript)
+
+2. Install dependencies: npm install
+
+3. Directory structure:
+   src/
+   ├── routes/         # File-based routing
+   │   ├── +layout.svelte
+   │   ├── +page.svelte
+   │   └── [feature]/
+   │       └── +page.svelte
+   ├── lib/
+   │   ├── components/ # Shared components
+   │   └── server/     # Server-only modules
+   └── app.html        # HTML template
+
+4. Code conventions:
+   - Use +page.svelte for pages, +layout.svelte for layouts
+   - Use +page.server.ts for server-side data loading
+   - Use $state, $derived, $effect runes (Svelte 5)
+   - Use <script lang="ts"> for TypeScript
+
+After scaffolding, verify with: npm run dev (tell user to run manually)`,
+
+  node: `Initialize a Node.js project. Follow these steps exactly:
+
+1. Run: npm init -y
+
+2. Update package.json: set "type": "module" for ESM
+
+3. Install TypeScript (recommended):
+   npm install -D typescript @types/node tsx
+   npx tsc --init
+
+4. Directory structure:
+   src/
+   ├── index.ts       # Entry point
+   ├── lib/            # Core logic
+   ├── utils/          # Utility functions
+   └── types/          # TypeScript types
+
+5. Add scripts to package.json:
+   "dev": "tsx watch src/index.ts",
+   "build": "tsc",
+   "start": "node dist/index.js"`,
+
+  express: `Initialize an Express.js API project. Follow these steps exactly:
+
+1. Run: npm init -y
+
+2. Update package.json: set "type": "module"
+
+3. Install dependencies:
+   npm install express cors
+   npm install -D typescript @types/node @types/express tsx
+
+4. Initialize TypeScript: npx tsc --init
+
+5. Directory structure:
+   src/
+   ├── index.ts        # Server entry + app.listen()
+   ├── routes/          # Route handlers
+   ├── middleware/       # Custom middleware
+   ├── controllers/     # Request handlers
+   ├── services/        # Business logic
+   ├── models/          # Data models
+   └── types/           # TypeScript types
+
+6. Add scripts:
+   "dev": "tsx watch src/index.ts",
+   "build": "tsc",
+   "start": "node dist/index.js"`,
+}
+
+const AVAILABLE = Object.keys(GUIDES)
+
+export async function run(ctx) {
+  const arg = (ctx.args || "").trim().toLowerCase()
+
+  if (!arg) {
+    return `Please specify a framework to initialize. Available options:
+
+${AVAILABLE.map(f => `- /init ${f}`).join("\n")}
+
+Example: /init vue`
+  }
+
+  const guide = GUIDES[arg]
+  if (!guide) {
+    return `Unknown framework "${arg}". Available options: ${AVAILABLE.join(", ")}
+
+Example: /init vue`
+  }
+
+  return guide
+}

package/src/skill/builtin/review.mjs

@@ -0,0 +1,49 @@
+export const name = "review"
+export const description = "Review code changes for bugs, security issues, and quality (usage: /review [file or path])"
+
+export async function run(ctx) {
+  const target = (ctx.args || "").trim()
+
+  const scope = target
+    ? `Focus on: ${target}`
+    : `Review all uncommitted changes (git diff)`
+
+  return `Perform a thorough code review.
+
+${scope}
+
+Steps:
+1. Run \`git diff\` to see all uncommitted changes. If a specific file/path was given, use \`git diff -- <path>\`.
+2. If no uncommitted changes, run \`git diff HEAD~1\` to review the last commit.
+3. For each changed file, analyze:
+
+   **Correctness**
+   - Logic errors, off-by-one, null/undefined access
+   - Missing error handling or edge cases
+   - Race conditions or async issues
+
+   **Security**
+   - Injection vulnerabilities (SQL, XSS, command injection)
+   - Hardcoded secrets or credentials
+   - Unsafe deserialization or eval usage
+   - Missing input validation at system boundaries
+
+   **Quality**
+   - Naming clarity and code readability
+   - Unnecessary complexity or dead code
+   - Missing or misleading comments
+   - Consistent style with surrounding code
+
+   **Performance**
+   - N+1 queries or unnecessary loops
+   - Missing memoization for expensive operations
+   - Large allocations in hot paths
+
+4. Output findings grouped by severity:
+   - 🔴 Critical: bugs or security issues that must be fixed
+   - 🟡 Warning: potential issues worth addressing
+   - 🟢 Suggestion: improvements that are nice to have
+
+5. For each finding, show the exact file and line, explain the issue, and suggest a fix.
+6. End with a brief summary: total findings by severity, overall assessment.`
+}

package/src/skill/builtin/security-checklist.mjs

@@ -0,0 +1,80 @@
+export const name = "security-checklist"
+export const description = "Security review checklist: OWASP Top 10, dependency audit, secret management, authentication"
+
+export async function run(ctx) {
+  const scope = (ctx.args || "").trim()
+
+  return `# Security Review Checklist
+${scope ? `\nScope: ${scope}\n` : ""}
+Run through each category below. For each item, check the codebase and report findings.
+
+## 1. Injection (OWASP A03)
+- [ ] SQL queries use parameterized statements (never string concatenation)
+- [ ] NoSQL queries avoid operator injection (\`$gt\`, \`$ne\` in user input)
+- [ ] Shell commands avoid user input (or use \`execFile\` with explicit args, never \`exec\` with template strings)
+- [ ] LDAP queries are properly escaped
+- [ ] Path traversal: \`path.resolve\` + verify result is within allowed directory
+
+## 2. Authentication (OWASP A07)
+- [ ] Passwords hashed with bcrypt/argon2 (NOT MD5/SHA1/SHA256)
+- [ ] Rate limiting on login endpoint (e.g., 5 attempts per minute)
+- [ ] Session/JWT expires (access: 15min, refresh: 7d max)
+- [ ] Password reset tokens are single-use and time-limited
+- [ ] Multi-factor authentication available for sensitive operations
+
+## 3. Access Control (OWASP A01)
+- [ ] Every endpoint checks authorization (not just authentication)
+- [ ] No IDOR: users cannot access other users' resources by changing ID
+- [ ] Admin endpoints require admin role verification
+- [ ] CORS configured with explicit allowed origins (not \`*\` in production)
+- [ ] File uploads validate type, size, and scan for malware
+
+## 4. Sensitive Data (OWASP A02)
+- [ ] HTTPS enforced (HSTS header set)
+- [ ] Sensitive data encrypted at rest (database, backups)
+- [ ] PII never logged (emails, passwords, tokens, SSN)
+- [ ] API responses don't leak internal errors or stack traces
+- [ ] Cookies: HttpOnly, Secure, SameSite=Strict/Lax
+
+## 5. Secrets Management
+- [ ] No hardcoded API keys, passwords, or tokens in source code
+- [ ] \`.env\` files listed in \`.gitignore\`
+- [ ] Secrets loaded from environment variables or secret manager
+- [ ] Different secrets for dev/staging/production
+- [ ] Run: \`grep -rn "password\\|secret\\|api.key\\|token" --include="*.{js,ts,py,go}" .\`
+
+## 6. Dependencies
+- [ ] Run \`npm audit\` / \`pip audit\` / \`cargo audit\` / \`go mod tidy\`
+- [ ] No critical/high severity vulnerabilities unresolved
+- [ ] Lock file committed and up to date
+- [ ] No deprecated packages with known CVEs
+- [ ] Dependabot or Renovate configured for automated updates
+
+## 7. XSS Prevention (OWASP A03)
+- [ ] User input escaped before rendering in HTML
+- [ ] No \`dangerouslySetInnerHTML\` / \`v-html\` with user content
+- [ ] No \`eval()\`, \`new Function()\`, or \`innerHTML\` with user data
+- [ ] Content-Security-Policy header set
+- [ ] SVG uploads sanitized (can contain scripts)
+
+## 8. CSRF Protection
+- [ ] State-changing requests require CSRF token
+- [ ] SameSite cookie attribute set
+- [ ] Custom headers required for API calls (e.g., X-Requested-With)
+
+## 9. Infrastructure
+- [ ] Docker containers don't run as root
+- [ ] No secrets in Dockerfile or docker-compose.yml
+- [ ] CI/CD secrets stored in platform secret manager (not in config files)
+- [ ] Production: debug mode disabled, verbose errors disabled
+- [ ] Logging: audit trail for auth events, data access, admin actions
+
+## 10. Summary Template
+
+After review, fill in:
+- **Critical Issues**: (must fix before deploy)
+- **High Issues**: (fix within this sprint)
+- **Medium Issues**: (plan to fix)
+- **Low Issues**: (nice to have)
+- **Overall Risk**: LOW / MEDIUM / HIGH / CRITICAL`
+}