frontend-design

Guide frontend development with typography, color, motion, and layout guidelines.

997|201|Updated May 6, 2014
One-click install
npx skills add https://github.com/freekmurze/dotfiles --skill frontend-design-freekmurze
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/freekmurze/dotfiles/tree/main/config/claude/skills/frontend-design
Command: npx skills add https://github.com/freekmurze/dotfiles --skill frontend-design-freekmurze

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides designers and developers to craft distinctive, production-grade frontend interfaces when users request web components, pages, dashboards, or marketing sites that demand a bold, cohesive aesthetic.

Core Features & Use Cases

  • Design direction: Establish a bold, cohesive visual language across typography, color, motion, and layout.
  • Implementation guidance: Provide production-ready HTML/CSS/JS or framework-ready components (React, Vue, etc.) aligned to the specified aesthetic.
  • Use Case: You need a landing page with a standout hero, a dashboard with modular cards, or a component library with consistent styling; this skill delivers the design direction and implementation notes.

Quick Start

Provide a production-grade frontend component for a marketing landing page using React.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design distinctive frontend components for a React application?▼

Design distinctive frontend components by defining explicit typography, color, motion, and layout guidelines, then generating production-ready React code aligned to that aesthetic. This enforces a design-forward workflow for cohesive UX.

What is the best way to build a marketing landing page with a bold aesthetic?▼

Building a marketing landing page with a bold aesthetic requires establishing a cohesive visual language across typography, color, and motion, then implementing production-ready HTML/CSS or framework components to deliver a standout, polished interface.

Can I use this frontend design workflow with vanilla HTML and CSS?▼

Yes, this frontend design workflow supports vanilla HTML and CSS alongside React and Vue. It provides design direction and implementation guidance to craft distinctive, production-grade web interfaces across these frameworks.

How do I ensure consistent styling across a dashboard with modular cards?▼

Ensure consistent styling across a dashboard by enforcing a design-forward workflow with explicit typography, color, motion, and layout guidelines. This approach delivers a cohesive visual language and production-ready code for modular UI components.

Does this approach provide design specs or just production-ready code?▼

This approach outputs both production-ready code and explicit design specs. It establishes a bold, cohesive visual language across typography, color, motion, and layout alongside framework-ready components for your web interfaces.