skills.rest
HadiCherkaoui
HadiCherkaouiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Translate design briefs into ready-to-run HTML/CSS/JS or framework components.

Updated Apr 16, 2026
Search Tags:#design#ui#frontend#react#css#component
One-click install
npx skills add https://github.com/HadiCherkaoui/opencode-config --skill frontend-design-hadicherkaoui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/HadiCherkaoui/opencode-config/tree/main/skills/frontend-design
Command: npx skills add https://github.com/HadiCherkaoui/opencode-config --skill frontend-design-hadicherkaoui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides the creation of distinctive, production-grade frontend interfaces with strong aesthetic direction. It helps designers and developers deliver polished UI code that avoids generic AI aesthetics.

Core Features & Use Cases

  • Creative direction: Establish a bold conceptual aesthetic for web interfaces (typography, color, motion, layout) and translate it into production-ready UI code.
  • Implementation fidelity: Produce HTML/CSS/JS, or framework components (React/Vue) that are responsive, accessible, and performant, aligned with the chosen design direction.
  • Use Case: Build a landing page with a unique visual language, a dashboard with refined components, or a set of reusable UI blocks that enforce a cohesive design system.

Quick Start

Use this skill to translate a design brief into ready-to-run frontend code that matches a defined aesthetic direction.

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-grade React components that avoid generic AI aesthetics?▼

To build production-grade React components with a distinctive aesthetic, you must establish a bold conceptual design direction for typography, color, and motion, then translate that creative brief directly into responsive, accessible UI code.

What is the best way to turn a UI design brief into ready-to-run HTML, CSS, and JS?▼

The best way to turn a UI design brief into ready-to-run HTML, CSS, and JS is to apply a clear aesthetic direction early, ensuring the generated frontend interfaces meet accessibility and performance standards without requiring manual polish.

Can I use this approach to generate an entire dashboard with a cohesive design system?▼

Yes, you can generate an entire dashboard with a cohesive design system by producing a set of refined, reusable UI blocks that enforce consistent visual language across all pages and components.

Does this frontend design process support framework components like Vue alongside raw HTML?▼

Yes, this frontend design process supports generating framework components like Vue and React alongside raw HTML, CSS, and JS, allowing you to deliver polished UI code matched to your specific technology stack.

How do I ensure my generated frontend interfaces meet accessibility and performance standards?▼

You ensure generated frontend interfaces meet accessibility and performance standards by enforcing strict coding constraints during the translation from creative design direction to production-ready UI code.

Related Skills

Explore More Design & Creative Skills→
BorisserzBorisserz
1

frontend-design

Develop distinctive visual design directions for modern UI projects.

Community
Advanced
fanthusfanthus

frontend-design

Generate frontend interfaces with design guidance and HTML/CSS/JS or React code.

Community
Intermediate
pohlai88pohlai88

Frontend Builder

Architect React and Next.js frontend architectures with component organization and state management.

Community
Advanced
HammadNadeem21HammadNadeem21

frontend-skill

Scaffold reusable React components and layouts for frontend UI development.

Community
Intermediate