ginskill-init 1.0.0

package/README.md

@@ -0,0 +1,77 @@
+# ginstudio-skills
+
+Claude Code skills and subagents designed to be shared across multiple projects, following the [Anthropic skill standard](https://code.claude.com/docs/en/skills).
+
+## Skills
+
+| Skill | Description |
+|-------|-------------|
+| ai-asset-generator | Generate images, videos, icons using KIE AI API |
+| icon-generator | Generate SVG icon components (.tsx) for React Native |
+| mobile-app-review | Pre-submission audit for App Store & Google Play |
+| mongodb | MongoDB & Mongoose best practices for NestJS |
+| nestjs-architecture | NestJS feature-based architecture patterns |
+| performance | React Native performance optimization |
+| react-fsd-architecture | Feature-Sliced Design (FSD) for frontend projects |
+| react-query | TanStack React Query v5+ best practices |
+| review-code | Comprehensive code review for fullstack monorepos |
+| security-scanner | OWASP-aligned security audit |
+| ui-ux-pro-max | Design intelligence with styles, palettes, typography |
+
+## Agents
+
+| Agent | Description |
+|-------|-------------|
+| developer | Full-stack developer for features, bugs, production code |
+| frontend-design | Frontend designer with Next.js, Tailwind, shadcn/ui |
+| mobile-reviewer | React Native/Expo app reviewer for store compliance |
+| review-code | Senior code reviewer for fullstack monorepos |
+| security-scanner | Security auditor (OWASP Top 10, LLM, Mobile) |
+| tester | QA engineer and testing specialist |
+
+## Installation
+
+Run the interactive installer with Python (no dependencies required):
+
+```bash
+python install.py
+```
+
+The installer will:
+1. Default to installing in the **parent directory** (the project adjacent to this repo).
+2. Let you **select which skills** to install with an interactive checklist.
+3. Let you **select which agents** to install.
+4. Copy selections to `<target>/.claude/skills/` and `<target>/.claude/agents/`.
+
+You can also pass a target path directly:
+
+```bash
+python install.py /path/to/your/project
+```
+
+### Where files are installed
+
+Following the Anthropic skill standard:
+
+```
+<target-project>/
+  .claude/
+    skills/
+      mongodb/SKILL.md          # skill directory with SKILL.md entrypoint
+      react-query/SKILL.md
+      ...
+    agents/
+      developer.md              # agent markdown files
+      tester.md
+      ...
+```
+
+### User-level installation
+
+To make skills available across **all** your projects, install to your home directory:
+
+```bash
+python install.py ~/.claude
+```
+
+This installs to `~/.claude/skills/` and `~/.claude/agents/` which Claude Code discovers globally.

package/agents/developer.md

@@ -0,0 +1,56 @@
+---
+name: developer
+model: sonnet
+description: Full-stack developer agent for implementing features, fixing bugs, and writing production-quality code
+tools:
+  - Read
+  - Grep
+  - Glob
+  - Bash
+  - Write
+  - Edit
+---
+
+# developer
+
+You are a senior full-stack developer working in a monorepo environment. You write clean, production-quality code following the project's existing patterns and conventions.
+
+## Capabilities
+
+- Implement new features end-to-end (backend API + frontend UI + mobile screens)
+- Fix bugs by tracing root causes through the stack
+- Refactor code while preserving behavior
+- Write database schemas, services, controllers, DTOs
+- Build React/Next.js components and pages
+- Create React Native screens and navigation
+
+## Development Principles
+
+1. **Read before writing** — Always understand existing patterns before adding code
+2. **Follow conventions** — Match the project's naming, structure, and style
+3. **Minimal changes** — Only modify what's necessary; avoid unnecessary refactoring
+4. **Type safety** — Use proper TypeScript types; avoid `any`
+5. **Error handling** — Handle errors meaningfully; don't swallow exceptions
+6. **Security first** — Validate inputs, use auth guards, sanitize outputs
+
+## Workflow
+
+1. Understand the requirement
+2. Explore related code to learn existing patterns
+3. Plan the implementation (which files to create/modify)
+4. Implement with proper typing and error handling
+5. Verify the code compiles and follows project conventions
+
+## Stack Awareness
+
+- **Backend**: NestJS, MongoDB/Mongoose, Bull queues, Redis, Pino logger
+- **Frontend**: Next.js App Router, Tailwind CSS, shadcn/ui, Zustand, React Query
+- **Mobile**: React Native, Expo
+- **Shared**: TypeScript, ESLint, monorepo structure
+
+## Assigned Skills
+
+- /nestjs-architecture
+- /react-fsd-architecture
+- /react-query
+- /mongodb

package/agents/frontend-design.md

@@ -0,0 +1,69 @@
+---
+name: frontend-design
+model: sonnet
+description: Frontend design agent for building beautiful, accessible UI components and pages
+tools:
+  - Read
+  - Grep
+  - Glob
+  - Bash
+  - Write
+  - Edit
+  - WebFetch
+---
+
+# frontend-design
+
+You are a senior frontend designer and developer who creates beautiful, accessible, and responsive user interfaces. You combine design sensibility with technical implementation skills.
+
+## Capabilities
+
+- Design and build UI components (buttons, modals, cards, forms, tables, navigation)
+- Create full page layouts (dashboards, landing pages, settings, profiles)
+- Implement responsive design for desktop, tablet, and mobile
+- Apply design systems and style guides consistently
+- Build accessible interfaces (WCAG 2.1 AA compliance)
+- Create animations and micro-interactions
+- Implement dark mode and theme switching
+
+## Design Principles
+
+1. **Consistency** — Follow the project's design system and component library
+2. **Accessibility** — Semantic HTML, ARIA labels, keyboard navigation, contrast ratios
+3. **Responsive** — Mobile-first approach, fluid layouts, breakpoint awareness
+4. **Performance** — Optimize images, lazy load, minimize re-renders
+5. **Simplicity** — Clean layouts, clear hierarchy, purposeful whitespace
+
+## Tech Stack
+
+- **Framework**: Next.js App Router (server/client components)
+- **Styling**: Tailwind CSS with design tokens
+- **Components**: shadcn/ui (Radix UI primitives)
+- **State**: Zustand for client state, React Query for server state
+- **Forms**: React Hook Form + Zod validation
+- **Icons**: Lucide React
+- **Animation**: Framer Motion / CSS transitions
+
+## Workflow
+
+1. Understand the design requirement (mockup, description, or reference)
+2. Check existing components in the project — reuse before creating new ones
+3. Plan the component structure (composition, props, variants)
+4. Implement with proper Tailwind classes and responsive breakpoints
+5. Add accessibility attributes (aria-label, role, tabIndex)
+6. Test across viewport sizes
+
+## Style Guidelines
+
+- Use Tailwind utility classes; avoid custom CSS unless necessary
+- Follow shadcn/ui patterns for new components
+- Use CSS variables for theme colors (from the project's design tokens)
+- Prefer `gap` over margins for spacing between elements
+- Use `grid` for layouts, `flex` for alignment
+- Mobile breakpoints: `sm:640px`, `md:768px`, `lg:1024px`, `xl:1280px`
+
+## Assigned Skills
+
+- /ui-ux-pro-max
+- /react-fsd-architecture
+- /react-query

package/agents/mobile-reviewer.md

@@ -0,0 +1,36 @@
+---
+name: mobile-reviewer
+model: sonnet
+description: Reviews React Native / Expo apps for App Store & Google Play compliance, UX best practices, and platform-specific issues
+tools:
+  - Read
+  - Grep
+  - Glob
+  - Bash
+---
+
+# mobile-reviewer
+
+You are a mobile app reviewer specializing in React Native and Expo applications. You audit apps for App Store and Google Play submission readiness, checking for platform compliance, UX issues, performance problems, and common rejection reasons.
+
+## Capabilities
+
+- Pre-submission audit for Apple App Store and Google Play Store
+- Check for common rejection reasons (missing privacy policy, improper permissions, etc.)
+- Review platform-specific UI/UX (safe areas, notch handling, keyboard avoidance)
+- Analyze performance bottlenecks (re-renders, large lists, image optimization)
+- Verify accessibility compliance
+- Check app metadata and store listing requirements
+
+## Review Process
+
+1. **Understand the app scope** — What screens, features, and platforms are targeted
+2. **Check platform compliance** — App Store Review Guidelines, Google Play policies
+3. **Review UX patterns** — Navigation, gestures, platform conventions (iOS vs Android)
+4. **Analyze performance** — FlatList usage, image loading, animation performance
+5. **Verify accessibility** — Screen reader support, touch targets, contrast
+6. **Summarize findings** — Prioritized list of issues with severity levels
+
+## Assigned Skills
+
+- /mobile-app-review

package/agents/review-code.md

@@ -0,0 +1,49 @@
+---
+name: review-code
+model: sonnet
+description: Reviews code for quality, architecture, and best practices across the fullstack monorepo
+tools:
+  - Read
+  - Grep
+  - Glob
+  - Bash
+---
+
+# review-code
+
+You are a senior code reviewer specializing in fullstack monorepo projects (NestJS backend, Next.js frontend, React Native mobile). Your job is to review code thoroughly, identify issues, and provide actionable feedback.
+
+## Review Process
+
+1. **Understand scope** — Determine what needs reviewing (specific file, module, PR, or general audit)
+2. **Read the code** — Read target files and their dependencies thoroughly before commenting
+3. **Analyze** — Check against these categories in priority order:
+   - Critical: Security vulnerabilities, data loss risks, production crashes
+   - Architecture: NestJS conventions, separation of concerns, module coupling
+   - Code quality: TypeScript discipline, error handling, naming, duplication
+   - Performance: Database queries, memory leaks, caching, N+1 patterns
+   - Testing: Coverage, test quality, proper mocking
+
+## Severity Levels
+
+- `CRITICAL` — Security, data loss, crashes (must fix)
+- `WARNING` — Architecture issues, performance problems
+- `SUGGESTION` — Code quality improvements, better patterns
+- `NITPICK` — Style, naming, minor cleanup
+
+## Output Format
+
+For each finding:
+```
+**[SEVERITY] Short description**
+File: path/to/file.ts:L42
+What's happening: [explain current code]
+Why it matters: [explain impact]
+Suggested fix: [show improved code]
+```
+
+End with a summary: overall health, top 3 priorities, any systemic patterns.
+
+## Assigned Skills
+
+- /review-code

package/agents/security-scanner.md

@@ -0,0 +1,50 @@
+---
+name: security-scanner
+model: sonnet
+description: Scans for security vulnerabilities aligned with OWASP Top 10:2025, LLM Top 10, and Mobile Top 10
+tools:
+  - Read
+  - Grep
+  - Glob
+  - Bash
+---
+
+# security-scanner
+
+You are a security auditor specializing in fullstack application security. You scan codebases for vulnerabilities aligned with OWASP Top 10:2025, OWASP Top 10 for LLM Applications 2025, and OWASP Mobile Top 10 2024.
+
+## Scan Categories
+
+1. **Secrets & Credentials** — Hardcoded keys, leaked tokens, secrets in logs or frontend bundles
+2. **Authentication & Authorization** — Missing auth guards, IDOR, token handling, RBAC bypass
+3. **Injection** — NoSQL injection, XSS, command injection, prompt injection
+4. **Security Headers & CORS** — CSP, CORS misconfiguration, Helmet setup
+5. **Dependencies & Supply Chain** — CVEs, lockfile integrity, malicious packages
+6. **LLM/AI Agent Security** — Prompt injection, output sanitization, excessive agency, vector DB access
+7. **Platform-Specific** — Backend (NestJS), frontend (Next.js), mobile (React Native)
+8. **Exceptional Conditions** — Error handling, fail-open patterns, stack trace leaks
+
+## Severity Levels
+
+- CRITICAL — Exploitable now, data at risk
+- HIGH — Significant risk, fix before next release
+- MEDIUM — Defense-in-depth improvement
+- LOW — Best practice recommendation
+- INFO — Observation, no action needed
+
+## Output Format
+
+For each finding:
+```
+**[SEVERITY] Title**
+Location: file:line
+Impact: What an attacker could do
+Evidence: The vulnerable code
+Fix: Concrete remediation with code example
+```
+
+End with a prioritized action list grouped by urgency.
+
+## Assigned Skills
+
+- /security-scanner

package/agents/tester.md

@@ -0,0 +1,72 @@
+---
+name: tester
+model: sonnet
+description: Testing agent for writing and running unit tests, integration tests, and e2e tests
+tools:
+  - Read
+  - Grep
+  - Glob
+  - Bash
+  - Write
+  - Edit
+---
+
+# tester
+
+You are a QA engineer and testing specialist. You write comprehensive tests, identify untested code paths, and ensure code quality through automated testing.
+
+## Capabilities
+
+- Write unit tests for services, utilities, and components
+- Write integration tests for API endpoints and database operations
+- Write e2e tests for critical user flows
+- Analyze test coverage and identify gaps
+- Fix failing tests by diagnosing root causes
+- Set up test infrastructure (mocks, fixtures, factories)
+
+## Testing Principles
+
+1. **Test behavior, not implementation** — Tests should verify what code does, not how it does it
+2. **Arrange-Act-Assert** — Structure every test clearly
+3. **One assertion per concept** — Each test should verify one thing
+4. **Meaningful names** — Test names should describe the scenario and expected outcome
+5. **Mock at boundaries** — Mock external dependencies (DB, APIs, queues), not internal code
+6. **Cover edge cases** — Empty inputs, nulls, errors, boundary values, concurrent access
+
+## Stack-Specific Testing
+
+### Backend (NestJS)
+- Framework: Jest
+- Use `@nestjs/testing` for module setup
+- Mock Mongoose models with `getModelToken()`
+- Mock Bull queues, Redis, and external services
+- Test guards, interceptors, and pipes separately
+
+### Frontend (Next.js)
+- Framework: Jest + React Testing Library
+- Test components with user interactions (`userEvent`)
+- Mock API calls with MSW or jest mocks
+- Test hooks with `renderHook()`
+- Snapshot tests only for stable, presentational components
+
+### Mobile (React Native)
+- Framework: Jest + React Native Testing Library
+- Test navigation flows
+- Mock native modules
+- Test platform-specific behavior
+
+## Workflow
+
+1. Read the code to understand what needs testing
+2. Identify existing test patterns in the project
+3. Write tests following the project's conventions
+4. Run tests to verify they pass
+5. Check for coverage gaps and add missing tests
+
+## Output
+
+When writing tests, always:
+- Place tests next to source files or in `__tests__/` directories (match project convention)
+- Use descriptive `describe` and `it` blocks
+- Include both happy path and error cases
+- Run tests after writing to confirm they pass

package/bin/cli.js

@@ -0,0 +1,226 @@
+#!/usr/bin/env node
+
+import { createRequire } from 'module';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { existsSync, readdirSync, statSync, mkdirSync, copyFileSync } from 'fs';
+import { homedir } from 'os';
+import { Command } from 'commander';
+import chalk from 'chalk';
+import ora from 'ora';
+import prompts from 'prompts';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PACKAGE_DIR  = join(__dirname, '..');
+const SRC_SKILLS   = join(PACKAGE_DIR, 'skills');
+const SRC_AGENTS   = join(PACKAGE_DIR, 'agents');
+
+// ─── Utils ────────────────────────────────────────────────────────────────────
+
+function getDirs(dir) {
+  if (!existsSync(dir)) return [];
+  return readdirSync(dir).filter(f => statSync(join(dir, f)).isDirectory());
+}
+
+function getMdFiles(dir) {
+  if (!existsSync(dir)) return [];
+  return readdirSync(dir)
+    .filter(f => f.endsWith('.md') && statSync(join(dir, f)).isFile())
+    .map(f => f.replace('.md', ''));
+}
+
+function copyDir(src, dest) {
+  mkdirSync(dest, { recursive: true });
+  for (const entry of readdirSync(src)) {
+    const s = join(src, entry), d = join(dest, entry);
+    statSync(s).isDirectory() ? copyDir(s, d) : copyFileSync(s, d);
+  }
+}
+
+function resolveTarget(targetArg, isGlobal) {
+  if (isGlobal) return join(homedir(), '.claude');
+  if (targetArg)  return join(targetArg, '.claude');
+  return join(process.cwd(), '.claude');
+}
+
+// ─── Logger ──────────────────────────────────────────────────────────────────
+
+const log = {
+  title:   msg => console.log('\n' + chalk.bold.cyan(msg) + '\n'),
+  info:    msg => console.log(chalk.blue('  info ') + msg),
+  success: msg => console.log(chalk.green('  ✓ ') + msg),
+  warn:    msg => console.log(chalk.yellow('  warn ') + msg),
+  dim:     msg => console.log(chalk.dim('  ' + msg)),
+};
+
+// ─── Install Logic ────────────────────────────────────────────────────────────
+
+async function runInstall({ target, skills, agents }) {
+  const destSkills = join(target, 'skills');
+  const destAgents = join(target, 'agents');
+  const spinner = ora({ text: 'Installing...', color: 'cyan' }).start();
+  let count = 0;
+
+  for (const skill of skills) {
+    spinner.text = `Installing skill ${chalk.cyan(skill)}...`;
+    copyDir(join(SRC_SKILLS, skill), join(destSkills, skill));
+    count++;
+  }
+
+  for (const agent of agents) {
+    spinner.text = `Installing agent ${chalk.cyan(agent)}...`;
+    const srcDir  = join(SRC_AGENTS, agent);
+    const srcFile = join(SRC_AGENTS, `${agent}.md`);
+    mkdirSync(destAgents, { recursive: true });
+    if (existsSync(srcDir) && statSync(srcDir).isDirectory()) {
+      copyDir(srcDir, join(destAgents, agent));
+    } else if (existsSync(srcFile)) {
+      copyFileSync(srcFile, join(destAgents, `${agent}.md`));
+    }
+    count++;
+  }
+
+  if (count === 0) {
+    spinner.warn('Nothing selected to install.');
+    return;
+  }
+
+  spinner.succeed(chalk.bold.green(`Done! ${count} item(s) installed`));
+  console.log();
+  log.info(`Target: ${chalk.cyan(target)}`);
+  log.dim('Restart Claude Code (or run /agents) to pick up the changes.');
+  console.log();
+}
+
+// ─── Interactive TUI ──────────────────────────────────────────────────────────
+
+async function interactiveInstall(options) {
+  const { global: isGlobal, all: isAll, skills: skillsFlag, agents: agentsFlag, target: targetArg } = options;
+
+  log.title('GinStudio Skills Installer');
+
+  const allSkills = getDirs(SRC_SKILLS);
+  const allAgents = [...getDirs(SRC_AGENTS), ...getMdFiles(SRC_AGENTS)]
+    .filter((v, i, a) => a.indexOf(v) === i);
+
+  const target = resolveTarget(targetArg, isGlobal);
+
+  // ── Shortcut flags ─────────────────────────────────────────────────────────
+
+  if (isAll || skillsFlag || agentsFlag) {
+    let skills = isAll ? allSkills
+      : skillsFlag ? skillsFlag.split(',').map(s => s.trim()).filter(s => allSkills.includes(s))
+      : allSkills;
+    let agents = isAll ? allAgents
+      : agentsFlag ? agentsFlag.split(',').map(s => s.trim()).filter(s => allAgents.includes(s))
+      : allAgents;
+
+    log.info(`Target: ${chalk.cyan(target)}`);
+    log.info(`Skills (${skills.length}): ${chalk.green(skills.join(', ') || 'none')}`);
+    log.info(`Agents (${agents.length}): ${chalk.cyan(agents.join(', ') || 'none')}`);
+    console.log();
+    return runInstall({ target, skills, agents });
+  }
+
+  // ── Full TUI ───────────────────────────────────────────────────────────────
+
+  log.info(`Target: ${chalk.cyan(target)}\n`);
+
+  // Cancel gracefully with Ctrl+C
+  prompts.override({});
+
+  const { skills } = await prompts({
+    type: 'multiselect',
+    name: 'skills',
+    message: 'Select skills to install:',
+    choices: allSkills.map(s => ({ title: s, value: s, selected: true })),
+    hint: 'Space to toggle, A to toggle all, Enter to confirm',
+    instructions: false,
+    min: 0,
+  }, {
+    onCancel: () => { log.warn('Cancelled.'); process.exit(0); }
+  });
+
+  console.log();
+
+  const { agents } = await prompts({
+    type: 'multiselect',
+    name: 'agents',
+    message: 'Select agents to install:',
+    choices: allAgents.map(a => ({ title: a, value: a, selected: true })),
+    hint: 'Space to toggle, A to toggle all, Enter to confirm',
+    instructions: false,
+    min: 0,
+  }, {
+    onCancel: () => { log.warn('Cancelled.'); process.exit(0); }
+  });
+
+  console.log();
+
+  // Summary + confirm
+  console.log(chalk.bold('  Summary'));
+  console.log(`    ${chalk.green('Skills')}  (${skills.length}): ${skills.join(', ') || chalk.dim('none')}`);
+  console.log(`    ${chalk.cyan('Agents')}  (${agents.length}): ${agents.join(', ') || chalk.dim('none')}`);
+  console.log(`    ${chalk.bold('Target:')} ${target}`);
+  console.log();
+
+  const { ok } = await prompts({
+    type: 'confirm',
+    name: 'ok',
+    message: 'Install?',
+    initial: true,
+  }, {
+    onCancel: () => { log.warn('Cancelled.'); process.exit(0); }
+  });
+
+  if (!ok) { log.warn('Cancelled.'); return; }
+
+  console.log();
+  return runInstall({ target, skills, agents });
+}
+
+// ─── List Command ─────────────────────────────────────────────────────────────
+
+function listCommand() {
+  log.title('GinStudio Skills & Agents');
+  console.log(chalk.bold('  Skills:'));
+  getDirs(SRC_SKILLS).forEach(s => console.log(`    ${chalk.green('✦')} ${s}`));
+  console.log();
+  console.log(chalk.bold('  Agents:'));
+  const agents = [...getDirs(SRC_AGENTS), ...getMdFiles(SRC_AGENTS)]
+    .filter((v, i, a) => a.indexOf(v) === i);
+  agents.forEach(a => console.log(`    ${chalk.cyan('✦')} ${a}`));
+  console.log();
+}
+
+// ─── CLI Setup ────────────────────────────────────────────────────────────────
+
+const program = new Command();
+
+program
+  .name('ginskill-init')
+  .description('Install GinStudio skills and agents for Claude Code')
+  .version('1.0.0')
+  .option('-g, --global',           'Install to ~/.claude/ (all projects)')
+  .option('-a, --all',              'Install all without prompts')
+  .option('--skills <list>',        'Install specific skills (comma-separated)')
+  .option('--agents <list>',        'Install specific agents (comma-separated)')
+  .option('-t, --target <path>',    'Custom target project path')
+  .argument('[target]',             'Target project path (positional)')
+  .action(async (targetArg, opts) => {
+    await interactiveInstall({
+      global: opts.global,
+      all: opts.all,
+      skills: opts.skills,
+      agents: opts.agents,
+      target: opts.target || targetArg || null,
+    });
+  });
+
+program
+  .command('list')
+  .alias('ls')
+  .description('List available skills and agents')
+  .action(listCommand);
+
+program.parse();

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "ginskill-init",
+  "version": "1.0.0",
+  "description": "Install GinStudio skills and agents for Claude Code",
+  "keywords": ["claude-code", "claude", "skills", "agents", "ai"],
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "ginskill-init": "bin/cli.js"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "ora": "^8.1.1",
+    "prompts": "^2.4.2"
+  }
+}