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.