Agent-Skills.md

Agent Skills: Frontend Design Philosophy: The 5 Pillars of Intentional UI

Visual & UI philosophy (The 5 Pillars of Intentional UI). Understand deeply to avoid "AI slop" and create distinctive, memorable interfaces.

UncategorizedID: kdcokenny/ocx/frontend-philosophy

Repository

kdcokenny/ocx
kdcokennyLicense: MIT
25217

Install this agent skill to your local

pnpm dlx add-skill https://github.com/kdcokenny/ocx/tree/HEAD/workers/kdco-registry/files/skills/frontend-philosophy

Skill Files

Browse the full folder contents for frontend-philosophy.

Download Skill

Loading file tree…

workers/kdco-registry/files/skills/frontend-philosophy/SKILL.md

Skill Metadata

Name
frontend-philosophy
Description
Visual & UI philosophy (The 5 Pillars of Intentional UI). Understand deeply to avoid "AI slop" and create distinctive, memorable interfaces.

Frontend Design Philosophy: The 5 Pillars of Intentional UI

Role: Design Director for all Visual & Aesthetic decisions — applies to styling, layout, colors, typography, animations, and UI composition.

Philosophy: Distinctive, memorable, intentional design — avoiding generic "AI slop" aesthetics through bold, characterful choices that create immediate emotional impact.

The 5 Pillars

1. Typography with Character

  • Concept: Fonts set the entire tone. Generic fonts create generic, forgettable interfaces.
  • Rule: Avoid Inter, Roboto, Arial, and system-ui defaults. Choose distinctive, characterful typefaces.
  • Practice: Pair dramatic display fonts with refined, readable body fonts.

2. Committed Color & Theme

  • Concept: Timid palettes lack impact and feel algorithmically generated.
  • Rule: Use bold, dominant colors with sharp accent contrasts. Avoid evenly-distributed rainbow gradients.
  • Practice: Establish CSS variable systems early. Break away from the "purple gradient on white" AI cliché.

3. Purposeful Motion

  • Concept: Animation should delight, not distract. Scattered micro-interactions create noise.
  • Rule: One well-orchestrated animation beats a dozen minor transitions. Focus on high-impact moments.
  • Practice: Use CSS animations for HTML, Motion library for React. Prioritize staggered reveals and surprsing hover states.

4. Brave Spatial Composition

  • Concept: Predictable layouts are forgettable. Safe spacing feels automated.
  • Rule: Either generous negative space OR controlled density — not the middle ground.
  • Practice: Embrace asymmetry, overlap, diagonal flow, and grid-breaking elements.

5. Atmosphere & Depth

  • Concept: Flat solid backgrounds lack presence and feel unfinished.
  • Rule: Layer visual richness through gradient meshes, noise textures, geometric patterns, and transparencies.
  • Practice: Add dramatic shadows, decorative borders, grain overlays.

Adherence Checklist

Before completing your task, verify:

  • [ ] Typography: Did you avoid generic system fonts?
  • [ ] Color: Are the color choices bold and intentional?
  • [ ] Motion: Is there a primary, high-impact animation?
  • [ ] Space: Does the layout feel designed rather than templated?
  • [ ] Depth: Is there visual richness (textures, gradients, layering)?