skills.rest
paulinett1508-dev
paulinett1508-devCOMMUNITY
Explore all skills by this author →
GitHub

Frontend Design (Autoridade Estética)

Design production-ready frontend interfaces with CSS variables and accessible responsive patterns.

Updated Aug 27, 2026
Search Tags:#typography#frontend#design system#ui design#dark mode#motion#responsive ux
One-click install
npx skills add https://github.com/paulinett1508-dev/SuperCartolaManagerv5-production --skill frontend-design-autoridade-est-tica
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Design (Autoridade Estética)
Source: https://github.com/paulinett1508-dev/SuperCartolaManagerv5-production/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/paulinett1508-dev/SuperCartolaManagerv5-production --skill frontend-design-autoridade-est-tica

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents generic, “AI-slop” frontend designs by enforcing a clear aesthetic direction and delivering real, functional, production-ready UI details.

Core Features & Use Cases

  • Aesthetic direction with execution: Turns user frontend requirements into an intentionally bold visual system (typography, color, motion, composition, and visual depth) rather than random styling.
  • Production-grade UI with guardrails: Produces interfaces that are accessible (contrast targets), responsive (mobile-first), and interactive (hover/focus states, touch targets, loading/feedback patterns).
  • Cartola-specific design coherence: Applies the project’s UI identity (e.g., Russo One for titles, Inter for body, JetBrains Mono for numbers, strict dark mode tokens, module accent colors) and anti-pattern avoidance (generic SaaS dashboards, chaotic tables, over-animated live data).

Quick Start

Ask the AI to redesign your Cartola Manager page with a bold, premium dark-mode look using the existing design system tokens and production-ready responsive UI patterns.

Frequently Asked Questions about Frontend Design (Autoridade Estética)

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

FAQPage Schema
How do I avoid generic AI-slop frontend design when generating UI components?▼

To avoid generic AI-slop frontend design, you must enforce a clear aesthetic direction covering typography, color tokens, motion, and composition. This approach intentionally builds distinctive visual systems and strict design rules to deliver production-ready interfaces rather than random styling.

How do I build a dark mode UI with strict design tokens for a React or Next.js dashboard?▼

Building a dark mode UI requires strict no-hardcoded-color rules using CSS variables for color tokens. You can implement responsive dashboards in React or Next.js by applying coherent interaction states, accessibility contrast targets, and loading feedback patterns.

What's the best way to establish a frontend design system for responsive web applications?▼

The best way to establish a frontend design system is defining a bold visual structure with typography, composition, and visual depth. This ensures responsive UX validation targets and accessible interaction states are consistently met across HTML, CSS, and JavaScript web stacks.

Does this frontend UI design approach work with Vue and modern styling setups?▼

Yes, this frontend UI design approach works with Vue and modern styling setups. It applies across common web stacks including HTML/CSS/JavaScript and React/Next.js/Vue to design or redesign components, layouts, and interactive UI elements with production-ready feedback patterns.

Why does my AI-generated UI lack visual depth and motion coherence?▼

Your AI-generated UI lacks visual depth and motion coherence because it is missing an enforced aesthetic direction. Without intentional design tokens for typography, color, and motion, generated interfaces default to generic SaaS aesthetics and chaotic over-animated data displays.

Related Skills

Explore More Design & Creative Skills→
agentik-osagentik-os
10

minimalist-ui

Defines and enforces an editorial UI system with typography and contrast rules for web interfaces.

Community
Intermediate
MinhHoangDonoMinhHoangDono

ui-styling

Style React interfaces with shadcn/ui and Tailwind CSS using token-driven theming.

Community
Basic
secondskysecondsky
204

interaction-design

Apply feedback patterns and accessible interaction design to loading states and error handling UX.

Community
Basic
gotalabgotalab
406

frontend-design

Generate production-grade frontend interfaces with bold aesthetics and accessibility.

Community
Intermediate