Improve/skill review optimization

.agents/skills/SKILL.md

@@ -1,32 +1,52 @@
 ---
-name: Visualization Creation or Update
-description: Skill for creating, standardizing, or updating algorithm visualizations based on a problem ID.
+name: visualization-creation-or-update
+description: "Create, standardize, or update step-by-step algorithm visualizations for a given problem ID. Use when the user mentions 'visual', 'visualization', 'animate', or 'step-by-step' alongside a problem ID in /problem/:id format."
 ---
 
-# Visualization Creation or Update Skill
+# Visualization Creation or Update
 
-This skill is invoked when the user explicitly mentions keywords like visual, visualization (or related terms) ALONG WITH a problem ID in the format /problem/:id. Simply providing a problem ID without these keywords will not trigger the skill.
+Create or update algorithm visualizations that synchronize code execution with visual state for problems identified by `/problem/:id`.
 
-## Workflow Process
+## Workflow
 
-### 1. Locate Visualization File
-When provided /problem/:id, search for the existing visualization file in the codebase. Typical locations include src/components/visualizations/algorithms/.
-If the file exists, prepare to update it, aligning it with the latest standards.
-If the file does not exist, notify the user and ask for confirmation to generate a new visualization.
+### 1. Locate the visualization file
 
-### 2. Implementation Rules & Standards
+Search `src/components/visualizations/algorithms/` for the file matching the problem ID.
 
-When creating or updating the visualization, rigidly follow these rules:
+- **File exists**: Update it to match the standards below.
+- **File missing**: Confirm with the user before generating a new visualization.
 
-1. **Proper Code and Steps Sync:** The execution steps (logic state) MUST be perfectly synchronized with the exact lines of code being executed in the editor view.
-2. **No Code Comments:** The algorithm code block displayed to the user MUST NOT contain any comments. Remove all inline or block comments to ensure a clean, distraction-free reading experience.
-3. **Proper Commentary:** Implement descriptive, step-by-step narrative commentary for each execution step. The text should clearly explain to the coder why an action is taken and how the algorithm solves the problem.
-4. **Educational Value:** With respect to the problem description, the visualization must be intuitively designed so the coder visually and conceptually understands the algorithm's mechanics.
-5. **Instantaneous Transitions (No Click Animations):** Disable all click-based animations to ensure stable, professional, and instant visual transitions when navigating between steps.
-6. **Standardized UI/UX Layout:** Maintain consistent placement of variable panels and use intuitive geometric representations for data structures across all visualizations.
-7. **No Array Index Labels:** Do not add "idx" labels (or similar index markings) to array visual elements. Keep the array representations clean.
-8. **Text Color:** Ensure the color of the text used in visualizations is black for maximum clarity and contrast.
+### 2. Implement the visualization
 
-### 3. Verification
-Double-check that there are absolutely no comments inside the code block string.
-Verify array/pointer/variable states correspond exactly to the active execution step.
+#### Code display rules
+
+- The execution steps MUST be perfectly synchronized with the highlighted lines of code in the editor view.
+- The algorithm code block MUST NOT contain any comments — remove all inline and block comments.
+- Always use the `AnimatedCodeEditor` component for code blocks. Do not add redundant wrapper `div`s, headings, or extra layout containers around it.
+
+#### Layout rules
+
+- Place `SimpleStepControls` at the top of the visualization, above the main content grid.
+- Use a two-column grid on large screens with consistent `VariablePanel` placement.
+- Place the descriptive commentary box above the `VariablePanel` to provide immediate context.
+- Use theme-aware text classes (`text-foreground`, `text-primary-foreground`) instead of hardcoded colors.
+- Do not add index labels (e.g., "idx") to array visual elements.
+
+#### Interaction rules
+
+- Disable all click-based animations — transitions between steps must be instantaneous.
+- Only implement multiple test cases if explicitly requested. When implemented, provide a visually polished toggle UI using `lucide-react` icons. Switching cases must reset `currentStepIndex` to 0 and `isPlaying` to false.
+
+#### Commentary rules
+
+- Write descriptive, step-by-step narrative commentary explaining *why* each action is taken and *how* the algorithm progresses toward the solution.
+
+### 3. Verify
+
+Confirm each of the following before completing:
+
+- [ ] No comments inside the code block string
+- [ ] Variable/pointer states match the active execution step at every step index
+- [ ] `SimpleStepControls` renders above the content grid
+- [ ] `AnimatedCodeEditor` has no redundant wrapper elements
+- [ ] Text colors use theme-aware classes

.agents/skills/security/SKILL.md

@@ -1,35 +1,55 @@
 ---
-name: Security Scan
-description: Skill for scanning the repository for sensitive data, keys, network vulnerabilities, and cyber attack patterns.
+name: security-scan
+description: "Scan the repository for hardcoded secrets, exposed API keys, insecure network configurations, and vulnerable dependencies. Use when the user asks for a security audit, secret detection, credential scan, vulnerability check, or wants to find leaked tokens in the codebase."
 ---
 
-# Security Scan Skill
+# Security Scan
 
-This skill is invoked when the user requests a security audit, a scan for secrets, or checks for network vulnerabilities. Keywords: `security scan`, `audit`, `secrets`, `leaks`, `vulnerabilities`.
+Detect hardcoded secrets, insecure network patterns, and vulnerable dependencies in the repository using integrated scanning scripts.
 
-## Workflow Process
+## Workflow
 
-### 1. Preparation
-- Ensure all dependencies for the scanning scripts are available (Python, Shell).
-- Identify the scope of the scan (entire repo or specific subdirectories).
+### 1. Determine scope
 
-### 2. Execution
-Run the integrated security scan using the provided scripts:
-- **Secret Detection**: Checks for hardcoded API keys, tokens, and credentials.
-- **Network Check**: Identifies hardcoded IP addresses and usage of insecure protocols (e.g., `http://` where `https://` is expected).
-- **Dependency Audit**: Runs `npm audit` to find vulnerable packages.
+Identify whether to scan the entire repo or specific subdirectories based on the user request.
 
-### 3. Reporting
-- Organize findings into a clear, formatted report in the chat.
-- Categorize issues by severity: **High**, **Medium**, **Low**.
-- Provide actionable advice for each finding (e.g., "Rotate this key", "Upgrade this package").
+### 2. Run the scan
 
-### 4. Safety First
-- **IMPORTANT**: If a real secret is found, DO NOT display the full secret in the chat. Mask it (e.g., `AKIA...XXXX`).
-- Warn the user about the risks of committing secrets to the repository.
-
-## Commands
-The primary command to run the full scan is:
 ```bash
 bash .agents/skills/security/scripts/main_scan.sh
 ```
+
+The scan checks three categories:
+
+- **Secret detection**: Hardcoded API keys, tokens, passwords, and credentials (e.g., patterns like `AKIA`, `sk-`, `ghp_`, `Bearer`)
+- **Network check**: Hardcoded IP addresses and insecure protocol usage (`http://` where `https://` is expected)
+- **Dependency audit**: `npm audit` for vulnerable packages
+
+If the main script is unavailable, run checks manually:
+
+```bash
+# Secret patterns
+grep -rn "AKIA\|sk-\|ghp_\|password\s*=\|api_key\s*=" --include="*.ts" --include="*.js" --include="*.env" .
+
+# Insecure protocols
+grep -rn "http://" --include="*.ts" --include="*.js" . | grep -v localhost
+
+# Dependency vulnerabilities
+npm audit --json
+```
+
+### 3. Report findings
+
+Organize results by severity:
+
+| Severity | Examples |
+|----------|----------|
+| **High** | Exposed API keys, hardcoded passwords, leaked tokens |
+| **Medium** | Insecure protocol usage, hardcoded IPs in production code |
+| **Low** | Outdated dependencies with low-severity CVEs |
+
+Provide actionable remediation for each finding (e.g., "Rotate this key and move to environment variable", "Upgrade package X to version Y").
+
+### 4. Safety
+
+**CRITICAL**: Never display a full secret in the output. Mask all sensitive values (e.g., `AKIA...XXXX`, `sk-...abcd`). Warn the user about the risk of committing secrets to version control.

.agents/skills/visualization/SKILL.md

@@ -1,37 +1,52 @@
 ---
-name: Visualization Creation or Update
-description: Skill for creating, standardizing, or updating algorithm visualizations based on a problem ID.
+name: visualization-creation-or-update
+description: "Create, standardize, or update step-by-step algorithm visualizations for a given problem ID. Use when the user mentions 'visual', 'visualization', 'animate', or 'step-by-step' alongside a problem ID in /problem/:id format."
 ---
 
-# Visualization Creation or Update Skill
+# Visualization Creation or Update
 
-This skill is invoked when the user explicitly mentions keywords like `visual`, `visualization` (or related terms) ALONG WITH a problem ID in the format `/problem/:id`. Simply providing a problem ID without these keywords will not trigger the skill.
+Create or update algorithm visualizations that synchronize code execution with visual state for problems identified by `/problem/:id`.
 
-## Workflow Process
+## Workflow
 
-### 1. Locate Visualization File
-- When provided `/problem/:id`, search for the existing visualization file in the codebase. Typical locations include `src/components/visualizations/algorithms/`.
-- If the file exists, prepare to update it, aligning it with the latest standards.
-- If the file does not exist, notify the user and ask for confirmation to generate a new visualization.
+### 1. Locate the visualization file
 
-### 2. Implementation Rules & Standards
+Search `src/components/visualizations/algorithms/` for the file matching the problem ID.
 
-When creating or updating the visualization, rigidly follow these rules:
+- **File exists**: Update it to match the standards below.
+- **File missing**: Confirm with the user before generating a new visualization.
 
-1. **Proper Code and Steps Sync:** The execution steps (logic state) MUST be perfectly synchronized with the exact lines of code being executed in the editor view.
-2. **No Code Comments:** The algorithm code block displayed to the user MUST NOT contain any comments. Remove all inline or block comments to ensure a clean, distraction-free reading experience.
-3. **Proper Commentary:** Implement descriptive, step-by-step narrative commentary for each execution step. The text should clearly explain to the coder *why* an action is taken and *how* the algorithm solves the problem.
-4. **Educational Value:** With respect to the problem description, the visualization must be intuitively designed so the coder visually and conceptually understands the algorithm's mechanics.
-5. **Instantaneous Transitions (No Click Animations):** Disable all click-based animations to ensure stable, professional, and instant visual transitions when navigating between steps.
-6. **Standardized UI/UX Layout:** Maintain consistent placement of variable panels and use intuitive geometric representations for data structures. The layout should typically be a two-column grid on large screens.
-7. **No Array Index Labels:** Do not add "idx" labels (or similar index markings) to array visual elements. Keep the array representations clean.
-8. **Text Color:** Ensure the color of the text used in visualizations has high contrast with its background and respects dark mode by using theme-aware classes (e.g., `text-foreground`, `text-primary-foreground`).
-9. **Top-Aligned Controls:** The `SimpleStepControls` component MUST be placed at the top of the visualization, above the main content grid, to ensure immediate user access to navigation.
-10. **Use AnimatedCodeEditor:** Always use the `AnimatedCodeEditor` component when an implementation code block is required within the visualization.
-11. **Minimal Code Editor Container:** Do NOT include a redundant `div` wrapper, "Implementation" heading, or extra layout containers (like `flex-1 overflow-auto`) within the `Card` that encloses the `AnimatedCodeEditor`. The editor should be the primary child of its container card.
-12. **Test Case Selection:** Only implement multiple test cases (and the selection UI) if explicitly requested by the user. If not requested, one robust default case is sufficient. When multiple cases ARE requested, provide a premium, visually stunning UI (e.g., an animated sliding toggle with icons from `lucide-react`) to switch between them. Switching cases MUST reset the execution state (`currentStepIndex` back to 0, `isPlaying` to false). Place these controls at the top, typically next to or just below the `StepControls`.
-13. **Pedagogical Layout:** Ensure that the descriptive commentary box is placed **above** the `VariablePanel` to provide immediate context for the current state.
+### 2. Implement the visualization
 
-### 3. Verification
-- Double-check that there are absolutely no comments inside the code block string.
-- Verify array/pointer/variable states correspond exactly to the active execution step.
+#### Code display rules
+
+- The execution steps MUST be perfectly synchronized with the highlighted lines of code in the editor view.
+- The algorithm code block MUST NOT contain any comments — remove all inline and block comments.
+- Always use the `AnimatedCodeEditor` component for code blocks. Do not add redundant wrapper `div`s, headings, or extra layout containers around it.
+
+#### Layout rules
+
+- Place `SimpleStepControls` at the top of the visualization, above the main content grid.
+- Use a two-column grid on large screens with consistent `VariablePanel` placement.
+- Place the descriptive commentary box above the `VariablePanel` to provide immediate context.
+- Use theme-aware text classes (`text-foreground`, `text-primary-foreground`) instead of hardcoded colors.
+- Do not add index labels (e.g., "idx") to array visual elements.
+
+#### Interaction rules
+
+- Disable all click-based animations — transitions between steps must be instantaneous.
+- Only implement multiple test cases if explicitly requested. When implemented, provide a visually polished toggle UI using `lucide-react` icons. Switching cases must reset `currentStepIndex` to 0 and `isPlaying` to false.
+
+#### Commentary rules
+
+- Write descriptive, step-by-step narrative commentary explaining *why* each action is taken and *how* the algorithm progresses toward the solution.
+
+### 3. Verify
+
+Confirm each of the following before completing:
+
+- [ ] No comments inside the code block string
+- [ ] Variable/pointer states match the active execution step at every step index
+- [ ] `SimpleStepControls` renders above the content grid
+- [ ] `AnimatedCodeEditor` has no redundant wrapper elements
+- [ ] Text colors use theme-aware classes

.claude/skills/integration-react-native/SKILL.md

@@ -1,53 +1,66 @@
 ---
 name: integration-react-native
-description: PostHog integration for React Native applications
+description: "Install and configure PostHog analytics SDK in React Native applications, including event tracking, feature flags, user identification, and error tracking. Use when the user needs to add PostHog analytics, session recording, or feature flags to a React Native app."
 metadata:
   author: PostHog
   version: 1.9.5
 ---
 
-# PostHog integration for React Native
+# PostHog Integration for React Native
 
-This skill helps you add PostHog analytics to React Native applications.
+Set up PostHog analytics in a React Native application: install the SDK, configure the provider, implement event tracking, identify users, and add error tracking.
 
 ## Workflow
 
-Follow these steps in order to complete the integration:
+Follow these steps in order:
 
-1. `basic-integration-1.0-begin.md` - PostHog Setup - Begin ← **Start here**
+1. `basic-integration-1.0-begin.md` - PostHog Setup - Begin **Start here**
 2. `basic-integration-1.1-edit.md` - PostHog Setup - Edit
 3. `basic-integration-1.2-revise.md` - PostHog Setup - Revise
 4. `basic-integration-1.3-conclude.md` - PostHog Setup - Conclusion
 
 ## Reference files
 
 - `references/EXAMPLE.md` - React Native example project code
-- `references/react-native.md` - React native - docs
-- `references/identify-users.md` - Identify users - docs
-- `references/basic-integration-1.0-begin.md` - PostHog setup - begin
-- `references/basic-integration-1.1-edit.md` - PostHog setup - edit
-- `references/basic-integration-1.2-revise.md` - PostHog setup - revise
-- `references/basic-integration-1.3-conclude.md` - PostHog setup - conclusion
+- `references/react-native.md` - React Native SDK docs
+- `references/identify-users.md` - User identification docs
 
-The example project shows the target implementation pattern. Consult the documentation for API details.
+## Framework guidelines
 
-## Key principles
+- Install `posthog-react-native` and its required peer dependency `react-native-svg`
+- Use `react-native-config` to load `POSTHOG_PROJECT_TOKEN` and `POSTHOG_HOST` from `.env` (embedded at build time, not runtime)
+- Place `PostHogProvider` INSIDE `NavigationContainer` for React Navigation v7 compatibility
 
-- **Environment variables**: Always use environment variables for PostHog keys. Never hardcode them.
-- **Minimal changes**: Add PostHog code alongside existing integrations. Don't replace or restructure existing code.
-- **Match the example**: Your implementation should follow the example project's patterns as closely as possible.
+Minimal provider setup:
 
-## Framework guidelines
+```tsx
+import PostHog, { PostHogProvider } from 'posthog-react-native';
+import Config from 'react-native-config';
+
+const posthogClient = new PostHog(Config.POSTHOG_PROJECT_TOKEN, {
+  host: Config.POSTHOG_HOST,
+});
 
-- posthog-react-native is the React Native SDK package name
-- Use react-native-config to load POSTHOG_PROJECT_TOKEN and POSTHOG_HOST from .env (variables are embedded at build time, not runtime)
-- react-native-svg is a required peer dependency of posthog-react-native (used by the surveys feature) and must be installed alongside it
-- Place PostHogProvider INSIDE NavigationContainer for React Navigation v7 compatibility
+// Inside your App component, wrap content within NavigationContainer:
+<NavigationContainer>
+  <PostHogProvider client={posthogClient}>
+    {/* app content */}
+  </PostHogProvider>
+</NavigationContainer>
+```
 
 ## Identifying users
 
-Identify users during login and signup events. Refer to the example code and documentation for the correct identify pattern for this framework. If both frontend and backend code exist, pass the client-side session and distinct ID using `X-POSTHOG-DISTINCT-ID` and `X-POSTHOG-SESSION-ID` headers to maintain correlation.
+Identify users during login and signup events. Pass the client-side session and distinct ID using `X-POSTHOG-DISTINCT-ID` and `X-POSTHOG-SESSION-ID` headers to maintain frontend/backend correlation. Refer to `references/identify-users.md` and `references/EXAMPLE.md` for the correct pattern.
 
 ## Error tracking
 
-Add PostHog error tracking to relevant files, particularly around critical user flows and API boundaries.
+Add PostHog error tracking around critical user flows and API boundaries. Capture errors with `posthog.capture('$exception', { $exception_message: error.message })`.
+
+## Verification
+
+After completing the integration:
+
+1. Run the app and trigger a test event
+2. Confirm the event appears in the PostHog project dashboard within 60 seconds
+3. Verify user identification by checking the "Persons" tab for the identified user

.github/workflows/skill-review.yml

@@ -0,0 +1,13 @@
+name: Skill Review
+on:
+  pull_request:
+    paths: ['**/SKILL.md']
+jobs:
+  review:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+      - uses: tesslio/skill-review@22e928dd837202b2b1d1397e0114c92e0fae5ead # main