devendra-skill-package 1.0.2

package/.github/skills/custom-font-integrator/assets/FontTestScreen.js

@@ -0,0 +1,150 @@
+import React, { useState } from 'react';
+import { View, Text, ScrollView, StyleSheet, Switch } from 'react-native';
+
+/**
+ * FontTestScreen Component
+ * 
+ * A utility component to verify custom fonts are properly loaded
+ * in your React Native app for both Android and iOS
+ * 
+ * Usage:
+ * <FontTestScreen fonts={['Poppins-Regular', 'Poppins-Bold', 'Montserrat-Regular']} />
+ */
+
+const FontTestScreen = ({ 
+  fonts = [
+    'Poppins-Regular',
+    'Poppins-Bold',
+    'Poppins-SemiBold',
+    'Montserrat-Regular',
+    'Montserrat-Bold',
+    'Montserrat-Light',
+  ],
+  customText = 'The quick brown fox jumps over the lazy dog'
+}) => {
+  const [showFontName, setShowFontName] = useState(true);
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Font Test Screen</Text>
+        <Text style={styles.subtitle}>
+          Verify your custom fonts are loaded correctly
+        </Text>
+      </View>
+
+      <View style={styles.controlPanel}>
+        <Text style={styles.controlLabel}>Show Font Names</Text>
+        <Switch 
+          value={showFontName}
+          onValueChange={setShowFontName}
+          style={styles.switch}
+        />
+      </View>
+
+      <View style={styles.fontsList}>
+        {fonts.map((font, index) => (
+          <View key={index} style={styles.fontItem}>
+            {showFontName && (
+              <Text style={styles.fontLabel}>{font}</Text>
+            )}
+            <Text style={[styles.sampleText, { fontFamily: font }]}>
+              {customText}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      <View style={styles.footer}>
+        <Text style={styles.footerText}>
+          If fonts appear in your custom font above, your setup is working! ✓
+        </Text>
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  header: {
+    backgroundColor: '#2196F3',
+    padding: 20,
+    paddingTop: 40,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#fff',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: 'rgba(255,255,255,0.8)',
+  },
+  controlPanel: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+  },
+  controlLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#333',
+  },
+  switch: {
+    marginRight: 0,
+  },
+  fontsList: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  fontItem: {
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    padding: 16,
+    marginBottom: 12,
+    borderLeftWidth: 4,
+    borderLeftColor: '#2196F3',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 3,
+  },
+  fontLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#666',
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginBottom: 8,
+  },
+  sampleText: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: '#333',
+  },
+  footer: {
+    padding: 16,
+    backgroundColor: '#e8f5e9',
+    margin: 16,
+    borderRadius: 8,
+    borderLeftWidth: 4,
+    borderLeftColor: '#4caf50',
+  },
+  footerText: {
+    fontSize: 13,
+    color: '#2e7d32',
+    lineHeight: 18,
+  },
+});
+
+export default FontTestScreen;

package/.github/skills/custom-font-integrator/references/example-info-plist.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<!-- ... other configuration keys ... -->
+	
+	<!-- Add this array for custom fonts -->
+	<key>UIAppFonts</key>
+	<array>
+		<string>Poppins-Regular.ttf</string>
+		<string>Poppins-Bold.ttf</string>
+		<string>Poppins-SemiBold.ttf</string>
+		<string>Montserrat-Regular.ttf</string>
+		<string>Montserrat-Bold.ttf</string>
+		<string>Montserrat-Light.ttf</string>
+		<!-- Add more fonts as needed -->
+	</array>
+	
+	<!-- ... rest of your Info.plist ... -->
+</dict>
+</plist>

package/.github/skills/custom-font-integrator/scripts/setup-fonts.sh

@@ -0,0 +1,99 @@
+#!/bin/bash
+
+# React Native Custom Fonts Setup Script
+# This script automates font file organization for both Android and iOS
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Function to print colored output
+print_success() {
+  echo -e "${GREEN}✓ $1${NC}"
+}
+
+print_error() {
+  echo -e "${RED}✗ $1${NC}"
+}
+
+print_warning() {
+  echo -e "${YELLOW}⚠ $1${NC}"
+}
+
+# Check if we're in a React Native project
+if [ ! -f "package.json" ] || ! grep -q "react-native" package.json; then
+  print_error "Not in a React Native project directory"
+  exit 1
+fi
+
+# Get project name from package.json
+PROJECT_NAME=$(grep '"name"' package.json | head -1 | sed 's/.*"name": "\(.*\)".*/\1/')
+
+echo "Setting up fonts for React Native project: $PROJECT_NAME"
+echo ""
+
+# Resolve fonts path: use first argument if provided, else scan for .ttf files, else default
+if [ -n "$1" ]; then
+  FONTS_PATH="$1"
+  print_success "Using user-provided fonts path: $FONTS_PATH"
+else
+  SCANNED=$(find . -name "*.ttf" -not -path "./android/*" -not -path "./ios/*" -not -path "./node_modules/*" | head -1)
+  if [ -n "$SCANNED" ]; then
+    FONTS_PATH=$(dirname "$SCANNED")
+    FONTS_PATH="${FONTS_PATH#./}"
+    print_success "Fonts path detected by scan: $FONTS_PATH"
+  else
+    FONTS_PATH="assets/fonts"
+    print_warning "No .ttf files found. Using default path: $FONTS_PATH"
+  fi
+fi
+
+echo "INFO: fontsPath resolved to '$FONTS_PATH'"
+echo ""
+
+# Step 1: Create fonts directory
+print_warning "Step 1: Creating fonts directory structure..."
+mkdir -p "$FONTS_PATH"
+print_success "Created $FONTS_PATH/"
+
+# Step 2: Setup Android
+print_warning "Step 2: Setting up Android fonts..."
+mkdir -p android/app/src/main/assets/fonts
+print_success "Created android/app/src/main/assets/fonts/"
+
+# Copy any existing fonts
+if [ -n "$(ls "$FONTS_PATH"/*.ttf 2>/dev/null)" ]; then
+  cp "$FONTS_PATH"/*.ttf android/app/src/main/assets/fonts/ 2>/dev/null || true
+  print_success "Copied fonts to Android"
+else
+  print_warning "No .ttf files found in $FONTS_PATH/ yet. Remember to add your fonts!"
+fi
+
+# Step 3: Setup iOS — copy into app target folder (not ios/Fonts)
+print_warning "Step 3: Setting up iOS fonts..."
+IOS_TARGET_DIR="ios/${PROJECT_NAME}"
+mkdir -p "$IOS_TARGET_DIR"
+print_success "Created $IOS_TARGET_DIR/"
+
+# Copy any existing fonts
+if [ -n "$(ls "$FONTS_PATH"/*.ttf 2>/dev/null)" ]; then
+  cp "$FONTS_PATH"/*.ttf "$IOS_TARGET_DIR"/ 2>/dev/null || true
+  print_success "Copied fonts to iOS ($IOS_TARGET_DIR/)"
+fi
+
+echo ""
+print_success "Font setup complete!"
+echo ""
+echo "Next steps:"
+echo "1. Add your .ttf files to $FONTS_PATH/"
+echo "2. Run this script again to copy them to both platforms"
+echo "   (or pass the path directly: bash setup-fonts.sh <fontsPath>)"
+echo "3. For iOS: Open ios/${PROJECT_NAME}.xcworkspace in Xcode and:"
+echo "   - Add fonts to 'Copy Bundle Resources' in Build Phases"
+echo "   - Update Info.plist with the UIAppFonts array"
+echo "4. Rebuild with: npx react-native run-android && npx react-native run-ios"
+echo ""

package/.github/skills/encryption-decryption-utility/Instructions.md

@@ -0,0 +1,282 @@
+# Instructions — How to Use the rn-encryption-decryption Skill in Another Project
+
+This guide explains how to copy the `rn-encryption-decryption` skill into a different React Native CLI project and run it end-to-end.
+
+---
+
+## Prerequisites
+
+| Requirement | Minimum version / Note |
+|-------------|------------------------|
+| Node.js | 18.x |
+| React Native CLI | 0.71+ |
+| TypeScript | 4.9+ |
+| Axios | Any version (for interceptor integration) |
+| `react-native-keychain` | ^8.0 (secure storage) |
+| `react-native-quick-crypto` | ^1.0 (JS crypto layer, requires Nitro Modules peer deps) |
+| AI assistant | GitHub Copilot, Claude, or any LLM with file-context support |
+
+This skill is for **React Native CLI** projects only. It does **not** support Expo managed workflow.
+
+> **No automation script exists for this skill.** All implementation is LLM-generated, guided by the reference files and your questionnaire answers. Estimated effort: 2–4 hours depending on model + layer choice.
+
+---
+
+## Skill Execution Breakdown
+
+| What | Who does it | % |
+|------|------------|---|
+| Reading RN version and installed packages | Developer (manual check) | — |
+| Architecture decision (RSA vs EC, JS vs Native) | Developer + LLM | LLM |
+| Questionnaire completion | Developer | — |
+| Dependency installation | Developer (manual `npm install`) | — |
+| Key service generation (`RsaKeyService` / `EcKeyService`) | LLM | LLM |
+| Crypto utility generation (`crypto.util.ts`, `hmac.util.ts`) | LLM | LLM |
+| Axios interceptor wiring | LLM | LLM |
+| Native bridge (Kotlin + Swift), if Native layer | LLM | LLM |
+| Backend alignment documentation | LLM | LLM |
+| Security review | LLM + developer | LLM |
+| TypeScript verification | Developer (`npx tsc --noEmit`) | — |
+| **Script total** | | **~0%** |
+| **LLM total** | | **~100%** |
+
+The 0/100 split reflects that encryption is entirely project-specific. The key exchange model, nonce format, envelope shape, excluded API paths, and backend contract cannot be determined without developer input — so nothing can be automated. The reference files guide the LLM to produce correct, production-ready output on the first pass.
+
+---
+
+## Step 1 — Copy the Skill Folder
+
+Copy the entire `.github/skills/rn-encryption-decryption/` folder into the target project:
+
+```
+<target-project>/
+  .github/
+    skills/
+      rn-encryption-decryption/
+        SKILL.md
+        Instructions.md
+        template.md
+        references/
+          architecture.md
+          backend-alignment.md
+          dependency-guidance.md
+          ec-implementation.md
+          error-handling-playbook.md
+          native-rsa-implementation.md
+          security-checklist.md
+        templates/
+          config-questionnaire.md
+          delivery-checklist.md
+          implementation-plan.md
+```
+
+On Windows (PowerShell):
+```powershell
+Copy-Item -Recurse -Path ".github\skills\rn-encryption-decryption" `
+          -Destination "C:\path\to\target-project\.github\skills\rn-encryption-decryption"
+```
+
+On macOS/Linux:
+```bash
+cp -r .github/skills/rn-encryption-decryption /path/to/target-project/.github/skills/
+```
+
+---
+
+## Step 2 — Open the Target Project
+
+```bash
+cd /path/to/target-project
+```
+
+Ensure `package.json` is present. All commands must be run from the project root.
+
+---
+
+## Step 3 — Check Your React Native Version (Manual)
+
+```bash
+node -p "require('./package.json').dependencies['react-native']"
+```
+
+Open `references/dependency-guidance.md` and read the **Transitive Dependencies** section for your RN version. This tells you exactly which packages to install and in what order.
+
+> **Critical for RN 0.76+:** `react-native-quick-crypto` ≥ 1.0 requires `react-native-nitro-modules` and `react-native-worklets` as peer dependencies. Install them manually — they are **not** auto-installed.
+
+Install the required packages:
+
+```bash
+# Always required (JS crypto layer)
+npm install react-native-quick-crypto react-native-nitro-modules react-native-worklets react-native-keychain buffer
+
+# RSA model only
+npm install react-native-rsa-native   # or your team's preferred RSA library
+
+# iOS only (after any new native package install)
+cd ios && pod install && cd ..
+```
+
+Verify the install:
+```bash
+npm ls react-native-quick-crypto react-native-nitro-modules react-native-worklets
+```
+
+---
+
+## Step 4 — Answer the Config Questionnaire (LLM Layer — 100%)
+
+Open `templates/config-questionnaire.md`. The questionnaire has four sections — one for each model + layer combination:
+
+- **RSA + React Native JS** — most common, simplest backend
+- **RSA + Native** — AES runs in OS engine (Kotlin/Swift)
+- **EC + React Native JS** — forward-secrecy, recommended for new projects
+- **EC + Native** — advanced, AES in OS engine
+
+**Key decisions to make before starting:**
+
+| Decision | Options | Guidance |
+|----------|---------|----------|
+| Key exchange model | RSA / EC (ECDH) | EC preferred for new builds; RSA if backend already has RSA |
+| Crypto execution layer | JS / Native | JS unless native performance is a hard requirement |
+| EC contract type | Per-request / Session-init | Per-request = new key per API call; session-init = shared key per login session |
+| Excluded paths | e.g. `/auth/login`, `/health` | Paths that bypass encryption (public endpoints) |
+| HMAC signing | Yes / No | Adds request-level integrity check (recommended) |
+| Nonce format | `appId^timestamp.hex` or custom | Must match server contract exactly |
+
+Fill in all answers before moving to Step 5. Incomplete answers produce incorrect code.
+
+---
+
+## Step 5 — Load Reference Files into Your AI Assistant
+
+Provide **all** of the following files as context to your AI assistant (GitHub Copilot, Claude, etc.):
+
+```
+SKILL.md
+template.md
+references/architecture.md
+references/dependency-guidance.md
+```
+
+Plus the implementation reference for your chosen path:
+
+| Chosen path | Load this reference |
+|-------------|---------------------|
+| EC (any layer) | `references/ec-implementation.md` |
+| RSA + Native | `references/native-rsa-implementation.md` |
+| RSA + JS | `references/architecture.md` is sufficient |
+
+Plus your existing codebase files:
+
+- Your Axios instance / API service (`src/services/api.ts` or equivalent)
+- Your existing interceptors (if any)
+- Your navigation types / route param list (for context only)
+
+---
+
+## Step 6 — Run the Implementation
+
+Ask your AI assistant:
+
+> "Using the skill files I provided, implement the full encryption system for my React Native app. My configuration answers are: [paste your questionnaire answers here]. Follow the execution order in SKILL.md and use the relevant implementation reference for code."
+
+The LLM will generate (in order):
+
+1. **Crypto utility** — `src/services/security/crypto.util.ts`
+2. **HMAC utility** — `src/services/security/hmac.util.ts` (if HMAC enabled)
+3. **Key service** — `src/services/security/rsa-key.service.ts` or `ec-key.service.ts`
+4. **Types** — `src/services/security/types.ts`
+5. **Updated API service** — patched `api.ts` with encryption/decryption interceptors
+6. **Native bridge** (if Native layer) — `android/app/src/main/kotlin/…/NativeCryptoModule.kt` + `ios/…/NativeCryptoModule.swift`
+7. **Backend alignment doc** — hand-off document for your server team
+
+> If the LLM generates a file that already exists (e.g., `api.ts`), ask it to show a diff patch or the specific lines to add, rather than replacing the full file.
+
+---
+
+## Step 7 — Wipe Android C++ Cache (if using quick-crypto + Nitro Modules)
+
+After installing Nitro-Modules-based packages, the Android `.cxx` build cache must be cleaned:
+
+```powershell
+# Windows
+Remove-Item -Recurse -Force "android\app\.cxx"
+Remove-Item -Recurse -Force "android\.gradle"
+```
+
+```bash
+# macOS/Linux
+rm -rf android/app/.cxx android/.gradle
+```
+
+Then rebuild:
+```bash
+npx react-native run-android   # or your build command
+```
+
+---
+
+## Step 8 — Verify TypeScript
+
+```bash
+npx tsc --noEmit
+```
+
+Expected: zero errors. Common errors and their fixes are documented in `references/dependency-guidance.md` under "Troubleshooting".
+
+If you see errors about missing types for `react-native-quick-crypto`:
+```bash
+npm ls react-native-quick-crypto
+```
+
+---
+
+## Step 9 — Security Review
+
+Before committing, work through `references/security-checklist.md` and `templates/delivery-checklist.md`. Key items:
+
+- All production API calls pass through the encryption interceptor.
+- `EXCLUDED_PATHS` list is correct — no encrypted endpoint missing, no public endpoint accidentally encrypted.
+- Ephemeral EC private keys are discarded after `computeSecret()` is called.
+- AES keys are held in-memory only (not logged, not stored).
+- `react-native-keychain` stores tokens with `ACCESSIBLE_WHEN_UNLOCKED_THIS_DEVICE_ONLY`.
+- HMAC signature is validated server-side.
+- HTTP (non-HTTPS) is blocked at the API layer.
+
+---
+
+## Step 10 — Backend Alignment
+
+Provide your server team with the output of:
+
+> "Generate the backend alignment document for my chosen model (RSA/EC). Use `references/backend-alignment.md` Part A (RSA) or Part B (EC)."
+
+This document specifies:
+- Expected request envelope schema (field names, encoding, types)
+- Key format (PKCS#8 PEM for RSA; 65-byte uncompressed P-256 base64 for EC)
+- Nonce format and validation rules
+- Response decryption contract
+- HMAC verification steps
+
+Share this with the backend team **before integration testing begins** to avoid contract mismatches.
+
+---
+
+## Adapting to a Different API Client
+
+If the target project uses `fetch` or `ky` instead of Axios:
+
+1. Replace `api.interceptors.request.use(...)` with a wrapper function that encrypts the body before `fetch()`.
+2. Replace `api.interceptors.response.use(...)` with a wrapper that decrypts the body after `await response.json()`.
+3. The key service, crypto utility, and HMAC utility are client-agnostic — no changes needed there.
+
+---
+
+## Updating the Skill for a New React Native Version
+
+When upgrading React Native in an existing project:
+
+1. Open `references/dependency-guidance.md` and check the version matrix for the new RN version.
+2. Update `react-native-quick-crypto`, `react-native-nitro-modules`, and `react-native-worklets` to the versions listed.
+3. Wipe the Android `.cxx` cache (Step 7 above) and rebuild.
+4. Run `npx tsc --noEmit` to verify no type changes broke the build.