skills.rest
alfadocs
alfadocsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

alfadocs-design-review

Audit AlfaDocs app screens for @alfadocs/ui-kit design-system compliance.

Updated Mar 9, 2026
Search Tags:#accessibility#design review#theme tokens#rtl#ui audit#ui kit#alfadocs
One-click install
npx skills add https://github.com/alfadocs/ai-harness-instructions --skill alfadocs-design-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: alfadocs-design-review
Source: https://github.com/alfadocs/ai-harness-instructions/tree/main/lovable/skills/alfadocs-design-review
Command: npx skills add https://github.com/alfadocs/ai-harness-instructions --skill alfadocs-design-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams verify that an AlfaDocs app follows the approved design system instead of drifting into custom UI, broken theming, or inaccessible patterns.

Core Features & Use Cases

  • UI Kit Compliance Review: Checks that screens use AlfaDocs kit components rather than competing libraries or hand-built replacements.
  • Token and Theme Validation: Verifies token-based styling, theme wiring, and support for light, dark, and accessible themes.
  • Accessibility and Safety Checks: Flags unsafe HTML usage, overlay-handling issues, RTL-breaking CSS, and untranslated user-facing strings.
  • Use Case: Use this Skill when auditing a product screen before release to produce a clear list of blockers, warnings, and notes for the engineering team.

Quick Start

Review the AlfaDocs app against the design-system checklist and report any blockers, warnings, and notes with file-level citations.

Frequently Asked Questions about alfadocs-design-review

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

FAQPage Schema
How do I audit an app screen for UI kit compliance before release?▼

To audit UI kit compliance, review each screen against the design-system checklist to identify competing libraries, raw literals, and unsafe HTML, producing a list of blockers, warnings, and notes with file-level citations.

What does a design system compliance check cover for theme tokens and RTL support?▼

A design system compliance check validates token-based styling, theme wiring for light and dark modes, RTL-safe CSS, overlay behavior, and untranslated user-facing strings to prevent inaccessible or broken UI patterns.

How do I verify that my app uses approved UI components instead of hand-built replacements?▼

Verify approved UI component usage by checking screens for Storybook-backed component coverage and flagging instances where hand-built replacements or competing libraries are used instead of the required UI kit components.

Can I check for unsafe HTML rendering and accessibility issues during a UI audit?▼

Yes, you can check for unsafe HTML rendering and accessibility issues during a UI audit by flagging overlay-handling issues, RTL-breaking CSS, and unescaped HTML usage that violate design system safety guidelines.

When do I need to perform a UI audit on my application?▼

You need to perform a UI audit when auditing a product screen before release to ensure it follows the approved design system, verifying component usage, theming, translations, and safe HTML rendering.

Related Skills

Explore More Design & Creative Skills→
ils15ils15
10

frontend-analyzer

Extract typography, colors, layout, spacing, and design tokens from React/Next.js code.

Community
Basic
cagdotincagdotin
36

to-issues

Break down plans, specs, or PRDs into tracer-bullet issues for project trackers.

Community
Intermediate
TechsioCZTechsioCZ
2

component-authoring

Guide component creation and refactoring for @techsio/ui-kit with tokens and Storybook.

Official
Intermediate
jfrometajfrometa

i18n-localization

Audit React, Vue, and Python codebases for hardcoded strings and missing translations.

Community
Basic