skills.rest
deriye
deriyeCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

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

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 with a committed aesthetic direction instead of generic AI-looking output. ## Core Features & Use Cases - Aesthetic Direction: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, minimal, maximalist) before writing any code. - Design Execution: Applies distinctive typography pairing, cohesive CSS-variable color themes, orchestrated animations, asymmetric layouts, and textured backgrounds. - Framework Flexibility: Produces working HTML/CSS/JS, React, or Vue code, deferring folder structure and module boundaries to the coding-best-practices skill. - Use Case: Ask for a landing page for a coffee brand and receive a complete, polished page with a unique editorial aesthetic, staggered load animations, and custom font pairings rather than a generic template. ## Quick Start Build a landing page for a specialty coffee brand 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 create a non-generic landing page design?▼

Commit to a specific aesthetic direction such as brutalist, editorial, or retro-futuristic before coding, then execute it with distinctive font pairings, a dominant color palette with sharp accents, and asymmetric layouts. Avoid default fonts like Inter and cliched purple gradients.

What fonts should I avoid in frontend design?▼

Avoid overused generic fonts like Inter, Roboto, Arial, and system defaults, as well as commonly converged choices like Space Grotesk. Instead pair a distinctive display font with a refined body font chosen for the specific context.

Does this skill work with React and Vue?▼

Yes, it produces working code in HTML/CSS/JS, React, Vue, and other frameworks. For React animations it prefers the Motion library, while pure HTML implementations favor CSS-only animation solutions.

How should animations be used in web page design?▼

Prioritize one well-orchestrated page load with staggered reveals using animation-delay over scattered micro-interactions. Add scroll-triggered effects and surprising hover states, using CSS-only solutions for HTML and the Motion library for React.

Where do folder structure and code conventions come from?▼

Folder layout, hooks, and module boundaries come from the separate coding-best-practices skill, not this one. If the target stack is missing there, best practices are researched and added to that skill before implementation.

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
hyperjumptechhyperjumptech
1

organized-src-structure

Organize monorepo packages and apps with conventional folder naming and imports.

Official
Intermediate
ZoyaAfzalZoyaAfzal

shadcn

Compose accessible React UI components with Tailwind CSS and shadcn.

Community
Intermediate