skills.rest
Ascenseurs-Menetrey-SA
Ascenseurs-Menetrey-SAOFFICIAL
Explore all skills by this author →
GitHub

frontend-design

Translate user requirements into cohesive frontend interfaces with working HTML, CSS, and React code.

Updated Aug 23, 2026
Search Tags:#typography#frontend#react#ui design#web components#motion#aesthetic direction
One-click install
npx skills add https://github.com/Ascenseurs-Menetrey-SA/amsa-claude-skills --skill frontend-design-ascenseurs-menetrey-sa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Ascenseurs-Menetrey-SA/amsa-claude-skills/tree/main/frontend-design
Command: npx skills add https://github.com/Ascenseurs-Menetrey-SA/amsa-claude-skills --skill frontend-design-ascenseurs-menetrey-sa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of generic, forgettable, or aesthetically weak frontend UI by enforcing a deliberate design direction and producing cohesive, polished, working interfaces instead of “AI slop.”

Core Features & Use Cases

  • Aesthetic direction first: Forces a bold, explicit visual concept (tone, constraints, differentiation) before implementation.
  • Production-grade implementation: Generates functional UI code (HTML/CSS/JS or framework components) with refined typography, color, spacing, and micro-interactions.
  • Anti-generic guardrails: Avoids overused palettes and default font/layout patterns by requiring intentional, context-specific design choices.
  • Use Case: Turn product requirements into a landing page, dashboard, React component, or full UI layout with distinctive visual identity and cohesive motion.

Quick Start

Use the frontend-design skill to build a distinctive, production-grade dashboard for a logistics app with a dark editorial look, high legibility typography, and polished hover and load animations.

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 React UI that avoids generic AI-generated design aesthetics?▼

To build a React UI that avoids generic aesthetics, commit to a deliberate visual concept with refined typography, color, spacing, and motion before generating functional code. This enforces context-specific design choices over default layout patterns.

What is the best way to create production-grade web components with cohesive visual identity?▼

Creating production-grade web components requires translating requirements into an explicit aesthetic direction first, then generating polished HTML, CSS, or framework code with intentional micro-interactions and high legibility.

Can I use this approach to design a full dashboard layout with custom motion and typography?▼

Yes, you can design dashboard layouts by applying a bold visual concept that specifies tone, constraints, and differentiation, then implementing refined typography and polished load or hover animations.

Does this frontend design method work for landing pages and HTML layouts?▼

This frontend design method works for landing pages and HTML layouts by requiring a clear aesthetic direction upfront and producing cohesive, working interfaces instead of overused palettes or default fonts.

Why does my generated UI look forgettable and lack distinctive visual design?▼

Generated UI looks forgettable when it lacks a deliberate aesthetic direction. Solving this requires enforcing anti-generic guardrails that mandate intentional, context-specific design choices before writing any functional code.

Related Skills

Explore More Design & Creative Skills→
AdamAugustinskyAdamAugustinsky
1

frontend-design

Generate accessible, responsive frontend interfaces with HTML/CSS/JS or React or Vue.

Community
Advanced
RUSHYOPRUSHYOP

frontend-design

Generate production-grade frontend interfaces with design constraints and UX guidelines.

Community
Advanced
Odiabackend099Odiabackend099

ui-ux-designer

Apply glassmorphism, dark mode, and micro-interaction standards to frontend components.

Community
Advanced
bonnguyenitcbonnguyenitc
19

frontend-design

Create distinctive frontend interfaces with design tokens and responsive layouts.

Community
Advanced