skills.rest
zakariaf
zakariafCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-mushaf-page-view

Render immutable muṣḥaf pages with QPC glyph fonts and coordinate overlays.

Updated Jun 17, 2026
Search Tags:#immutable#overlay#muṣḥaf rendering#dedicated font#quran app
One-click install
npx skills add https://github.com/zakariaf/Hifz-Companion --skill ui-mushaf-page-view
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-mushaf-page-view
Source: https://github.com/zakariaf/Hifz-Companion/tree/main/.claude/skills/ui-mushaf-page-view
Command: npx skills add https://github.com/zakariaf/Hifz-Companion --skill ui-mushaf-page-view

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill builds an immutable muṣḥaf page renderer for the Hifz app, ensuring accurate presentation of Quran text with dedicated fonts and overlays.

Core Features & Use Cases

  • Immutable Rendering: Faithfully renders muṣḥaf pages without re-shaping text.
  • Dedicated Font: Utilizes per-page QPC glyph fonts for precise rendering.
  • Overlays: Applies coordinate rectangles for markers like weak-line, current-ayah, etc.
  • Use Case: Use this Skill when building a muṣḥaf reader, page navigation, or zoom/theme controls in the Hifz app.

Quick Start

To render a muṣḥaf page with a specific riwāyah, use the ui-mushaf-page-view skill with the pageNumber and riwayah parameters.

Frequently Asked Questions about ui-mushaf-page-view

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

FAQPage Schema
How do I render Quran pages without reshaping or altering the text?▼

Immutable muṣḥaf rendering displays Quran text exactly as authored without any text reshaping, refactoring, or visual styling. It uses dedicated QPC glyph fonts per page to guarantee text integrity and precise presentation.

How do I add visual markers like current ayah over a Quran page?▼

You can apply visual markers over a muṣḥaf page by using the overlay system to render coordinate rectangles. These overlays layer on top of the dedicated glyph layer to highlight elements like weak-line or current-ayah without modifying the text.

Do I need to manage font styling or text layout when building a Quran reader?▼

No, the rendering process requires no text reshaping, refactoring, or styling for visual purposes. It coordinates with domain-specific systems for layout and asset verification, utilizing dedicated per-page glyph fonts automatically.

Can I render specific pages for different riwāyah in a Quran app?▼

Yes, you can render specific pages by providing the pageNumber and riwayah parameters. This allows you to build muṣḥaf readers with page navigation and zoom controls tailored to specific recitation traditions.

What is the best way to ensure text integrity in a digital muṣḥaf application?▼

Using an immutable rendering approach with dedicated glyph fonts ensures text integrity by preventing any unauthorized text reshaping or visual refactoring. It coordinates with asset verification systems to maintain faithful presentation.

Are there limitations to styling Quran text with this immutable rendering approach?▼

Yes, this approach prohibits text reshaping, refactoring, or styling for visual purposes to maintain text integrity. Visual modifications must be achieved exclusively through coordinate rectangle overlays applied over the glyph layer.

Related Skills

Explore More Software Engineering Skills→
RoooyHeRoooyHe

makepad-font

Automate Makepad font configuration, Harfbuzz text shaping, and SDF rendering workflows.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-test-theme

Detect broken theme toggles and missing persistence on web pages.

Community
Intermediate
zakariafzakariaf

domain-mushaf-text-integrity

Verify Quran text integrity with SHA-256 checksums and fixed QUL layout.

Community
Advanced
SageV1SageV1
1

makepad-font

Load, shape, and render fonts with harfbuzz and GPU-based SDF in Makepad.

Community
Advanced