skills.rest
samline
samlineCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web interfaces built by AI often look generic, using overused fonts, cliched color schemes, and predictable layouts. This Skill guides the creation of distinctive, polished frontend code with a clear aesthetic direction instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction Planning: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, luxury, etc.) before writing any code. - Design Quality Guidelines: Applies 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 font families, purple-gradient cliches, and predictable component patterns. - Use Case: Ask for a landing page for a coffee brand, and receive a complete HTML/CSS/JS page with a distinctive display font, staggered load animations, and a cohesive warm palette rather than a default-looking template. ## Quick Start Ask the AI to build a landing page, dashboard, or React 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 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 cliched purple-gradient schemes.

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

Generic design comes from overused font families (Inter, Roboto, Arial), predictable layouts, evenly-distributed timid color palettes, and cookie-cutter component patterns lacking context-specific character.

Does this skill work with React and Vue components?▼

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

How should animations be used in web UI design?▼

Focus on high-impact moments like one well-orchestrated page load with staggered reveals using animation-delay, plus scroll-triggering and surprising hover states, rather than scattered micro-interactions.

When should I choose 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 and typography.

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
Pranil9699Pranil9699

mockup-sandbox

Automate UI mockup creation and live rendering on a Vite-based sandbox canvas.

Community
Intermediate