Skip to main content

PhariaAI Application Development Guidelines

What are the best practices for building applications for PhariaAI? You're in the right place! This guide will walk you through the essential coding practices that'll help your application play nicely with the PhariaAI ecosystem while maintaining a consistent user experience.

The Aleph Alpha UI library is your best friend here – it comes packed with default fonts and colors that you'll want to use. Check out the getting started guide to dive deeper into the design system.

Keeping Your UI Styles Consistent​

When styling your application, think of the design system as your foundation. Here's how to work with it effectively:

Why You Should Work With the Design System, Not Against It​

Instead of fighting the defaults, embrace them! The Design system UI library provides props that handle styling for you, ensuring consistency across all PhariaAI applications and reducing maintenance headaches. Try to avoid overriding these key CSS properties:

  • font-family
  • font-size
  • color
  • background-color

When You Need Custom Styles​

Sometimes you'll need to customize things – that's totally normal! When you do, be surgical about it. Target specific elements in your PhariaAI application rather than making sweeping global changes.

Why You Should Avoid Broad CSS Selectors​

Global selectors cast too wide a net and can cause unintended consequences. They can accidentally break other parts of the application or conflict with the design system's carefully crafted styles.

Stay away from these broad selectors:

body { ... }
p { ... }
div { ... }
:root { ... }

Skip the Nuclear Option​

Here's a golden rule: avoid !important whenever possible. It's like using a sledgehammer when you need a screwdriver. Instead, write more specific CSS selectors to achieve the styling you need. Your future self (and your teammates) will thank you!

Handling Static Assets the Right Way​

Got images, fonts, or other static files from third-party libraries? Here's something important to keep in mind.

The Problem​

When your PhariaAI application gets integrated with PhariaAssistant, it might lose track of static assets that use relative paths. This can break your app's functionality or appearance.

The Solution​

Inline your static assets! It's easier than it sounds. Just add ?inline to your import statements:

// This ensures the file gets bundled directly into your build
import StaticAsset from '<your-third-party-library>/build/<some-obscure-path>/static-file.json?inline'

This tells the build process to include the file content directly in your bundle instead of keeping it as a separate file that might get lost.

tip

Want to learn more about asset handling? Check out the Vite asset documentation for all the details.