status-column-audit

Audit Vue list pages for plain-text dict columns and convert them to semantic auto-color tags.

5|1|Updated Apr 8, 2026
One-click install
npx skills add https://github.com/ChenyCHENYU/wl-skills-kit --skill status-column-audit-chenychenyu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: status-column-audit
Source: https://github.com/ChenyCHENYU/wl-skills-kit/tree/main/files/.wl-skills/skills/core/status-column-audit
Command: npx skills add https://github.com/ChenyCHENYU/wl-skills-kit --skill status-column-audit-chenychenyu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @agile-team/wl-skills-ui.

What problem does it solve? Legacy Vue admin projects often contain dozens of list pages where dictionary-rendered columns still display as plain text, making status and type values hard to scan visually. Manually auditing and upgrading hundreds of dict columns across files is error-prone and unmaintainable. ## Core Features & Use Cases - Graded Audit Report: Scans .vue and .ts files under a target directory and classifies dict-rendered columns into P1 (status/type semantics), P2 (neutral labels), P3 (fmtDict helper style), P4 (custom formatters), and P5 (logicType dict config columns). - Safe Auto-Conversion: With --fix, converts P1 columns to defaultSlot renderers calling dictAutoTag, which uses renderAutoTagByLabel from @agile-team/wl-skills-ui to render solid tags for status words, outlined tags for category words, and plain text fallback for neutral labels. - Import and Cleanup Handling: Automatically inserts or extends import statements, removes orphaned alias const definitions after conversion, and skips files when a brace-balance sanity check fails. - Use Case: Run the audit on src/views of a legacy project, review the P1/P2 report, then apply --fix to upgrade all status and type columns to colored tags in one pass. ## Quick Start Ask the AI to audit the list pages under src/views for dict columns still shown as plain text and convert the status and type columns to semantic auto-color tags.

Frequently Asked Questions about status-column-audit

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

FAQPage Schema
How do I audit Vue table columns that render dict values as plain text?

Run the audit script from the project root with node audit-status-columns.mjs, optionally passing --dir to scope the scan. It walks .vue and .ts files, detects dict formatter patterns, and prints a P1-P5 graded report without modifying code.

How do I convert dict formatter columns to colored status tags automatically?

Run the script with --fix to convert P1 status and type columns into defaultSlot renderers calling dictAutoTag, or add --all to also convert neutral P2 columns. The tool inserts imports, removes unused alias definitions, and skips files failing a brace-balance check.

What dependency version is required for renderAutoTagByLabel?

The conversion relies on renderAutoTagByLabel from @agile-team/wl-skills-ui version 1.10.0 or higher. You must also generate the local bridge file once with --init-bridge so dictAutoTag adapts to the project's dictRef.fmt convention.

Can the automatic conversion break my existing column rendering?

The worst case is no visual change, because neutral labels fall back to plain text rendering. Dict expressions and field names are taken from the const alias definitions themselves rather than guessed from nearby lines, and unbalanced-brace files are skipped with a warning.

Which column patterns are not auto-converted by the audit?

P3 fmtDict helper calls need a manually configured dict ref, P4 custom formatters like date or version concatenation require human review, and P5 logicType dict config columns are only reported as candidates for a central platform hook.