skills.rest
olivier-motium
olivier-motiumCOMMUNITY
Explore all skills by this author →
Website𝕏@OlivierDDRGitHub

frontend-design

Generate production-ready HTML/CSS/JS frontend interfaces with accessible design systems.

Updated Aug 27, 2026
Search Tags:#design#web development#frontend#CSS#UI components#aesthetics
One-click install
npx skills add https://github.com/olivier-motium/mimesis --skill frontend-design-olivier-motium
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/olivier-motium/mimesis/tree/main/docs/claude-code/config/skills/frontend-design
Command: npx skills add https://github.com/olivier-motium/mimesis --skill frontend-design-olivier-motium

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams craft distinctive, production-grade frontend interfaces, addressing the challenge of delivering visually compelling web experiences that align with brand and usability standards.

Core Features & Use Cases

  • Design Direction: Establish a bold, purposeful aesthetic direction tailored to the project.
  • Component & Page Production: Generate ready-to-run HTML/CSS/JS for components, pages, or entire apps with accessible defaults.
  • Design System & Reuse: Propose a cohesive design system with reusable tokens, typography, and UI primitives.
  • Use Case: Create a production-grade landing page for a fintech product with a unique visual identity and accessible interactions.

Quick Start

Provide a complete frontend design for a given brief: a landing page hero section with navigation, color system, typography, and responsive layout.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build production-ready frontend interfaces with accessible HTML and CSS?▼

Production-ready frontend interfaces require accessible HTML, CSS, and JS with coherent design systems. This skill generates ready-to-run web components, pages, and applications featuring accessible typography, color systems, and reusable UI primitives that integrate directly into existing projects.

What's the best way to establish a bold aesthetic direction for a web component design system?▼

Establishing a bold aesthetic direction involves defining reusable design tokens, typography, and UI primitives. This skill proposes a cohesive design system with accessible defaults and a purposeful visual identity tailored to your specific project brief and brand standards.

Can I generate a responsive landing page hero section with navigation and a complete color system?▼

Yes, you can generate a responsive landing page hero section with navigation, color system, and typography. Provide a brief for your frontend design, and the skill produces production-ready HTML, CSS, and JS with accessible interactions and a coherent visual identity.

Does this frontend design approach work for building dashboards and product interfaces?▼

This frontend design approach works for building dashboards and product interfaces. It applies to web components, pages, or full applications across marketing sites and product interfaces, delivering visually compelling web experiences with accessible defaults.

How do I create a coherent design system with reusable UI tokens for an existing project?▼

Creating a coherent design system involves proposing reusable tokens, typography, and UI primitives. This skill outputs a cohesive design system with accessible defaults that can be integrated into existing projects, ensuring distinctive and production-grade frontend interfaces.

Related Skills

Explore More Design & Creative Skills→
kazdenckazdenc
42

design-brief

Explore codebases and ask user-centric questions to synthesize design context.

Community
Intermediate
StephanvsStephanvs
6

frontend-design

Generate production-grade frontend interfaces with HTML/CSS/JS and frameworks.

Community
Advanced
1uc4sm4theus1uc4sm4theus
20

repl_setup

Configure web development servers for the Replit proxy environment.

Community
Intermediate
lengo0951lengo0951

ui-styling

Style React user interfaces with shadcn/ui and Tailwind CSS.

Community
Advanced