design-frontend

Framework-agnostic frontend architecture — state management, components, data fetching. Use when building any web frontend, choosing state patterns, or structuring UI code.

Generate a gallery of design variations for a UI component. Takes an existing component (referenced by name, pasted code, or screenshot) and produces N distinct rendered alternatives in a single comparison page. Use when exploring visual directions, generating mockups, comparing design approaches for a component, creating A/B candidates, or when anyone says "show me options" or "give me variations" for a UI element.

WCAG AA and ARIA best practices — screen readers, keyboard navigation, focus management. Use when building any user-facing interface or reviewing accessibility compliance.

Manage AI skills from the Ravn AI Toolkit via corvus CLI — install, update, remove, search, and configure skills for any project. Use when: (1) Installing AI skills into a project, (2) Updating installed skills to latest versions, (3) Browsing or searching available skills, (4) Configuring global or per-project skill sets, (5) Troubleshooting corvus setup. Triggers on: "install skills", "add skills", "update skills", "corvus", "skill manager", "browse skills", "set up AI rules".

Audit a repository for type-system weaknesses using recent bug-fix commits as hard evidence. Produces prioritized findings tied to specific commits showing which types allowed real bugs. Use when: reviewing type safety, auditing types, analyzing type bugs. Triggers on: type audit, type system review, audit types, type safety audit.

Set up and enforce a strict, production-grade ESLint configuration for TypeScript projects, then systematically fix all linting issues. Use this skill whenever the user asks to add a linter or ESLint, enforce code quality rules, fix linting errors, clean up code style, or add type-aware linting. Trigger on: "lint", "eslint", "code quality", "static analysis", "strict linting", "make it stricter", "make the code stricter", "add better rules", "clean up the codebase", "enforce standards", "fix all the warnings", or "ShadCN lint errors". Handles detection, config generation, dependency installation, auto-fix, and manual remediation. Do NOT use for Biome or Rome projects, Prettier-only formatting, non-TypeScript/JavaScript projects, writing custom ESLint rules or plugins, husky/lint-staged/pre-commit hook setup, or when the user just wants to run an existing linter without changing its configuration.

Convert meeting transcript .txt files into structured .md notes with metadata, TL;DR, key topics, action items, and quotes. Use when processing raw transcripts into formatted notes. Triggers on: "process transcript", "generate notes from transcript", "transcript to notes", "/transcript-notes".

Generate professional QA Test Plan documents (.docx or .pdf) from a structured interview. Trigger on "create/write a test plan", "I need a test plan", "prepare QA documentation", /testplan, or when a user uploads a PRD/requirements and wants a test plan generated.

Generate, evaluate, audit, and normalize QA test cases to RAVN standards. Trigger on "generate/write/create test cases", "evaluate/score my test cases", "audit my test suite", "review test coverage", "normalize/reformat test cases", or when a user wants test design help. Also triggered by /testcases.

React 19 patterns for components, hooks, Server Components, and data fetching. Use when writing React components, managing state with hooks, implementing Suspense boundaries, optimizing renders with proper memoization, or building Server/Client component hierarchies.

Drizzle ORM typesafe schema design, relational queries, prepared statements, migrations, and transactions. Use when working with Drizzle ORM, writing database queries, managing migrations, or optimizing query performance with prepared statements.

Android and Kotlin development patterns — Compose, architecture, coroutines, Room, navigation, Hilt. Use when building Android apps, writing Jetpack Compose UI, or reviewing Android-specific code.