skills.rest
thomasmartinsen
thomasmartinsenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

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

1|Updated May 19, 2026
Search Tags:#typography#landing page#frontend#react#css#web design#ui design
One-click install
npx skills add https://github.com/thomasmartinsen/talks --skill frontend-design-thomasmartinsen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/thomasmartinsen/talks/tree/main/20260519%20-%20Agentic%20engineering/weather-app-demo/.github/skills/frontend-design
Command: npx skills add https://github.com/thomasmartinsen/talks --skill frontend-design-thomasmartinsen

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 designs. ## Core Features & Use Cases - Aesthetic Direction Planning: Commits to a bold design direction (brutalist, editorial, retro-futuristic, minimal, maximalist) before writing any code. - Design System Guidance: Provides concrete rules for typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, spatial composition, and textured backgrounds. - Working Code Output: Produces functional HTML/CSS/JS, React, or Vue implementations rather than static mockups. - Use Case: Ask for a landing page for a coffee brand, and receive a complete page with a distinctive display font, dramatic shadows, staggered load animations, and a layout that breaks the grid intentionally. ## Quick Start Build a landing page for a jazz festival 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 make AI-generated websites look less generic?▼

Commit to a specific aesthetic direction before coding, such as brutalist, editorial, or retro-futuristic. Use distinctive font pairings instead of Inter or Roboto, dominant colors with sharp accents, and layouts with asymmetry or overlap rather than predictable component patterns.

What fonts should I avoid in frontend design?▼

Avoid overused fonts like Inter, Roboto, Arial, and default system fonts, which signal generic AI-generated design. Instead pair a distinctive display font with a refined body font to give the interface character.

Does this skill work with React and Vue components?▼

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

How should animations be used in web UI design?▼

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-triggering 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
openclawopenclaw
9.4k

clawhub-production-release

Run and verify ClawHub production deploys and stable CLI npm releases.

Official
Intermediate
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate