skills.rest
TechsioCZ
TechsioCZOFFICIAL
Explore all skills by this author →
GitHub

app-ui-kit-audit

Audit app UIs for @techsio/ui-kit adoption gaps and token-first violations.

2|Updated Dec 2, 2024
Search Tags:#automation#frontend#audit#ui-kit#component-usage#token-first#props-validation
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill app-ui-kit-audit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: app-ui-kit-audit
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/app-ui-kit-audit
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill app-ui-kit-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Auditors developers on apps using @techsio/ui-kit to identify mismatches between adoptions, missing components, non-token-first styling, and API gaps, enabling consistent UI kit usage.

Core Features & Use Cases

  • Checks existing component usage against the UI-kit API to ensure proper adoption across codebases.
  • Flags non-token-first styling and native HTML primitives that should be replaced with UI-kit components.
  • Reports actionable fixes and best-practice guidance to align apps with UI-kit guidelines.

Quick Start

Run the audit against your apps to identify UI-kit adoption gaps and generate actionable fixes.

Frequently Asked Questions about app-ui-kit-audit

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

FAQPage Schema
How do I audit my frontend app for correct UI-kit component usage?▼

To audit frontend component usage, run this skill against your codebase to automatically detect missing UI-kit components, identify incorrect props, and flag native HTML elements that require replacement.

What is token-first styling validation and why does it matter for UI-kit adoption?▼

Token-first styling validation ensures components rely on standardized design tokens rather than hardcoded values. This skill flags token-first violations to maintain visual consistency across multiple UI surfaces.

Can I check my library for API gaps and missing UI components automatically?▼

Yes, you can check libraries automatically by applying this skill to verify existing component usage against the UI-kit API, detecting mismatches, and reporting actionable fixes for API gaps.

How do I find native HTML primitives that should be replaced with UI-kit components?▼

Finding native HTML primitives involves scanning your app UIs to flag elements that bypass the UI-kit. This skill detects these replacements and provides best-practice guidance for alignment.

Does the UI-kit audit support props validation across multiple UI surfaces?▼

Yes, the UI-kit audit supports props validation by checking existing component usage across multiple UI surfaces to ensure correct adoption and identify incorrect props within your applications.

What's the best way to enforce reproducible rule-driven checks for frontend UI-kit adoption?▼

The best way to enforce rule-driven checks is applying this skill, which references documented audit rules and guidance to ensure reproducible validation of proper UI-kit adoption across codebases.

Related Skills

Explore More Software Engineering Skills→
TechsioCZTechsioCZ
2

storybook-authoring

Author Storybook CSF3 stories for @techsio/ui-kit components with consistent patterns.

Official
Intermediate
JaimeJunrJaimeJunr
2

run-tests

Execute unit and integration tests, analyze failures, and re-run to verify corrections.

Community
Advanced
JoeyMckenzieJoeyMckenzie

tailwindcss-development

Standardize Tailwind v4 styling across Blade, JSX, and Vue templates.

Community
Advanced
zircotezircote
5

adr-compliance

Audit code against accepted ADRs and generate compliance reports.

Community
Advanced