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.