skills.rest
qaml-ai
qaml-aiOFFICIAL
Explore all skills by this author →
Website𝕏@usecamelaiGitHub

ui-design

Enforce camelAI's UI typography and visual hierarchy with font size scales and class-based styles.

2|Updated Apr 6, 2026
Search Tags:#Typography#UI Design#font management#Visual Hierarchy#camelAI
One-click install
npx skills add https://github.com/qaml-ai/acon --skill ui-design-qaml-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/qaml-ai/acon/tree/main/.claude/skills/ui-design
Command: npx skills add https://github.com/qaml-ai/acon --skill ui-design-qaml-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill provides guidelines for camelAI's UI, helping maintain consistency in font sizes, families, and color for better visual organization.

Core Features & Use Cases

  • Typography Standards: Offers a predefined scale of font sizes, classes for text styles, and color guidance.
  • Visual Hierarchy: Helps developers maintain logical organization and emphasis through font and color usage.
  • Use Case: When designing UI elements in camelAI, ensure your layout follows established type scales for clarity and readability.

Quick Start

Apply 'text-xl font-medium' to a primary page title in your camelAI UI to emphasize section headers.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I standardize UI typography and visual hierarchy for consistent design?▼

To standardize UI typography, apply predefined 4-tier font size scales and class-based styles. This enforces consistent visual organization and readability across your user interface elements.

What's the best way to manage font sizes and text styles in camelAI UI development?▼

Manage font sizes by applying predefined class-based text styles like 'text-xl font-medium' to titles. This provides a standardized visual hierarchy and ensures logical emphasis across camelAI interfaces.

Do I need prior knowledge of typography principles to use this UI standardization approach?▼

Yes, you need knowledge of typography and visual design principles to effectively implement these UI typography and visual hierarchy rules. This ensures correct application of font sizes and color guidance.

How does a 4-tier font size scale improve visual hierarchy in UI design?▼

A 4-tier font size scale improves visual hierarchy by providing distinct levels for logical organization and emphasis. It guides developers in maintaining clear structure and readability across UI elements.

Can I use these typography standards to emphasize section headers in my UI layout?▼

Yes, you can emphasize section headers by applying class-based styles like 'text-xl font-medium' to primary page titles. This ensures your UI layout follows established type scales for clarity.

Related Skills

Explore More Design & Creative Skills→
AshesOfTheUndeadAshesOfTheUndead

fantasy

Standardize fantasy-themed design tokens and component rules for Roblox UI development.

Community
Intermediate
Sir-chawakornSir-chawakorn
33

design-mastery

Implement Glassmorphism and Neumorphism design patterns for modern UI.

Community
Intermediate
Equat-ionEquat-ion

neobrutalism

Generate Neobrutalism design tokens for typography, color, and spacing.

Community
Intermediate
Hey-ViswaHey-Viswa

coinbase-design-skill

Apply Coinbase design-system rules to UI tasks with React/Next.js guidance.

Community
Intermediate