bolder

Amplify web and product UI designs with stronger hierarchy, contrast, and motion.

Updated May 14, 2026
One-click install
npx skills add https://github.com/chroniicallydiistracted/LorcanaChamp --skill bolder-chroniicallydiistracted
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: bolder
Source: https://github.com/chroniicallydiistracted/LorcanaChamp/tree/main/references/lorcana-simulator/.agents/skills/bolder
Command: npx skills add https://github.com/chroniicallydiistracted/LorcanaChamp --skill bolder-chroniicallydiistracted

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The bolder Skill helps fix visual designs that feel safe, generic, or underwhelming by turning them into confident, memorable experiences without resorting to overused AI-style effects.

Core Features & Use Cases

  • Typography, color, and composition amplification: Creates stronger hierarchy and attention through deliberate scale jumps, contrasting weights, and intentional palette decisions.
  • Visual effects and depth that aren’t glassmorphism: Recommends textures, frames, borders, and shadows that look designed rather than templated.
  • Controlled motion and interaction: Adds purposeful entrance choreography and micro-interactions while avoiding animation fatigue and “neon-for-neon’s-sake” trends.

Quick Start

Use the bolder skill to review the current design, identify what makes it timid or boring, and apply a consistent set of typography, color, spatial, and motion upgrades aimed at a single hero focal point.

Frequently Asked Questions about bolder

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

FAQPage Schema
How do I make my UI design less generic and more visually distinctive?

Improve weak UI design by applying a structured amplification plan across visual hierarchy, typography, color palettes, composition, and motion. This process increases visual impact and personality while preserving usability and accessibility for web or product screens.

How do I add motion design to a web layout without causing animation fatigue?

Add motion design to web layouts by implementing purposeful entrance choreography and micro-interactions while avoiding animation fatigue. This approach ensures performance-safe animation that enhances the design without relying on neon-for-neon's-sake trends.

What's the best way to improve visual hierarchy and contrast in a flat product design?

Improve visual hierarchy and contrast in flat product designs by applying deliberate scale jumps, contrasting typography weights, and intentional palette decisions. You can also add designed textures, frames, borders, and shadows to create depth rather than relying on templated effects.

Can I redesign a timid layout for stronger visual impact without breaking accessibility?

You can redesign timid layouts for stronger visual impact while preserving accessibility by following a frontend-design-skill-guided DO/DO-NOT review. This ensures that typography, color, and motion amplification upgrades maintain usability and accessibility standards.

Why does my UI color palette and typography system feel underwhelming despite following design trends?

UI color palettes and typography systems feel underwhelming when they rely on safe, generic, or templated visual effects. Fix this by applying deliberate scale jumps, contrasting weights, and intentional palette decisions that create stronger hierarchy without resorting to overused AI-style effects.