skills.rest
jenreh
jenrehCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

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

Updated Jun 13, 2026
Search Tags:#typography#landing page#frontend#css#web design#ui design#reflex.dev
One-click install
npx skills add https://github.com/jenreh/project-kit-template --skill frontend-design-jenreh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jenreh/project-kit-template/tree/main/.agents/agent-skills/skills/frontend-design
Command: npx skills add https://github.com/jenreh/project-kit-template --skill frontend-design-jenreh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, using overused fonts, cliched purple gradients, and predictable layouts. This Skill guides the creation of distinctive, polished 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: Applies concrete rules for typography pairing, CSS variable theming, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Multi-Framework Output: Produces working code in HTML/CSS/JS, reflex.dev, or appkit_mantine depending on project constraints. - Use Case: Ask for a landing page for a coffee brand and receive a complete page with a distinctive display font, cohesive color palette, staggered load animations, and a memorable layout rather than a generic template. ## Quick Start Use the frontend-design skill to build a landing page for my product with a bold editorial aesthetic.

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 web page that doesn't look like generic AI output?▼

Commit to a clear 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 avoid overused choices like Inter, Roboto, or purple gradients on white.

What frameworks does this frontend design skill support?▼

It produces working code in plain HTML/CSS/JS, reflex.dev, and appkit_mantine. For React-based work it recommends the Motion library for animations, while pure HTML output prioritizes CSS-only animation solutions.

Can I use this skill with reflex.dev components?▼

Yes, reflex.dev is explicitly supported as an implementation target alongside appkit_mantine and standard HTML/CSS. The same design guidelines for typography, color, motion, and layout apply regardless of framework.

What fonts and colors should I avoid in web UI design?▼

Avoid generic font families like Inter, Roboto, Arial, and system fonts, plus cliched schemes such as purple gradients on white backgrounds. Choose characterful font pairings and dominant colors with sharp accents instead.

When should I use maximalist versus minimalist design?▼

Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate animations and effects, while minimalist designs need restraint, precise spacing, and refined typography. Both work when executed with intentionality.

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
redpanda-dataredpanda-data
34

visual-review

Automate visual and accessibility reviews of frontend UI changes with Playwright.

Official
Advanced
ZoyaAfzalZoyaAfzal

shadcn

Compose accessible React UI components with Tailwind CSS and shadcn.

Community
Intermediate