skills.rest
remiconnesson
remiconnessonCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design distinctive frontend interfaces with cohesive typography, color, motion, and code.

Updated Apr 9, 2026
Search Tags:#ui#dashboards#react#html/css#landing pages#frontend design#motion
One-click install
npx skills add https://github.com/remiconnesson/insights-garden --skill frontend-design-remiconnesson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/remiconnesson/insights-garden/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/remiconnesson/insights-garden --skill frontend-design-remiconnesson

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you turn vague frontend requirements into polished, distinctive interfaces instead of generic-looking web pages and components. It is useful when a user needs a website, landing page, dashboard, or app UI that feels intentionally designed and ready to ship.

Core Features & Use Cases

  • Aesthetic Direction: Chooses a clear visual concept and executes it consistently across layout, typography, color, and motion.
  • Production-Grade UI Building: Generates working frontend code for pages, components, and application screens with attention to usability and implementation quality.
  • Design Differentiation: Avoids bland template-style results by using atmosphere, composition, and refined visual details.
  • Use Case: A founder asks for a marketing landing page for a new product, and the Skill creates a memorable, high-end interface rather than a standard starter layout.

Quick Start

Ask the Skill to design and build a distinctive frontend interface for your page or component, including the visual style, interactions, and production-ready code.

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 landing page UI that doesn't look like a generic template?▼

You can build React components with production-grade UI by applying cohesive typography, color systems, and motion. The frontend design process generates functional, ready-to-implement code for application screens and layouts with attention to usability and implementation quality.

What's the best way to design a dashboard interface with cohesive visual styling?▼

Frontend design can refresh existing user interfaces by applying a clear visual concept consistently across layout, typography, color, and motion. It upgrades bland template-style pages into distinctive, production-grade interfaces with refined visual details.

How do I build React components with production-grade UI and visual polish?▼

You can build React components with production-grade UI by applying cohesive typography, color systems, and motion. The frontend design process generates functional, ready-to-implement code for application screens and layouts with attention to usability and implementation quality.

Can I use this to refresh an existing web page UI with better visual styling?▼

Frontend design can refresh existing user interfaces by applying a clear visual concept consistently across layout, typography, color, and motion. It upgrades bland template-style pages into distinctive, production-grade interfaces with refined visual details.

Does frontend design require separate tools for HTML and CSS layout generation?▼

No, frontend design does not require separate tools for HTML and CSS layout generation. It directly produces working frontend code for pages, components, and application screens, integrating typography, color, and motion into the functional output.

Related Skills

Explore More Design & Creative Skills→
ViewWayViewWay

frontend-design

Defines visual identity and generates frontend code with specified typography, color, and motion constraints.

Community
Advanced
sumik5sumik5
2

designing-frontend

Design distinctive frontend interfaces with CSS variable theming and cross-framework compatibility.

Community
Intermediate
IFIR649IFIR649

visual-design-foundations

Build cohesive visual design systems with typography, color, spacing, and iconography tokens.

Community
Advanced
MRWillisTMRWillisT
7

frontend-design

Generate responsive frontend interfaces with intentional visual design and cohesive aesthetics.

Community
Advanced