bolder_skill

Overview

This skill amplifies safe or boring interfaces into more visually interesting, memorable experiences while preserving usability and accessibility. It guides designers and engineers through a focused, intentional process to increase impact across typography, color, space, motion, and composition. Follow the required frontend-design context gathering protocol before starting; if no context exists, run teach-impeccable first.

How this skill works

First, the skill audits the current design to identify why it feels generic: timid scale, low contrast, predictable patterns, flat hierarchy, and other weak points. It then defines a clear amplification plan: a single focal point, a personality direction, a risk budget, and hierarchy changes. The skill prescribes concrete changes across typography, color, spatial composition, visual effects, and motion, and finishes with verification checks for coherence, performance, and accessibility.

When to use it

• Product feels forgettable or blends in with competitors
• Marketing pages need higher conversion through visual impact
• Brand personality must be stronger without breaking usability
• Early-stage redesigns that need a clear visual direction
• When existing UI is technically sound but lacks character

Best practices

• Run the frontend-design Context Gathering Protocol first to capture brand, purpose, audience, and constraints
• Pick one hero focal point and amplify it—don’t make everything bold
• Increase contrast through scale, weight, and color rather than piling on effects
• Respect accessibility: maintain readable body text and sufficient color contrast
• Use motion and texture sparingly and with purpose to avoid fatigue
• Avoid trendy, generic effects (neon gradients, glassmorphism); aim for distinctive, intentional treatments

Example use cases

• Turn a bland SaaS landing page into a memorable hero that drives signups by amplifying headline scale and visual accents
• Refresh a conservative dashboard by introducing a bold, tasteful accent color and clearer hierarchy for key metrics
• Energize an e-commerce campaign with asymmetric layouts, dramatic product scale, and layered textures
• Elevate a portfolio site using custom typography, rich background treatments, and choreographed entrance animations
• Make a brand microsite more expressive with dominant color strategy and high-contrast accents while preserving legibility