frontend-philosophy

Define a visual UI philosophy with the 5 Pillars framework for frontend design reviews.

Updated Mar 5, 2026

Search Tags:#typography #frontend #color #ui-design #motion #design-systems #spatial-composition

Ready to run

npx skills add https://github.com/Xerrion/opencode --skill frontend-philosophy-xerrion

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-philosophy
Source: https://github.com/Xerrion/opencode/tree/main/skills/frontend-philosophy
Command: npx skills add https://github.com/Xerrion/opencode --skill frontend-philosophy-xerrion

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This philosophy guides frontend teams to avoid generic AI-generated interfaces by establishing a distinctive, intentional visual language.

Core Features & Use Cases

Establishes concrete guardrails for typography, color, motion, spatial composition, and depth to maintain consistent, intentional UI.
Supports design-system creation, UI audits, and critique sessions to elevate brand personality and user experience.
Use case: align product teams on a shared visual language during feature launches and redesigns.

Quick Start

Follow the 5 Pillars to audit and refine a UI: review typography, color, motion, spatial composition, and depth to ensure each decision aligns with a unique, intentional design language.

Frequently Asked Questions about frontend-philosophy

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

FAQPage Schema

How do I establish a consistent UI design system to avoid generic interfaces?▼

To establish a consistent UI design system, apply a 5 Pillars framework covering typography, color, motion, spatial composition, and depth to set concrete guardrails for intentional frontend design decisions.

What are the core principles of frontend visual design for web and mobile projects?▼

The core principles of frontend visual design are structured around five pillars: typography, color and theming, motion, spatial composition, and atmosphere or depth, ensuring each interface decision is intentional.

How do I conduct a UI audit to refine my product's visual language?▼

Conduct a UI audit by reviewing your interface against the 5 Pillars framework, checking typography, color, motion, spatial composition, and depth to ensure alignment with a distinctive, intentional visual language.

Can I use this framework to align product teams during a redesign?▼

Yes, you can use this UI philosophy to align product teams during redesigns and feature launches by providing shared guardrails for design reviews, critique sessions, and design-system creation.

What is the best way to guide frontend design decisions across web and mobile?▼

The best way to guide frontend design decisions is to define a distinctive visual UI philosophy using the 5 Pillars, applying consistent guardrails across both web and mobile projects to elevate brand personality.

Why does my design system produce generic looking interfaces?▼

Your design system likely produces generic interfaces because it lacks a distinctive visual language; applying intentional guardrails for typography, color, motion, spatial composition, and depth resolves this.