skills.rest
waki285
waki285COMMUNITY
Explore all skills by this author →
Website𝕏@suzuneu_discordGitHub

frontend-design

Generate distinctive frontend interfaces with cohesive typography, color, motion, and layout design.

3|Updated Jan 17, 2026
Search Tags:#typography#landing page#frontend#react#css#web design#ui design
One-click install
npx skills add https://github.com/waki285/dotfiles --skill frontend-design-waki285
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/waki285/dotfiles/tree/main/.skills/frontend-design
Command: npx skills add https://github.com/waki285/dotfiles --skill frontend-design-waki285

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, with overused fonts, cliched purple gradients, and predictable layouts. This Skill guides the creation of production-grade frontend code with a deliberate, distinctive aesthetic direction instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction First: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, minimal, maximalist, etc.) before writing any code. - Design System Guidance: Covers typography pairing, CSS variable-based color themes, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Framework Flexibility: Produces working HTML/CSS/JS, React, or Vue code matched to the project's technical constraints. - Use Case: Ask for a landing page for a coffee brand, and receive a complete page with a distinctive display font, cohesive palette, staggered load animations, and a memorable layout rather than a generic template. ## Quick Start Ask the AI to build a landing page, dashboard, or React component for your project and specify the mood or audience you want the design to target.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a landing page that doesn't look AI-generated?▼

Commit to a specific aesthetic direction before coding, such as brutalist, editorial, or retro-futuristic. Pair a distinctive display font with a refined body font, use dominant colors with sharp accents, and add staggered load animations instead of defaulting to generic layouts.

What fonts should I avoid in frontend design?▼

Avoid overused generic fonts like Inter, Roboto, Arial, and system defaults, which signal templated AI output. Choose characterful, unexpected typefaces and pair a distinctive display font with a refined body font for visual hierarchy.

Does this skill work with React and Vue components?▼

Yes, the skill produces working code in HTML/CSS/JS, React, or Vue depending on project constraints. For React, it recommends the Motion library for animations, while plain HTML projects should prioritize CSS-only animation solutions.

How do I add animations to a web page effectively?▼

Focus on high-impact moments rather than scattered micro-interactions. One well-orchestrated page load with staggered reveals using animation-delay creates more delight, supplemented by scroll-triggered effects and surprising hover states.

When should I use minimalism versus maximalism in web design?▼

Both work when executed with intentionality. Maximalist designs need elaborate code with extensive animations and effects, while minimalist designs need restraint, precision, and careful attention to spacing, typography, and subtle details.

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
Skyvern-AISkyvern-AI
22.7k

testing

Tests Skyvern deployments by validating API, frontend rendering, browser sessions, and workflows.

Official
Intermediate
ViindooViindoo
7

odoo-ui-review

Review Odoo user interfaces with Lighthouse audits and code analysis.

Official
Advanced
wubq511wubq511
6

shadcn-ui

Automate adding and customizing shadcn/ui components with React and Tailwind CSS.

Community
Intermediate