skills.rest
justin-graham
justin-grahamCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/justin-graham/cooley --skill frontend-design-justin-graham
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
bpteambpteam

frontend-design

Generate production-grade HTML/CSS/JS, React, or Vue frontend interfaces with cohesive design.

Community
Advanced
RemseyMailjardRemseyMailjard

front-end

Create production-grade frontend interfaces with cohesive design and accessibility.

Community
Advanced
Jorge-IvanJorge-Ivan
1

generating-components

Generate and refine frontend UI components with Gemini Design MCP.

Community
Advanced
ouzayrouzayr

design

Generate React-Vite frontends and delegate design refinements to a subagent.

Community
Advanced