skills.rest
barkleesanders
barkleesandersCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Consolidates frontend design workflows into the /carmack agent for custom UI components and pages.

5|Updated Mar 27, 2026
Search Tags:#typography#ui-design#aesthetics#frontend-design#carmack#component-gallery#non-generic-design
One-click install
npx skills add https://github.com/barkleesanders/claude-code-starter --skill frontend-design-barkleesanders
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/barkleesanders/claude-code-starter/tree/main/skills/frontend-design
Command: npx skills add https://github.com/barkleesanders/claude-code-starter --skill frontend-design-barkleesanders

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The standalone frontend-design skill has been deprecated and merged into the /carmack agent, eliminating the need for users to reference a separate skill for frontend design work.

Core Features & Use Cases

  • Bold Aesthetic Direction: Supports extreme design styles including brutally minimal, retro-futuristic, and luxury aesthetics.
  • Custom Typography & Visual Design: Enforces use of distinctive fonts (avoiding generic options like Arial, Inter, and Roboto) and custom color, motion, spatial composition, and background treatments.
  • Anti-Generic Design Guardrails: Includes explicit anti-patterns to avoid cliché AI-generated aesthetics like overused purple gradients.
  • Component Reference Access: Provides access to the component.gallery library for design inspiration and reference. Use this consolidated workflow when designing new UI components or pages that require unique, non-generic visual design.

Quick Start

Invoke the /carmack agent with your desired UI component or page design request to receive tailored, non-generic frontend design guidance.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate custom UI components that avoid generic AI aesthetics?▼

To generate custom UI components that avoid generic AI aesthetics, use the /carmack agent. It applies anti-generic design guardrails to prevent cliché outputs like overused purple gradients and provides bold aesthetic direction.

What is the best way to design frontend pages with distinctive typography?▼

The best way to design frontend pages with distinctive typography is using the /carmack consolidated workflow. It enforces the use of distinctive fonts, explicitly avoiding generic options like Arial, Inter, and Roboto.

Can I access the component.gallery reference library for UI design inspiration?▼

Yes, you can access the component.gallery reference library for UI design inspiration. The /carmack agent integrates this library to provide tailored, non-generic frontend design guidance for your custom pages.

Does this frontend design workflow support extreme styles like brutally minimal or retro-futuristic?▼

Yes, the frontend design workflow supports extreme styles like brutally minimal, retro-futuristic, and luxury aesthetics. Invoke the /carmack agent with your desired UI component request to receive tailored aesthetic direction.

Why do my AI generated UI pages look so generic and lack custom motion schemes?▼

AI generated UI pages look generic because they lack custom motion schemes and bold aesthetic direction. The /carmack agent solves this by enforcing custom color, motion, spatial composition, and background treatments.

Related Skills

Explore More Design & Creative Skills→
JadhavAnshJadhavAnsh

frontend-design

Generate production-ready web components and pages from user design requirements.

Community
Advanced
glassflowglassflow
495

frontend-design

Develop custom frontend interfaces with distinctive typography, color, and motion.

Official
Advanced
BrandondaymdrBrandondaymdr
1

frontend-design

Generate production-grade HTML, CSS, and React interfaces with custom typography and motion.

Community
Advanced
rod97-1rod97-1
1

design-taste-frontend-v1

Enforce curated design taste rules for React and Next.js frontend interfaces.

Community
Advanced