bfree-trainerOfficial·21 Agent Skills Included

bfree

Frontend design audits, polish, animation, and accessibility fixes

Audits and improves web interfaces across layout, typography, color, motion, and accessibility. Eliminates generic AI-looking designs, cluttered layouts, weak hierarchy, and confusing copy through 21 focused commands. Guides each fix with project-specific design context so every change matches your brand and users. Ends with polish passes that catch spacing, contrast, and interaction details before shipping.

60|7

↗

npx skills add bfree-trainer/bfree --all -g -y

Available:

Provides the agent with Bfree's design context — users, brand personality, colors, typography, and design principles — so every design skill produces output aligned with the project's sporty, privacy-first aesthetic.

All Skills in This Repository (21)

Pure Emerald Level Indicators

📦 In Repo

bfree-trainer

animate

Add animations and micro-interactions to React frontends with reduced-motion fallbacks.

quieter

Desaturate colors, reduce font weights, and increase whitespace in UI designs.

optimize

Identifies and fixes web UI performance issues using LCP, FID, and CLS targets.

adapt

Adapts UI/UX designs across screen sizes using responsive techniques like CSS Grid and container queries.

clarify

Rewrite unclear UI copy to reduce jargon and ambiguity.

distill

Simplify product and interface designs by removing unnecessary elements and visual noise.

delight

Add subtle animations and copy to UI states for memorable interactions.

teach-impeccable

Capture project design context and persist it to AI configuration.

onboard

Design onboarding flows with progressive disclosure and analytics tracking.

normalize

Audit and realign UI components to match design system tokens and patterns.

audit

Run frontend quality audits across accessibility, performance, theming, and responsive design.

harden

Harden web UI components against edge cases and runtime failures.

Official

Advanced

Frequently Asked Questions

FAQPage Schema

How to install Bfree design skills?▼

Run `npx skills add bfree-trainer/bfree --all -g -y` in your terminal to install all design skills globally.

How to fix a generic AI-looking interface?▼

Run the /critique or /audit skill to detect AI slop patterns like gradient text and card grids, then apply targeted fixes with /bolder, /arrange, or /colorize.

Can these skills improve accessibility?▼

Yes. The /audit skill scores WCAG compliance, contrast, keyboard navigation, and touch targets, then recommends prioritized fixes.

Do I need design experience to use these skills?▼

No. Each skill asks a few questions about your users and brand, then applies professional design decisions automatically.

Do these skills work with Claude Code and Cursor?▼

Yes. All skills follow the universal SKILL.md standard and run in Claude Code, Cursor, OpenClaw, and other compatible environments.