skills.rest
mashharuki
mashharukiCOMMUNITY
Explore all skills by this author →
Website𝕏@haruki_web3GitHub

frontend-design

Generates distinctive frontend interfaces with deliberate typography, color, motion, and layout choices.

Updated Feb 22, 2026
Search Tags:#typography#frontend#react#css#web design#animation#ui design
One-click install
npx skills add https://github.com/mashharuki/CareTech-Catalyst-Hackathon --skill frontend-design-mashharuki
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mashharuki/CareTech-Catalyst-Hackathon/tree/main/.trae/skills/frontend-design
Command: npx skills add https://github.com/mashharuki/CareTech-Catalyst-Hackathon --skill frontend-design-mashharuki

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, relying on overused fonts, predictable layouts, and clichéd color schemes. This Skill guides the creation of frontend interfaces with a clear, intentional aesthetic direction so the output feels purposefully designed rather than templated. ## Core Features & Use Cases - Aesthetic Direction Setting: Establishes a bold design concept (minimalist, brutalist, editorial, retro-futuristic, etc.) before writing any code. - Design Guidelines: Provides concrete guidance on typography pairing, color themes via CSS variables, motion and micro-interactions, spatial composition, and background textures. - Working Code Output: Produces functional HTML/CSS/JS, React, or Vue implementations matching the chosen visual vision. - Use Case: Ask for a landing page for a healthcare consent portal, and receive a polished, distinctive interface with a coherent font pairing, accent color system, and choreographed page-load animations instead of a default-looking template. ## Quick Start Build a landing page for my hackathon project with a bold editorial aesthetic, distinctive typography, and scroll-triggered animations.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I make AI-generated web designs look less generic?▼

Commit to a clear aesthetic direction before coding, such as brutalist, editorial, or minimalist. Choose distinctive display fonts instead of Inter or Roboto, use a dominant color with sharp accents via CSS variables, and add intentional motion like staggered page-load animations.

What frameworks does this frontend design skill support?▼

It supports plain HTML/CSS/JS as well as React and Vue. For React projects it recommends Motion libraries for animation, while plain HTML implementations favor CSS-only solutions for effects and micro-interactions.

How to choose fonts for a distinctive website design?▼

Pair a characterful display font with a refined body font, avoiding overused families like Inter, Roboto, Arial, and system fonts. Unexpected, personality-driven font choices are a primary lever for making an interface memorable.

Can this skill build both minimalist and maximalist designs?▼

Yes, it supports the full spectrum from restrained minimalism to elaborate maximalism. The key requirement is intentionality: minimalist designs demand precision in spacing and typography, while maximalist designs need elaborate animation and effect code.

What design patterns should be avoided in AI-generated interfaces?▼

Avoid clichéd font families, purple gradients on white backgrounds, predictable layouts, and cookie-cutter component patterns. Also avoid converging on the same choices across generations, such as repeatedly defaulting to Space Grotesk.

Related Skills

Explore More Design & Creative Skills→
mklozmkloz

impeccable

Create production-grade frontend interfaces from design context and constraints.

Community
Advanced
aditriokaaditrioka

verify-loop

Execute end-to-end tests on the nearyou-id app across Android and iOS.

Community
Advanced
zm2231zm2231

prototype-review

Review prototypes, wireframes, and mockups for usability, accessibility, and design consistency.

Community
Advanced
evolving-machines-labevolving-machines-lab
76

shadcn-webapp-design

Standardizes creation of web interfaces using shadcn/ui, Tailwind CSS and Framer Motion for Next.js apps and dashboards.

Official
Advanced