skills.rest
kiva
kivaOFFICIAL
Explore all skills by this author →
Website𝕏@KivaGitHub

audit-page-design

Audit Vue component typography and spacing against the Kiva design system.

4|Updated Apr 8, 2021
Search Tags:#screenshot-capture#typography-audit#design-system-audit#spacing-audit#vue-component-audit#frontend-design-alignment
One-click install
npx skills add https://github.com/kiva/kv-ui-elements --skill audit-page-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: audit-page-design
Source: https://github.com/kiva/kv-ui-elements/tree/main/%40kiva/kv-skills/design-to-code/skills/audit-page-design
Command: npx skills add https://github.com/kiva/kv-ui-elements --skill audit-page-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Manually verifying that a web page's typography and spacing match a centralized design system is time-consuming, inconsistent, and lacks tangible evidence of changes. This Skill provides a structured, code-first workflow to audit pages for design-system drift, apply safe in-repo fixes, and generate shareable before/after visual proof.

Core Features & Use Cases

  • Dimension-by-dimension auditing: Audit typography first, then spacing, for a specific page and its nested local components, with global header and footer elements automatically excluded from scope by default.
  • Safe, classified fixes: Automatically applies high-confidence local fixes for off-spec styling, notates issues in external packages for separate tracking, and flags design-system gaps where no shipped utility exists yet.
  • Visual validation: Captures full-page before and after screenshots across mobile, tablet, and desktop viewports, including support for auditing logged-in user states via dev fake-auth.
  • Use case: A frontend developer needs to update the /lend-by-category page to align with Kiva's design system. They use this Skill to first audit and fix typography issues, review the before/after screenshots, then run a separate spacing audit for the same page.

Quick Start

Use the audit-page-design skill to audit the typography of the /lend-by-category page and capture before/after screenshots for team review.

Frequently Asked Questions about audit-page-design

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

FAQPage Schema
How do I capture full-page before and after screenshots across mobile, tablet, and desktop viewports?▼

To audit a web page's typography against a design system, the skill scans local Vue component source code for off-spec type values, automatically excludes global header and footer elements from scope by default, and classifies findings as local-fixable or design-system gaps.

What is the best way to fix off-spec styling without breaking external package dependencies?▼

Yes, auditing logged-in user states for frontend design alignment is supported via dev fake-auth. This allows the visual validation process to capture full-page before and after screenshots of restricted user views across mobile, tablet, and desktop viewports.

Can I run separate typography and spacing audits for the same page?▼

The best way to fix off-spec styling while protecting external dependencies is to apply classified fixes. This approach automatically applies high-confidence local fixes in-repo, notates issues in external packages for separate tracking, and flags design-system gaps where no utility exists.

Does the design system audit automatically exclude global header and footer elements?▼

Yes, you can run separate typography and spacing audits for the same page. The workflow supports dimension-by-dimension auditing, allowing you to audit typography first, review before/after screenshots, and then run a separate spacing audit for the nested local components.

Does the design system audit automatically exclude global header and footer elements?▼

Yes, the design system audit automatically excludes global header and footer elements from scope by default. This ensures the typography and spacing scan focuses strictly on the specific page and its nested local components to eliminate visual drift.

Related Skills

Explore More Software Engineering Skills→
first-flukefirst-fluke
218

backend-development

Build Python backends with FastAPI, PostgreSQL, and Redis.

Official
Intermediate
rshelekhovrshelekhov

qa-design-review

Detect and fix UI inconsistencies, spacing, and hierarchy issues in source code.

Community
Advanced
samjhechtsamjhecht
4

frontend-visual-regression-testing

Compare UI component screenshots against baselines to detect visual regressions.

Community
Advanced
ibalasiteibalasite

design-review

Audit live sites for visual consistency across typography, spacing, and interactions.

Community
Advanced