skills.rest
bobbo01
bobbo01COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building web interfaces often results in generic, cookie-cutter designs with overused fonts, cliched color schemes, and predictable layouts. This Skill guides the creation of distinctive, production-grade frontend code that commits to a clear aesthetic direction instead of defaulting to generic AI-generated looks. ## Core Features & Use Cases - Aesthetic Direction Planning: Commits to a bold conceptual direction (minimalist, brutalist, editorial, retro-futuristic, etc.) before writing any code, based on purpose, audience, and constraints. - Design System Guidance: Provides concrete rules for typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Anti-Generic Safeguards: Explicitly avoids overused fonts (Inter, Roboto, Arial), cliched purple-gradient palettes, and predictable component patterns. - Use Case: A developer asks for a landing page for a coffee brand. The Skill produces a complete HTML/CSS page with a warm editorial aesthetic, staggered load animations, distinctive display typography, and textured backgrounds rather than a generic template look. ## Quick Start Ask the assistant to build a landing page, dashboard, or React component for your product and request a distinctive visual style 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 create a landing page with a unique design?▼

Define the purpose, audience, and constraints first, then commit to one bold aesthetic direction such as brutalist, editorial, or retro-futuristic. Implement it with distinctive font pairings, CSS variable color themes, and staggered load animations rather than default templates.

What fonts should I avoid in web UI design?▼

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

Does this approach work with React components?▼

Yes, the same design principles apply to React, Vue, or plain HTML/CSS output. For React, the Motion library is recommended for animations, while CSS-only solutions are preferred for plain HTML pages.

How do I add animations to a web page without hurting performance?▼

Prioritize CSS-only animations and focus on high-impact moments like one orchestrated page load with staggered reveals using animation-delay. Scroll-triggered effects and hover states add surprise without heavy JavaScript overhead.

When should I choose minimalism over maximalism in UI design?▼

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

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
L3-iGrantL3-iGrant
1

igrantio-verifier-frontend

Builds a React verifier UI for OpenID4VP and DCQL credential presentation against iGrant.io OWS.

Official
Advanced
whawkinsivwhawkinsiv
232

design-review

Audit existing user interfaces for visual design problems and prioritize fixes.

Community
Intermediate
shinnytechshinnytech

using-shadcn-ui

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

Official
Intermediate