skills.rest
kausthubh-coder
kausthubh-coderCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generates production-grade frontend interfaces with distinctive typography, color, motion, and layout design.

1|Updated Feb 19, 2026
Search Tags:#typography#landing page#frontend#react#css#web design#ui design
One-click install
npx skills add https://github.com/kausthubh-coder/kriyan-web --skill frontend-design-kausthubh-coder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/kausthubh-coder/kriyan-web/tree/main/.cursor/skills/frontend-design
Command: npx skills add https://github.com/kausthubh-coder/kriyan-web --skill frontend-design-kausthubh-coder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, using overused fonts, cliched color schemes, and predictable layouts. This Skill guides the creation of distinctive, production-grade frontend code with a clear aesthetic point of view instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction: Commits to a bold design concept (brutalist, editorial, retro-futuristic, minimal, maximalist) before writing any code. - Design Guidelines: Covers typography pairing, CSS variable-based color themes, motion and micro-interactions, spatial composition, and textured backgrounds. - Working Code Output: Produces functional HTML/CSS/JS, React, or Vue implementations matched to the complexity of the design vision. - Use Case: Ask for a landing page for a coffee brand, and receive a polished page with a distinctive display font, cohesive palette, staggered load animations, and an asymmetric layout rather than a generic template. ## Quick Start Build a landing page for a specialty coffee brand with a bold editorial aesthetic using the frontend-design skill.

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, pair a distinctive display font with a refined body font, and use dominant colors with sharp accents. Avoid generic fonts like Inter and Arial, purple-gradient cliches, and predictable component layouts.

What makes a frontend design look generic or like AI slop?▼

Generic designs rely on overused fonts such as Inter, Roboto, and Arial, cliched purple gradients on white backgrounds, and cookie-cutter layouts. Distinctive work uses characterful typography, cohesive themes, asymmetry, and contextual textures.

Can I use this skill with React or only plain HTML/CSS?▼

The skill supports HTML/CSS/JS, React, Vue, and other frameworks. For React projects it recommends the Motion library for animations, while plain HTML should prioritize CSS-only animation solutions.

How should animations be used in frontend design?▼

Focus on high-impact moments such as one well-orchestrated page load with staggered reveals using animation-delay, plus scroll-triggered and hover states that surprise. Maximalist designs warrant elaborate effects while minimalist designs need restraint.

When should I choose minimalism versus maximalism for a web interface?▼

Both work when executed with intentionality. Maximalist designs need elaborate code with extensive animations and effects, while minimalist designs need precision in spacing, typography, and subtle details. Match implementation complexity to the aesthetic vision.

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
tonehqtonehq
11

generate-tests

Generate Playwright e2e specs from page component source and run them.

Official
Advanced
adamhjkadamhjk
2

pixijs-ticker

Manage per-frame logic and rendering timing in PixiJS applications.

Community
Intermediate
wubq511wubq511
6

shadcn-ui

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

Community
Intermediate