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

alfadocs-design-system

Build AlfaDocs interfaces with official UI kit primitives and ThemeRoot.

Updated Mar 9, 2026
Search Tags:#theming#react#storybook#design-system#ui-kit#alfadocs#marketplace-app-shell
One-click install
npx skills add https://github.com/alfadocs/ai-harness-instructions --skill alfadocs-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: alfadocs-design-system
Source: https://github.com/alfadocs/ai-harness-instructions/tree/main/lovable/skills/alfadocs-design-system
Command: npx skills add https://github.com/alfadocs/ai-harness-instructions --skill alfadocs-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents AlfaDocs app UIs from being built with the wrong component library, broken theme tokens, or hand-rolled styling that drifts from the design system.

Core Features & Use Cases

  • Kit-first component selection: Use the AlfaDocs UI kit primitives instead of inventing buttons, tables, dialogs, avatars, forms, or layout chrome.
  • Brand and theme consistency: Apply the shared tokens, four themes, RTL-safe logical properties, and app shell patterns across screens and product surfaces.
  • Common use case: Build a marketplace app, admin page, or patient-facing workflow with the official AlfaDocs components, translations, and shell instead of custom CSS or another UI framework.

Quick Start

Ask the assistant to build the AlfaDocs screen using the official UI kit, theme providers, translations, and MarketplaceAppShell instead of custom CSS or any competing component library.

Frequently Asked Questions about alfadocs-design-system

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

FAQPage Schema
How do I build a React UI that matches the AlfaDocs design system?▼

To build an AlfaDocs React UI, use the official AlfaDocs UI kit primitives, ThemeRoot, and MarketplaceAppShell pattern instead of custom CSS or competing component libraries to ensure brand and theme consistency.

What components should I use for AlfaDocs marketplace app development?▼

For AlfaDocs marketplace app development, use the official UI kit primitives including avatars, dialogs, tables, forms, and the MarketplaceAppShell pattern rather than hand-rolled styling or other component libraries.

Does the AlfaDocs design system support RTL languages and multiple themes?▼

Yes, the AlfaDocs design system supports RTL languages through logical properties and provides four shared themes using themed tokens applied via the ThemeRoot component for consistent product interfaces.

Can I use custom CSS alongside the AlfaDocs UI kit?▼

No, you should not use custom CSS alongside the AlfaDocs UI kit. The design system requires using official kit primitives, ThemeRoot, and i18n namespaces to prevent styling drift from established brand tokens.

How do I add translations to an AlfaDocs application screen?▼

To add translations to an AlfaDocs application screen, use the i18n namespaces provided by the design system alongside the UI kit primitives and ThemeRoot, replacing any hand-rolled or custom localization approaches.

Why does my AlfaDocs app interface look inconsistent with the main product?▼

Your AlfaDocs app interface looks inconsistent because it was likely built with hand-rolled styling or a competing UI library. Apply the shared themed tokens, ThemeRoot, and MarketplaceAppShell pattern to restore brand consistency.

Related Skills

Explore More Software Engineering Skills→
alfadocsalfadocs

alfadocs-prototype-app

Build AlfaDocs prototype screens with the AlfaDocs UI kit and inline mock data.

Official
Intermediate
alfadocsalfadocs

alfadocs-design-review

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

Official
Advanced
791994545791994545
4

i18n-expert

Automate i18n setup and audit UI code for localization compliance.

Community
Intermediate
KullendorffKullendorff

tailwind-css

Configure Tailwind CSS utility-first styling with JIT compilation and build tool integration.

Community
Intermediate