front-end-design

Apply the WOW front-end design system to HTML outputs with theming and typography.

Updated Mar 12, 2026
One-click install
npx skills add https://github.com/meytalp-dev/ort-training --skill front-end-design-meytalp-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: front-end-design
Source: https://github.com/meytalp-dev/ort-training/tree/main/.claude/skills/front-end-design
Command: npx skills add https://github.com/meytalp-dev/ort-training --skill front-end-design-meytalp-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a complete WOW front-end design system that elevates any HTML output (presentations, dashboards, landing pages, quizzes, infographics) and ensures every rendered page looks wow instead of generic AI slop.

Core Features & Use Cases

  • Step-by-step design workflow: establish context, ask targeted questions, and define typography, color, layout, and animation choices to guide HTML creation.
  • Theme, typography, and tokens: default ORT theme with design tokens, Meytal font pairings, and guidelines for colors, accessibility, and RTL support.
  • Pre-delivery and quality guidelines: checklist-based validation, responsive layouts, and production-ready patterns for real-world HTML.
  • On-demand resources: structured references, CSS system notes, and typography guides to accelerate implementation.

Quick Start

Start by applying the WOW front-end design to a new HTML page and follow the defined steps to set context, typography, and styles.

Frequently Asked Questions about front-end-design

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

FAQPage Schema
How do I apply a consistent design system to HTML outputs instead of generic styling?▼

To apply a consistent design system to HTML outputs, use a structured workflow that defines context, typography, color tokens, and layout guidelines. This ensures every rendered page maintains high-quality visuals and avoids generic AI styling.

Does this front-end design approach support Hebrew and RTL layouts?▼

Yes, this front-end design approach fully supports Hebrew and RTL layouts. It integrates specific accessibility considerations and design tokens designed to handle right-to-left text rendering correctly within your HTML outputs.

What is the best way to style HTML dashboards and landing pages for visual consistency?▼

The best way to style HTML dashboards and landing pages is to apply a comprehensive design system with predefined typography pairings, color tokens, and automated page-load animations. This enforces visual consistency across various output types.

How do I validate front-end typography and accessibility before delivering HTML pages?▼

You validate front-end typography and accessibility by using a pre-delivery checklist. This process verifies responsive layouts, checks accessibility guidelines, and ensures production-ready patterns are correctly applied to your HTML pages.

Can I use custom color tokens and theming for HTML presentations and infographics?▼

Yes, you can use custom color tokens and theming for HTML presentations and infographics. The system provides a default theme with structured design tokens, allowing you to maintain consistent visual styling across different output formats.

Why do my AI-generated HTML pages look generic, and how can I improve them?▼

AI-generated HTML pages look generic due to a lack of structured design rules. You can improve them by applying a complete front-end design system that enforces typography pairings, color tokens, and automated animations for high-quality visuals.