frontend-design

Design production-grade frontend interfaces with HTML/CSS/JS, React, or Vue.

Updated Oct 20, 2025

Search Tags:#typography #design #ui #frontend #animation #web-development #aesthetics

Ready to run

npx skills add https://github.com/justin-graham/cooley --skill frontend-design-justin-graham

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/justin-graham/cooley/tree/main/.claude
Command: npx skills add https://github.com/justin-graham/cooley --skill frontend-design-justin-graham

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates generic "AI slop" aesthetics by generating creative, polished frontend code with exceptional attention to design details.

Core Features & Use Cases

Design Excellence: Generate interfaces with bold aesthetic directions, precision typography, and cohesive color themes.
Production Ready: Create functional, working code for web components, pages, or applications.
Use Case: When you need a login page for a fintech app, this Skill will create a distinctive interface with custom animations, creative layouts, and production-grade functionality.

Quick Start

Create a responsive dashboard interface for a corporate audit platform with a Swiss design aesthetic, red accent colors, and Space Grotesk typography.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I design production-grade frontend interfaces with custom styling?▼

Design production-grade frontend interfaces by applying bold aesthetic directions, precision typography with variable fonts, and CSS variable-based color theming across HTML/CSS/JS, React, or Vue components. This Skill generates working code with distinctive visuals, responsive layouts, and motion interactions aligned to brand guidelines.

Can I create interfaces that avoid generic AI-generated aesthetics?▼

Yes. This Skill eliminates generic aesthetics by generating creative, polished frontend code with exceptional design detail—including custom animations, cohesive color themes, and meticulous layout precision—producing distinctive, production-ready interfaces.

How do I implement responsive layouts with typography and color theming?▼

Implement responsive layouts by defining variable fonts for typography, establishing CSS variables for color themes, and applying motion and interaction constraints. This Skill handles the full design-to-code implementation across components, pages, or full applications.

What design constraints does this approach enforce?▼

Design constraints include performance optimization, accessibility compliance, and brand style alignment. This Skill generates interfaces that meet functional requirements while maintaining distinctive visuals and meticulous detail alignment with industry-standard design guidelines.

Does this work for building dashboards and complex application layouts?▼

Yes. This Skill applies to dashboards, login pages, corporate platforms, and full applications. It generates working code with bold aesthetic directions, custom layouts, and production-grade functionality tailored to specific design briefs and brand requirements.