skills.rest
SocialGouv
SocialGouvOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-design

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

16|1|Updated Mar 20, 2026
Search Tags:#typography#ui#React#landing page#frontend#web design#CSS animation
One-click install
npx skills add https://github.com/SocialGouv/iterion --skill frontend-design-socialgouv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/SocialGouv/iterion/tree/main/vendor/github.com/SocialGouv/claw-code-go/internal/tools/bundled_skills/frontend-design/skills/frontend-design
Command: npx skills add https://github.com/SocialGouv/iterion --skill frontend-design-socialgouv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated frontend code often looks generic, using overused fonts, cliched purple gradients, 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 tone (brutalist, editorial, retro-futuristic, luxury, etc.) before writing any code. - Design Guidelines: Covers typography pairing, cohesive color themes via CSS variables, CSS-only animations and scroll-triggered reveals, asymmetric spatial composition, and atmospheric backgrounds like gradient meshes and grain overlays. - Anti-Generic Rules: Explicitly avoids overused font families (Inter, Roboto, Arial), cliched color schemes, and cookie-cutter 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 instead of a default-looking template. ## Quick Start Ask the AI to build a landing page, dashboard, or web component for your product and specify the mood or audience you want it 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 code look less generic?▼

Commit to a clear aesthetic direction before coding, then execute it with distinctive font pairings, dominant colors with sharp accents, and intentional layouts. Avoid default choices like Inter, purple gradients on white, and predictable component patterns.

What frameworks does this frontend design skill support?▼

It works with plain HTML/CSS/JS as well as React and Vue. For React projects it recommends the Motion library for animations, while plain HTML implementations should prioritize CSS-only animation solutions.

How to add animations to a web page without heavy JavaScript?▼

Prioritize CSS-only solutions such as animation-delay for staggered page-load reveals, scroll-triggered effects, and hover states. One well-orchestrated load sequence creates more impact than many scattered micro-interactions.

Which fonts should I avoid in web design?▼

Avoid overused families like Inter, Roboto, Arial, and generic system fonts, which signal templated design. Instead pair a distinctive display font with a refined body font chosen for the specific context and audience.

When should I use a minimalist versus maximalist design approach?▼

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

Related Skills

Explore More Design & Creative Skills→
mikaelcharbonneaumikaelcharbonneau

target-audience

Define brand target audiences with personas, psychographics, and ICP frameworks.

Community
Intermediate
igoor-noprofitigoor-noprofit
8

always-test-frontend-changes

Test Vue frontend changes in a browser before confirming they work.

Official
Basic
l0lxl0lwl0lxl0lw

audit

Audits interface quality across accessibility, performance, theming, and responsive design with severity-rated reports.

Community
Intermediate
evolving-machines-labevolving-machines-lab
76

shadcn-webapp-design

Standardizes creation of web interfaces using shadcn/ui, Tailwind CSS and Framer Motion for Next.js apps and dashboards.

Official
Advanced