audit-frontend

Audit Nuxt 3 admin frontend codebases for anti-patterns, type errors, and convention violations.

9|2|Updated Nov 29, 2024
One-click install
npx skills add https://github.com/bbvch-ai/aihub-core --skill audit-frontend-bbvch-ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: audit-frontend
Source: https://github.com/bbvch-ai/aihub-core/tree/main/.claude/skills/audit-frontend
Command: npx skills add https://github.com/bbvch-ai/aihub-core --skill audit-frontend-bbvch-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually reviewing large Nuxt 3 admin frontend codebases for anti-patterns, type errors, unused components, and convention violations is time-consuming and prone to oversight, leading to technical debt and production bugs.

Core Features & Use Cases

  • 7 Targeted Audit Scopes: Run specialized checks for Pinia-Colada composable patterns, TypeScript strictness, Vue component architecture, page structure compliance, SDK freshness, i18n translation coverage, and Tailwind styling consistency.
  • Prioritized Issue Reporting: All findings are grouped by audit area with file paths, line numbers, severity levels, and suggested fixes to streamline code review and remediation.
  • Use Case: A frontend developer working on the Swiss AI-Hub admin panel can run this audit before merging code to catch breaking issues like missing query cache invalidation, untyped function parameters, or missing i18n translation keys.

Quick Start

Use the audit-frontend skill to run a full audit of the Nuxt 3 admin frontend by passing the 'all' scope argument to receive a complete report of all code quality issues.

Frequently Asked Questions about audit-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit a Nuxt 3 frontend for anti-patterns and type errors?

You can audit Nuxt 3 frontend code by scanning Vue components, TypeScript files, and composables for anti-patterns and convention violations. It produces a prioritized report with file locations, severity levels, and suggested fixes to streamline code review.

What is the best way to check i18n translation coverage and Tailwind styling consistency in a Nuxt project?

Checking i18n translation coverage and Tailwind styling consistency involves running specialized audit scopes that scan locale files and Vue components for missing keys and convention violations. This process highlights issues with file locations and suggested fixes to maintain code quality.

How do I review Pinia-Colada composable patterns in a Nuxt 3 admin codebase?

Reviewing Pinia-Colada composable patterns requires scanning the Nuxt 3 codebase for adherence to project-specific best practices regarding query cache invalidation and state management. The audit identifies convention violations and provides suggested fixes to prevent technical debt.

Does this frontend code audit check SDK freshness and page structure compliance?

Yes, the frontend code audit checks SDK freshness and page structure compliance by running targeted scopes that analyze SDK integrations and page layouts. It identifies breaking issues and convention violations, generating a report with severity levels and remediation steps.

How do I catch missing query cache invalidation before merging Nuxt 3 admin panel code?

To catch missing query cache invalidation before merging, run an audit on the Nuxt 3 admin panel codebase focusing on Pinia-Colada composable patterns. This identifies breaking issues and convention violations, providing a prioritized report of necessary fixes.

What are the limitations of using an automated frontend code audit for a large Nuxt 3 codebase?

Automated frontend code audits for large Nuxt 3 codebases focus on predefined scopes like TypeScript strictness, Vue architecture, and Tailwind consistency. They may not catch complex, business-logic-specific bugs but effectively highlight structural anti-patterns, type errors, and missing i18n translations.