skills.rest
wesbragagt
wesbragagtCOMMUNITY
Explore all skills by this author →
Website𝕏@wesbragagtGitHub

frontend-design

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

1|Updated May 4, 2026
Search Tags:#typography#ui#frontend#react#css#web design#animation
One-click install
npx skills add https://github.com/wesbragagt/nixos-config --skill frontend-design-wesbragagt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/wesbragagt/nixos-config/tree/main/home/skills/frontend-design
Command: npx skills add https://github.com/wesbragagt/nixos-config --skill frontend-design-wesbragagt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated frontend code often looks generic, using overused fonts, cliched color schemes, and predictable layouts. This Skill guides the creation of web components, pages, and applications with a committed aesthetic direction so the output feels intentionally designed rather than templated. ## Core Features & Use Cases - Aesthetic Direction First: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, minimal, maximalist) 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 layout that breaks the grid intentionally. ## Quick Start Ask the AI to build a landing page, dashboard, or component for your product 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 make AI-generated frontend designs look less generic?▼

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 avoid defaults like Inter, Roboto, and purple gradients on white.

How to add animations to a frontend page?▼

Prioritize CSS-only animations for plain HTML, and use the Motion library for React projects. Focus on high-impact moments like one orchestrated page load with staggered reveals using animation-delay, plus scroll-triggered and hover states.

What fonts should I use instead of Inter or Roboto?▼

Choose characterful, unexpected fonts that match the design's tone, pairing a distinctive display font with a refined body font. Vary choices across projects rather than converging on popular picks like Space Grotesk.

Does this approach work with React and Vue components?▼

Yes, the design guidance applies to HTML/CSS/JS, React, Vue, and other frameworks. Implementation complexity is matched to the aesthetic vision, with elaborate effects for maximalist designs and restrained precision for minimalist ones.

When should I use a minimalist versus maximalist design?▼

Both work when executed with intentionality. Maximalist designs need elaborate code with extensive animations and effects, while minimalist designs need restraint, precise spacing, refined 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
abdul7867abdul7867

design-vocabulary

Reviews and refines frontend UI designs using typography, color, layout, and motion guidelines.

Community
Intermediate
shinnytechshinnytech

using-shadcn-ui

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

Official
Intermediate