skills.rest
mikeOnBreeze
mikeOnBreezeCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Enforce intentional design choices for web component, page, and application interfaces.

284|94|Updated Feb 11, 2026
Search Tags:#web-development#ui-ux#creative-coding#production-grade#frontend-design#custom-ui#interface-design
One-click install
npx skills add https://github.com/mikeOnBreeze/cc-crossbeam --skill frontend-design-mikeonbreeze
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mikeOnBreeze/cc-crossbeam/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/mikeOnBreeze/cc-crossbeam --skill frontend-design-mikeonbreeze

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the pervasive issue of generic, forgettable AI-generated frontend interfaces that lack unique character, fail to match the specific context and audience of a project, and all look identical to one another.

Core Features & Use Cases

  • Context-Aware Aesthetic Direction: Guides selection of a bold, purpose-built design style (e.g., brutalist, retro-futuristic, organic, luxury, editorial) tailored to the project's goals and users, instead of defaulting to overused templates.
  • Strict Design Quality Guardrails: Enforces high standards for typography, color palettes, motion, spatial composition, and visual details to ensure polished, memorable output that avoids common "AI slop" patterns like overused purple gradients and generic font families.
  • Use Case: A developer building a public-facing ADU permit assistant for California homeowners can use this skill to create a warm, approachable interface that feels trustworthy for non-technical users, rather than a generic SaaS dashboard template.

Quick Start

Use the frontend-design skill to build a distinctive, branded landing page for your ADU permit assistant tool that feels approachable for contractors and homeowners.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I avoid generic AI-generated frontend interfaces in my web application?▼

To avoid generic AI-generated frontend interfaces, enforce intentional, context-specific design choices like custom typography, cohesive color palettes, and unique spatial composition. This ensures your web components and pages achieve a distinctive, production-grade visual design tailored to your audience.

What is the best way to build a custom UI with production-grade visual design?▼

The best way to build a custom UI with production-grade visual design is to apply strict design quality guardrails. Mandate purposeful motion, cohesive color palettes, and custom typography to eliminate overused template aesthetics and create polished, memorable web components.

Can I apply specific aesthetic directions like brutalist or retro-futuristic styles to my web components?▼

Yes, you can apply specific aesthetic directions like brutalist, retro-futuristic, organic, luxury, or editorial styles to web components. This context-aware aesthetic direction tailors the interface to project goals instead of defaulting to overused templates.

Why does my AI-generated frontend design look identical to other SaaS dashboards?▼

AI-generated frontend designs look identical when they lack unique character and default to overused template aesthetics like generic SaaS dashboards. Enforcing intentional design choices with custom typography and cohesive color palettes prevents these common AI slop patterns.

Does this approach to interface design work for public-facing end-user tools?▼

Yes, this interface design approach works for public-facing end-user tools. It guides the creation of distinctive, branded interfaces—such as a warm, approachable landing page for an ADU permit assistant—ensuring the visual design feels trustworthy for non-technical users.

When do I need custom typography and spatial composition for frontend development?▼

You need custom typography and spatial composition for frontend development when distinctive, production-grade visual design is required for end-user facing tools. This prevents forgettable interfaces and ensures the output matches the specific context of your project.

Related Skills

Explore More Design & Creative Skills→
cfbendercfbender
4

teach-impeccable

Explore codebases and clarify user needs to create a Design Context section in CLAUDE.md.

Community
Intermediate
vuminhieuvuminhieu

frontend-design

Design production-grade frontend interfaces with cohesive typography, color, motion, and design tokens.

Community
Advanced
Khang5687Khang5687

frontend-design

Direct frontend interface development with HTML, CSS, and JS design principles.

Community
Advanced
aguirrerjgaguirrerjg
1

frontend-design

Generates frontend interfaces with intentional aesthetic direction and cohesive design across frameworks and plain HTML/CSS/JS.

Community
Advanced