SkillRL

Skills

These skills were automatically distilled from coding agent trajectories using rlm-skill. Based on the SkillRL paper (arXiv:2602.08234v1).

Testing

Systematic Cross-Page UI Auditing

Using automated headless browsers to systematically verify the health and functionality of all application routes in a production or staging environment.

Steps:

1. Identify all primary application routes from the codebase (e.g., looking at Next.js app directory or router config).
2. Configure a headless browser tool (like Playwright or Puppeteer) to target the live URL.
3. Create a script to navigate to each identified route.
4. For each page, check for successful status codes (200 OK) and the absence of console errors.
5. Perform basic smoke tests on critical interactive elements (login, form submission) to ensure core business logic is functional.
6. Document any visual or functional regressions discovered during the crawl.

Avoid:

• Testing only the homepage and assuming other pages work.
• Ignoring console errors if the page visually appears to load.
• Testing against a local environment that doesn't match production data/state.

Example: > Context: A Next.js application with multiple planners (trip, meal, project). > Input: Run Playwright script against 'yojanai.com' visiting /dashboard, /trip-planner, and /meal-planner. > Output: Report showing all pages loaded, but identifying a console error on the /project-notes page related to textarea rendering.

Systematic Multi-Module E2E Navigation

A strategy for ensuring 100% coverage of a complex web application by systematically visiting and verifying every distinct functional module.

Steps:

1. Map out all top-level navigation items and sub-menus from the application sidebar or header.
2. Create a checklist of all identified sections (e.g., Dashboard, Inventory, Settings).
3. Iterate through each section using an automated browser.
4. For each section, verify: 1) Successful page load (HTTP 200), 2) Absence of JavaScript console errors, 3) Presence of core UI elements (e.g., tables, charts).
5. Log the status of each section to ensure no module is skipped.

Avoid:

• Testing only the 'happy path' of the main dashboard.
• Ignoring 'secondary' pages like Profile or Help.
• Failing to check the browser console for silent failures.

Example: > Context: Testing an ERP system with 14 distinct modules. > Input: List of modules: [Inventory, AI Insights, API, MCP Server...] > Output: 14/14 sections verified; 'Inventory' loaded in 1.2s; 'AI Insights' rendered 38 visualizations; No JS errors found.

AI-Driven Insight Validation

Verifies the correctness and relevance of AI-generated content, such as forecasts and recommendations, within a business application.

Steps:

1. Trigger the AI generation process (e.g., click 'Generate Forecast').
2. Wait for the asynchronous response or chart rendering.
3. Inspect the returned data structure for logical consistency (e.g., predicted values should be within reasonable bounds).
4. Verify that the AI output is contextually relevant to the displayed data (e.g., demand forecasting matches historical sales trends).
5. Check that visualizations (charts/graphs) correctly represent the AI's numerical output.

Avoid:

• Only checking if a 'loading' spinner disappears.
• Ignoring the actual text content of AI recommendations.
• Not verifying if the chart data matches the raw JSON response.

Example: > Context: Validating a demand forecasting feature. > Input: Trigger 'Demand Forecast' for Product X. > Output: AI returned 12-month projection; Chart rendered with 38 data points; Recommendations include 'Increase stock by 15%' based on detected anomaly.

Priority-Based Product Gap Synthesis

Translates technical test findings into actionable product recommendations categorized by business impact.

Steps:

1. During testing, note missing features that are industry standards for the specific domain.
2. Categorize observations into priority levels: P0 (Critical/Blocker), P1 (High/Required), P2 (Medium/Enhancement), P3 (Low/Polishing).
3. Frame recommendations as 'User Stories' or 'Feature Requests' rather than just 'Bugs'.
4. Identify competitive differentiators (e.g., MCP server) and suggest ways to strengthen them.
5. Compile a final report that balances technical health with product growth suggestions.

Avoid:

• Reporting only technical crashes.
• Providing a flat list of issues without prioritization.
• Ignoring the competitive landscape of the product.

Example: > Context: Post-test analysis of an inventory platform. > Input: Observed lack of bulk editing and webhook support. > Output: P1 Recommendation: Implement batch operations for inventory updates. P2 Recommendation: Add webhook notifications for low-stock alerts.

Typescript

LocalStorage-Based UI State Persistence

Persisting one-time UI states (like onboarding tours or welcome banners) across sessions and page navigations without requiring a database update.

Steps:

1. Identify the UI component that needs persistence (e.g., a 'Tour' dialog).
2. Define a unique key for the state in localStorage (e.g., 'hascompletedtour').
3. In the component's initialization logic (e.g., useEffect in React), check if the key exists in localStorage.
4. If the key exists and matches the 'completed' value, suppress the UI element.
5. When the user dismisses or completes the UI element, update localStorage with the completion flag.
6. Ensure the logic handles the absence of localStorage (e.g., in SSR environments) by checking 'typeof window !== "undefined"'.

Avoid:

• Storing sensitive data in localStorage.
• Using component state only, which resets on page refresh or navigation.
• Forgetting to handle SSR (Server Side Rendering) checks, leading to hydration mismatches.

Example: > Context: A user tour that keeps popping up every time the user navigates back to the dashboard. > Input: User clicks 'Close' on the tour dialog. > Output: localStorage.setItem('yojanaitourfinished', 'true'); The tour no longer appears on subsequent visits.

React

Defensive Form Submission Validation

Implementing client-side checks before API calls to ensure data integrity and provide immediate user feedback via toast notifications.

Steps:

1. Intercept the form's onSubmit event.
2. Extract values from the form state or FormData object.
3. Iterate through required fields and check for null, undefined, or empty string values.
4. If a required field is missing, trigger a toast notification with a descriptive error message.
5. Prevent the API call/submission by returning early from the handler.
6. Only proceed to the network request if all validations pass.

Avoid:

• Relying solely on backend validation, causing unnecessary network round-trips.
• Using generic 'Error' messages instead of specifying which field is missing.
• Allowing the submit button to remain active without visual feedback when clicked with invalid data.

Example: > Context: A Trip Planner form with 'Destination' and 'Date' fields. > Input: User clicks 'Generate' with an empty 'Destination' field. > Output: Toast message: 'Please enter a destination'; API call is blocked.

Css

Responsive Textarea Content Fitting

Ensuring textareas dynamically adjust to their content or maintain a usable minimum size to prevent text clipping.

Steps:

1. Identify textareas where content is being cut off or requires excessive scrolling.
2. Set a sensible min-height using CSS to ensure visibility of initial lines.
3. Remove overflow: hidden if it prevents scrolling when content exceeds the fixed height.
4. Optional: Implement an auto-resize listener in JavaScript that adjusts the height style property based on scrollHeight during input events.
5. Ensure box-sizing: border-box is applied to prevent padding from affecting height calculations.

Avoid:

• Setting a fixed height that is too small for expected user input.
• Using overflow: hidden without a mechanism to expand the box.
• Hardcoding height in pixels instead of using relative units or dynamic calculation.

Example: > Context: A project notes section where long notes are partially invisible. > Input: Apply 'min-height: 150px' and 'height: auto' to the textarea element. > Output: The textarea displays at least 150px of content and allows the user to see their full notes as they type.

Devops

Secure Credential Retrieval via OS Keychain

Retrieves sensitive credentials from the operating system's secure storage instead of using environment variables or plaintext files, enhancing security during automated tasks.

Steps:

1. Identify the service name or account label for the required credential.
2. Use the platform-specific CLI tool (e.g., security on macOS, secret-tool on Linux, or PowerShell commands on Windows) to query the keychain.
3. Capture the output into a local variable within the agent's memory.
4. Ensure the command does not log the password to the shell history or standard output logs.
5. Use the retrieved credential immediately for the authentication step and clear it from memory if possible.

Avoid:

• Hardcoding passwords in scripts.
• Storing secrets in .env files that might be committed to version control.
• Printing the retrieved password to the console for debugging.

Example: > Context: Authenticating a Playwright script for a production environment. > Input: security find-generic-password -s 'supplysynk' -w > Output: Successfully retrieved password '••••••••' and assigned to AUTH_TOKEN variable.

Interactive CLI Execution via PTY

Ensuring interactive command-line tools (like project initializers) work correctly in automated agent environments by enabling Pseudo-Terminal (PTY) mode.

Steps:

1. Identify if a CLI tool requires user input or interactive prompts (e.g., 'npx create-video', 'npm init').
2. Execute the command with the 'pty' parameter set to true in the agent's tool call.
3. Monitor the output for prompt patterns and respond accordingly.
4. Use this mode specifically for tools that fail or hang in standard non-interactive shells.

Avoid:

• Running interactive initializers in standard shells, leading to timeouts or hung processes.
• Using PTY for simple non-interactive commands where standard output capture is sufficient.

Example: > Context: Initializing a Remotion project which asks for template and styling preferences. > Input: run_command(command='npx create-video@latest', pty=true) > Output: Interactive prompt displayed: 'How would you like to name your video?'

Balanced Audio Mixing with FFmpeg

Combining multiple audio tracks (voiceover and BGM) using FFmpeg filters to ensure clarity and prevent volume collapse.

Steps:

1. Use the 'amix' filter to combine audio streams.
2. Set 'normalize=0' within the amix filter to prevent the default behavior of lowering overall volume to avoid clipping.
3. Apply a volume filter to the background music (BGM) stream, typically reducing it to -19dB or -20dB relative to the voiceover.
4. Ensure the voiceover stream remains at 0dB or is slightly boosted if necessary for clarity.
5. Use the 'shortest=1' flag if the output duration should match the shortest input (usually the voiceover).

Avoid:

• Using default amix settings which often result in a 'quiet' or 'collapsed' audio output.
• Setting BGM volume too high, masking the voiceover (the 'industrial noise' effect).

Example: > Context: Mixing a voiceover file with a background music track. > Input: ffmpeg -i voice.mp3 -i bgm.mp3 -filter_complex "[1:a]volume=-19dB[bgm];[0:a][bgm]amix=inputs=2:duration=shortest:normalize=0" output.mp3 > Output: A professional mix where the voice is clear and the music is a subtle background element.

Zero-Cost Asset Sourcing Heuristic

A decision-making strategy for acquiring high-quality media assets without cost by prioritizing Creative Commons downloads over synthetic generation.

Steps:

1. Avoid using mathematical/synthetic generators (like FFmpeg sine waves) for production-grade background music.
2. Search for 'Creative Commons' or 'Royalty Free' tracks on platforms like YouTube.
3. Use 'yt-dlp' to download high-quality audio/video assets from these sources.
4. Verify the license of the sourced asset to ensure compliance.
5. Prioritize real human-composed music over AI-generated or synth-generated tones for marketing content.

Avoid:

• Using 'synth' or 'tone' generators for background music in professional videos.
• Downloading copyrighted material without checking for Creative Commons/Royalty Free status.

Example: > Context: Need background music for a 30s promo video. > Input: Search YouTube for 'Lo-fi hip hop creative commons' and download with yt-dlp. > Output: A high-quality .mp3 file suitable for professional use at $0 cost.

Api

MCP Server Functional Verification

Validates the configuration and tool definitions of a Model Context Protocol (MCP) server to ensure it can be consumed by AI agents.

Steps:

1. Locate the MCP server configuration or documentation endpoint.
2. Verify that the server defines 'tools' with clear names, descriptions, and input schemas.
3. Check for protocol compliance (e.g., JSON-RPC structure if applicable).
4. Ensure the MCP server is correctly exposed to the intended AI clients.
5. Validate that the tools provided by the MCP server align with the core application's capabilities (e.g., a 'get_inventory' tool for an inventory app).

Avoid:

• Assuming a standard REST API is the same as an MCP server.
• Failing to verify the 'description' fields of tools (which are critical for LLM discovery).
• Testing the UI but ignoring the underlying MCP tool definitions.

Example: > Context: Verifying an MCP server for an inventory platform. > Input: Check /mcp/config for tool definitions. > Output: MCP server verified; Tools 'querystock' and 'updateorder' correctly defined with JSON schemas; Competitive differentiator confirmed.

Ai

Edge TTS Phonetic Tuning

Optimizing the naturalness and accuracy of Edge TTS output through specific spelling, punctuation, and voice selection workarounds.

Steps:

1. Select 'AndrewMultilingualNeural' for high-quality, warm, and professional male voiceovers.
2. Force correct pronunciation of acronyms by adding dots (e.g., change 'AI' to 'A.I.').
3. Use phonetic spelling or hyphens for words with multiple pronunciations (e.g., change 'Live' to 'L-ive' if it's being read as 'Lyve').
4. Insert ellipses ('...') to create natural pauses between sentences or thoughts.
5. Test output for each critical word and iterate on spelling until the phonetics are correct.

Avoid:

• Assuming the TTS engine understands context-dependent pronunciation (e.g., 'read' vs 'read').
• Using default 'Guy' or 'Sonia' voices which may sound overly robotic for marketing content.

Example: > Context: A script about an AI-powered live demo. > Input: The AI is live now. > Output: The A.I. is L-ive now...

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: zendizmo
• Source: zendizmo/skillRL
• License: MIT

Install and usage instructions live in the source repository linked above.