skills.rest
RafayelGardishyan
RafayelGardishyanCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design production-grade frontend interfaces with HTML, CSS, and JavaScript.

Updated Mar 9, 2026
Search Tags:#typography#aesthetic#ui-design#motion#frontend-design#responsive-layout
One-click install
npx skills add https://github.com/RafayelGardishyan/rafayels-marketplace --skill frontend-design-rafayelgardishyan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/RafayelGardishyan/rafayels-marketplace/tree/main/plugins/rafayels-engineering/.opencode/skills/frontend-design
Command: npx skills add https://github.com/RafayelGardishyan/rafayels-marketplace --skill frontend-design-rafayelgardishyan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are hard to achieve with generic tooling; this skill guides crafting visually compelling UIs with an intentional aesthetic direction and polished code.

Core Features & Use Cases

  • Aesthetic direction & concepting: Before coding, select a bold aesthetic direction and align with constraints (framework, accessibility, performance).
  • Production-grade implementation: Build working HTML/CSS/JS or framework-based components with high polish and cohesive visuals.
  • Accessibility & performance: Ensure responsive layouts, keyboard navigation, contrast, and performance optimizations.

Quick Start

Define a bold aesthetic direction and implement a production-grade component or page that demonstrates typography, color, motion, and layout.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design frontend interfaces with a cohesive aesthetic direction?▼

Production-grade frontend design establishes distinctive UIs by applying intentional typography, cohesive color systems, motion, responsive layouts, and accessibility optimizations directly within working HTML/CSS/JS or framework-based components.

How do I build production-grade web components that meet accessibility standards?▼

Build production-grade web components by ensuring responsive layouts, keyboard navigation, and proper contrast. Accessibility is integrated during implementation alongside typography and color systems rather than added later.

Can I use this approach to build full web applications or just individual pages?▼

Yes, this approach applies to building full web applications as well as individual web components and pages. It scales to satisfy requirements for real working code, cohesive visuals, and performance optimizations across the entire project.

What's the best way to establish a bold aesthetic direction before coding a UI?▼

The best way to establish a bold aesthetic direction is to concept and align visual goals with technical constraints first. Define typography, color systems, and motion patterns before implementing the production-grade component or page.

Do I need a specific framework to implement polished typography and motion?▼

No specific framework is required. You can build working components using standard HTML/CSS/JS or choose a framework-based implementation, as long as the final output maintains high polish, cohesive visuals, and performance considerations.

Related Skills

Explore More Design & Creative Skills→
yu13130122297yu13130122297

scout

Identify uncertainties in research framing, datasets, metrics, and baselines.

Community
Intermediate
Phife726Phife726

frontend-design

Design and implement production-grade frontend interfaces with accessible, responsive HTML/CSS/JS or framework-based code.

Community
Advanced
dylantarredylantarre
38

motion-scale

Generate duration, easing, and delay tokens for UI motion systems.

Community
Advanced
bonnguyenitcbonnguyenitc
19

frontend-design

Create distinctive frontend interfaces with design tokens and responsive layouts.

Community
Advanced