skills.rest
oferhalevi
oferhaleviCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Create production-grade frontend interfaces with HTML/CSS/JS, React, or Vue.

1|Updated Dec 11, 2025
Search Tags:#creative coding#React#frontend#UI/UX#design system#web design#HTML/CSS/JS
One-click install
npx skills add https://github.com/oferhalevi/codex-skills-integration --skill frontend-design-oferhalevi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/oferhalevi/codex-skills-integration/tree/main/skills/frontend-design
Command: npx skills add https://github.com/oferhalevi/codex-skills-integration --skill frontend-design-oferhalevi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generic AI outputs often lack creativity and distinctiveness, leading to bland, uninspired user interfaces. This Skill ensures your frontend designs are unique, production-grade, and visually striking, saving you from "AI slop."

Core Features & Use Cases

  • Distinctive Aesthetics: Generates creative, polished code with a clear aesthetic point-of-view, avoiding common AI-generated patterns.
  • Production-Grade Code: Delivers functional HTML/CSS/JS, React, or Vue components ready for deployment, built with meticulous attention to detail.
  • Meticulous Design: Focuses on advanced typography, cohesive color themes, impactful motion, and unique spatial composition for unforgettable user experiences.
  • Use Case: Ask for a landing page for a luxury brand, and receive code that embodies elegance with custom fonts, subtle animations, and a refined color palette, rather than a standard template.

Quick Start

Design a bold, brutalist landing page for a new tech startup, focusing on strong typography and a monochromatic color scheme.

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 React component with custom styling that doesn't look generic?▼

Build React components with a deliberate aesthetic using CSS variables for theming, custom typography systems, and cohesive color palettes. This Skill generates distinctive, production-grade React code that avoids common AI patterns through meticulous design choices in spacing, motion, and visual hierarchy.

Can I build accessible, responsive HTML/CSS layouts without compromising on design quality?▼

Yes. This Skill automates creation of responsive HTML/CSS layouts with strong accessibility built in, including semantic markup, proper contrast, and keyboard navigation. It delivers polished aesthetics alongside performance and accessibility requirements.

What's the best way to design a landing page with typography and color systems that feel premium?▼

Design with intentional typography hierarchies, CSS variable-based color systems, and refined spatial composition. This Skill generates landing pages for luxury or high-end brands with custom fonts, subtle animations, and cohesive palettes that feel distinctive rather than templated.

How do I add motion and micro-interactions to web interfaces in React or Vue?▼

Incorporate motion through CSS animations and framework-native transitions within component code. This Skill builds micro-interactions and animated elements into React or Vue components as part of production-ready implementations that enhance user experience.

Does this work with existing design systems and CSS variable theming?▼

Yes. This Skill generates components and layouts that support CSS variable theming and integrate with design systems. It builds HTML/CSS/JS, React, and Vue code compatible with frameworks and existing theme architectures.

Why do AI-generated frontends often look bland, and how does this avoid that?▼

Generic AI outputs lack visual distinctiveness and fall into recognizable patterns. This Skill ensures creative, production-grade code with a clear aesthetic point-of-view through meticulous attention to typography, color theory, spatial composition, and motion design.

Related Skills

Explore More Design & Creative Skills→
aaronjoeldevaaronjoeldev
55

frontend-design

Create production-grade frontend components with distinctive typography, color, motion, and accessibility.

Community
Advanced
remiconnessonremiconnesson

tailwind

Enforce Tailwind CSS v4 migration-safe utilities, build settings, and design-token patterns.

Community
Advanced
vuminhieuvuminhieu

frontend-design

Design production-grade frontend interfaces with cohesive typography, color, motion, and design tokens.

Community
Advanced
FerranGuardiaFerranGuardia

frontend-design

Design production-grade frontend interfaces with React or vanilla HTML/CSS.

Community
Advanced