skills.rest
Xerrion
XerrionCOMMUNITY
Explore all skills by this author →
Website𝕏@TheRealXerrionGitHub

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
One-click install
npx skills add https://github.com/Xerrion/opencode --skill frontend-philosophy-xerrion
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ProLeadApptProLeadAppt

design-audit

Identify visual design inconsistencies and deliver a phased audit plan referencing DESIGN_SYSTEM tokens.

Community
Advanced
mykcsmykcs
1

frontend-design

Translate UI requirements into cohesive design systems and frontend code.

Community
Advanced
vcnttttvcntttt
1

frontend-design

Generate frontend interfaces from design requirements across frameworks.

Community
Advanced
Hao-Nguyen2712Hao-Nguyen2712

aesthetic

Generate design guidelines for web and mobile UI interfaces.

Community
Advanced