bfree avatar

bfree

Official

@bfree-trainer · Italy

0Followers
|
1Public Repos
|
21Published Skills

bfree trainer app

Skills Distribution
DomainUI/UX & Crea...Frontend Performan.. (30%)Design System Arch.. (30%)Accessibility & UX.. (25%)Interface Interact.. (15%)

Agent Skills by bfree

Showing 21 vetted skills indexed across 1 GitHub repositories.

bfree-trainerbfree-trainer
60

animate

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

Official
Advanced
bfree-trainerbfree-trainer
60

quieter

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

Official
Intermediate
bfree-trainerbfree-trainer
60

optimize

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

Official
Advanced
bfree-trainerbfree-trainer
60

adapt

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

Official
Intermediate
bfree-trainerbfree-trainer
60

clarify

Rewrite unclear UI copy to reduce jargon and ambiguity.

Official
Intermediate
bfree-trainerbfree-trainer
60

distill

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

Official
Intermediate
bfree-trainerbfree-trainer
60

delight

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

Official
Intermediate
bfree-trainerbfree-trainer
60

teach-impeccable

Capture project design context and persist it to AI configuration.

Official
Intermediate
bfree-trainerbfree-trainer
60

onboard

Design onboarding flows with progressive disclosure and analytics tracking.

Official
Intermediate
bfree-trainerbfree-trainer
60

normalize

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

Official
Advanced
bfree-trainerbfree-trainer
60

audit

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

Official
Advanced
bfree-trainerbfree-trainer
60

harden

Harden web UI components against edge cases and runtime failures.

Official
Advanced
bfree-trainerbfree-trainer
60

polish

Fix visual alignment, spacing, copy, and interaction states across UI components.

Official
Advanced
bfree-trainerbfree-trainer
60

extract

Extract reusable UI components, design tokens, and layout patterns from frontend codebases.

Official
Advanced
bfree-trainerbfree-trainer
60

bolder

Amplify safe designs with bolder typography, color, and layout.

Official
Advanced
bfree-trainerbfree-trainer
60

frontend-design

Create production-grade frontend interfaces with accessibility and performance standards.

Official
Advanced
bfree-trainerbfree-trainer
60

arrange

Diagnose spacing and grid issues to produce a spacing scale and layout approach.

Official
Intermediate
bfree-trainerbfree-trainer
60

typeset

Assess typography and implement font, hierarchy, sizing, and readability changes.

Official
Intermediate
bfree-trainerbfree-trainer
60

critique

Generate structured UX critiques with health scores and anti-patterns.

Official
Advanced
bfree-trainerbfree-trainer
60

colorize

Apply a 2-4 color palette to UI designs for semantic color mapping.

Official
Advanced
bfree-trainerbfree-trainer
60

overdrive

Enhance web interfaces with GPU-accelerated animations and virtual scrolling.

Official
Advanced

Frequently Asked Questions About bfree

FAQPage Schema
What specific frontend tasks can I perform using these capabilities?▼

You can execute comprehensive frontend audits, normalize UI components against design tokens, optimize Core Web Vitals, implement responsive CSS Grid layouts, and enhance interface performance through GPU-accelerated animations and virtual scrolling techniques.

Which engineering personas benefit most from these capabilities?▼

Frontend engineers, UI developers, and design system architects benefit most. These capabilities are designed for professionals responsible for maintaining production-grade interfaces, ensuring cross-device responsiveness, and enforcing strict accessibility and performance standards across complex web applications.

What are the prerequisites for integrating these design and performance capabilities?▼

Integration requires an existing React-based frontend codebase and a defined design system. Users should have access to their project's component library and CSS architecture to effectively apply normalization, audit, and optimization routines.