edxeth

---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
license: Complete terms in LICENSE.txt
---

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

davidgilbertson

body {
    color: #212121;
    font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.02em;
}

mattdsteele

node_modules
*.pem

danro

#-webkit-web-inspector #toolbar {
  background: #cdcdcd !important;
  height: 36px !important;
}
#-webkit-web-inspector #main {
  top: 36px !important;
}
#-webkit-web-inspector .toolbar-item.elements:hover:after {
  content: "elements";
  z-index: 9999;

ryanbagueros

http://blog.toddwerth.com/entries/6

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<!--
    iTerm2 IR-Black Colorscheme
    Based on Todd Werth's IR-Black Colorscheme for Terminal.app, see:
        http://blog.toddwerth.com/entries/6
    by: ryan bagueros <ryan@bagueros.com>

davidl

@-webkit-keyframes webkit-inspector-error{0%{color:#ff6c60} 50%{color:#f91300} 100%{color:#ff6c60}}@-webkit-keyframes webkit-inspector-fadeout{from{background-color:#c5c8c6} to{background-color:#1d1f21}}#-webkit-web-inspector{background-color:#1d1f21}#-webkit-web-inspector .monospace,#-webkit-web-inspector .source-code{font-family:'DroidSansMono',Menlo,monospace !important}
#-webkit-web-inspector ::selection{background:rgba(197,200,198,0.25) !important;opacity:1}
#-webkit-web-inspector #toolbar{background-image:-webkit-linear-gradient(#444, #333) !important;border-bottom:1px solid #444 !important;border-top:1px solid #000 !important}
#-webkit-web-inspector #toolbar .toolbar-label{color:#c5c8c6 !important}
#-webkit-web-inspector #toolbar .toggled-on .toolbar-label{color:#f9faf9 !important}
#-webkit-web-inspector #toolbar .toolbar-item.toggleable.toggled-on{background-image:-webkit-linear-gradient(#333, #444) !important}
#-webkit-web-inspector #search-results-matches{color:#f9faf9 !important;text-shadow:none !i

localpcguy

var swipeFunc = {
	touches : {
		"touchstart": {"x":-1, "y":-1}, 
		"touchmove" : {"x":-1, "y":-1}, 
		"touchend"  : false,
		"direction" : "undetermined"
	},
	touchHandler: function(event) {
		var touch;
		if (typeof event !== 'undefined'){	

star-szr

/**********************************************/
/*
/* IR_Black Skin by Ben Truyman - 2011
/*
/* Based on Todd Werth's IR_Black:
/* http://blog.toddwerth.com/entries/2
/*
/* Inspired by Darcy Clarke's blog post:
/* http://darcyclarke.me/design/skin-your-chrome-inspector/
/*

tvandervossen

iPad

1024 × 690  In landscape on iOS 4.3
1024 × 672  In landscape on iOS 5
768  × 946  In portrait on iOS 4.3 
768  × 928  In portrait on iOS 5
             
1024 × 660  Always showing bookmarks bar in landscape on iOS 4.3
1024 × 644  Always showing bookmarks bar in landscape on iOS 5
768  × 916  Always showing bookmarks bar in portrait on iOS 4.3 

bentruyman

/**********************************************/
/*
/* IR_Black Skin by Ben Truyman - 2011
/*
/* Based on Todd Werth's IR_Black:
/* http://blog.toddwerth.com/entries/2
/*
/* Inspired by Darcy Clarke's blog post:
/* http://darcyclarke.me/design/skin-your-chrome-inspector/
/*