frontend-quality-workflow

Frontend Quality Workflow

Required Order

make format
make lint

make format runs:

bun x prettier "**/*.{js,jsx,ts,tsx,mts,json,css,scss,md}" --write
qlty fmt --all --no-progress

If make fmt-qlty fails because qlty is not installed, install the Qlty CLI first:

command -v qlty >/dev/null || {
  installer="$(mktemp)" \
    && curl -fsSL https://qlty.sh -o "$installer" \
    && sh "$installer"
  rm -f "$installer"
}

Then ensure qlty is on PATH and rerun make fmt-qlty. Do not run qlty init or stage .qlty/qlty.toml unless the task explicitly asks for repo Qlty configuration.

Individual Checks

Fix Rules

• Prefer code changes over disabling rules.
• Keep TypeScript types honest; avoid any unless the boundary requires it.
• Keep markdown skill frontmatter to name and description.
• Split complex components, hooks, and helpers instead of lowering metrics policy.
• Re-run the failing check after each focused fix.

Related Guides

Before applying this skill, confirm the active task against ../AI-AGENT-GUIDE.md and ../SKILL-DECISION-GUIDE.md so every relevant skill is consulted.

Line Length Disclosure

Before presenting changes, check changed text files for lines longer than 100 characters. If any exist, tell the user each path:line and measured character count. Treat this as disclosure, not failure, unless a project gate fails.

Supporting Files

• reference/formatting-tools.md: Prettier and Qlty target behavior.
• reference/lint-gates.md: lint command routing.
• reference/metrics-policy.md: metrics policy and common fixes.