skills.rest
FredoAi
FredoAiOFFICIAL
Explore all skills by this author →
GitHub

frontend-design

Creates distinctive Chakra UI v3 interfaces using Fredo's theme-aware semantic tokens.

Updated May 18, 2026
Search Tags:#react#design system#theme tokens#css variables#frontend design#chakra ui#ui aesthetics
One-click install
npx skills add https://github.com/FredoAi/fredo --skill frontend-design-fredoai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/FredoAi/fredo/tree/main/.opencode/skills/frontend-design
Command: npx skills add https://github.com/FredoAi/fredo --skill frontend-design-fredoai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated React interfaces often look generic and ignore project theming, producing hardcoded colors and default component styling. This Skill guides the creation of intentional, production-grade Chakra UI v3 interfaces for Fredo that commit to a bold aesthetic direction and use only theme-backed semantic tokens. ## Core Features & Use Cases - Aesthetic Direction Framework: Commit to one of seven defined directions (brutalist, luxury, playful, editorial, industrial, organic, retro-futuristic) with mapped Fredo tokens, spacing, and typography rules. - Theme Token Enforcement: All colors flow through semantic tokens (bg.surface, accent.default, status.*) bridged to CSS variables, with color-mix tinting via the shared tint() helper instead of invalid alpha-appended var() references. - Anti-Pattern Guardrails: Explicit lists of layout, color, typography, and component crimes to avoid, plus motion and cognitive-load rules (Doherty threshold, skeletons over spinners, optimistic UI). - Use Case: When building a new Mission Monitor panel, the UI/UX Expert loads this Skill to pick an industrial aesthetic, encode the patterns into a design capsule, and hand it to the Developer for token-compliant implementation. ## Quick Start Ask the agent to design a new Fredo settings panel using the frontend-design skill with a luxury aesthetic and theme-aware Chakra v3 components.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create non-generic Chakra UI v3 interfaces?▼

Commit to one bold aesthetic direction before writing components, then derive spacing, color, typography, and motion from that choice. Customize Card.Root with background, shadow, and hover transitions instead of using framework defaults.

How do I use theme tokens instead of hardcoded colors in Chakra UI?▼

Reference semantic tokens like bg.surface, fg.muted, and accent.default that map to CSS variables in the theme system. Never use hex, rgba, or default palette values like gray.100; add missing colors to the theming feature first.

Why does appending alpha to a CSS var() color fail?▼

Appending digits like var(--accent-primary)22 is invalid CSS because var() substitution splices tokens without re-lexing, so the browser drops the declaration. Use color-mix via a tint() helper, which computes live from the variable at paint time.

Does Chakra UI v3 support light and dark theme switching?▼

Yes, when colors are defined as semantic tokens mapped to CSS variables with both light and dark values in the theme. Components reading tokens automatically re-tint when the user switches themes or accent colors.

What animation approach works with Chakra UI without external libraries?▼

Use CSS transitions through Chakra's _hover, _active, and transition style props, animating only transform and opacity. Keep micro-interactions at 0.15-0.3s and entrances at 0.4-0.6s with staggered children.

Related Skills

Explore More Design & Creative Skills→
BrunoAMSilvaBrunoAMSilva

interface-design

Plan UI systems and define UX flows for software interfaces.

Community
Advanced
wfvuewfvue
3

understanding-tauri-ipc

Implement secure structured IPC between Tauri frontend and Rust backend.

Community
Intermediate
JacksonZx535JacksonZx535

design-review

Automates website design audits for visual consistency, typography, color, spacing, layout, interaction, responsiveness, motion, content, and performance.

Community
Advanced
aki-softwareaki-software

tailwind-design-system

Create scalable design systems with Tailwind CSS v4 and design tokens.

Official
Advanced