skills.rest
imalfect
imalfectCOMMUNITY
Explore all skills by this author →
𝕏@imaldevGitHub

frontend-design

Generate production-grade frontend design artifacts with HTML, CSS, JS, and React components.

1|Updated Mar 27, 2026
Search Tags:#design#ui#frontend#css#components#aesthetics
One-click install
npx skills add https://github.com/imalfect/callwrench-ai --skill frontend-design-imalfect
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/imalfect/callwrench-ai/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/imalfect/callwrench-ai --skill frontend-design-imalfect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often chase aesthetics without a cohesive system, producing generic interfaces that lack memorability and scalable detail.

Core Features & Use Cases

  • Establish a bold, production-grade visual direction for web interfaces, covering typography, color, motion, spacing, and accessibility.
  • Generate ready-to-use frontend artifacts (HTML/CSS/JS, React components, or templates) aligned to a cohesive design system and reusable across pages.
  • Use case: design and implement a standout landing page or dashboard with unique aesthetics and accessible, responsive behavior.

Quick Start

Provide a complete production-grade frontend design and code output based on a bold visual direction.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a cohesive frontend design system for a web interface?▼

To create a cohesive frontend design system, define a bold visual direction covering typography, color, motion, spacing, and accessibility, then translate it into reusable HTML/CSS/JS or React components.

How do I generate production-grade frontend code for a landing page or dashboard?▼

Generate production-grade frontend code by outputting ready-to-use HTML/CSS/JS, React components, or templates that align with a cohesive visual system and provide accessible, responsive behavior.

Can I use React components to implement a distinctive UI aesthetic with accessible behavior?▼

Yes, you can generate ready-to-use React components that implement a distinctive UI aesthetic while satisfying requirements for responsive layouts and accessible behavior across web interfaces.

What is the best way to establish a bold visual direction for web interfaces?▼

The best way to establish a bold visual direction for web interfaces is to define a cohesive system covering typography, color, motion, and spacing, pairing aesthetics with code-ready artifacts.

Why do my frontend interfaces lack memorability and scalable visual details?▼

Frontend interfaces lack memorability when teams chase aesthetics without a cohesive system, producing generic interfaces that lack a clear visual direction and scalable design details.

Do I need specific UI dependencies to output code-ready frontend artifacts?▼

No specific UI dependencies are required; the system outputs code-ready frontend artifacts like HTML/CSS/JS or React components directly aligned to your established design system.

Related Skills

Explore More Design & Creative Skills→
IwatsukaYuraIwatsukaYura

frontend-design

Define and enforce a cohesive visual system for frontend interfaces.

Community
Advanced
DITEKmaxDITEKmax

frontend-design

Create production-ready frontend interfaces with cohesive typography, color, motion, and responsive layouts.

Community
Advanced
dylantarredylantarre
38

animation-principles

Map Disney's 12 animation principles to UI motion guidelines.

Community
Basic
act70255act70255

frontend-design

Design distinctive frontend interfaces with intentional design systems and functional code.

Community
Advanced