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

ui-page-card

Create and manage Flutter UI components for Quranic page cards in the Hifz Companion app.

Updated Jun 17, 2026
Search Tags:#app development#ui design#flutter#hifz companion#quranic page management
One-click install
npx skills add https://github.com/zakariaf/Hifz-Companion --skill ui-page-card
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-page-card
Source: https://github.com/zakariaf/Hifz-Companion/tree/main/.claude/skills/ui-page-card
Command: npx skills add https://github.com/zakariaf/Hifz-Companion --skill ui-page-card

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the process of creating and configuring the page cards within the Hifz Companion app, allowing users to efficiently manage and customize the display of Quranic page information.

Core Features & Use Cases

  • Page Card Creation: Build and customize the UI for individual pages in the Quran.
  • Component Management: Handle the track chips and decay indicators for tracking page progress.
  • Use Case: With this Skill, you can quickly generate a card for a specific Quranic page, which includes details like the page number, juz, and review status.

Quick Start

Use the ui-page-card skill to create a page card for page 253 in the Hifz Companion app.

Frequently Asked Questions about ui-page-card

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

FAQPage Schema
How do I create Flutter UI components for Quranic page management without manual coding?▼

You can build Quranic page cards in Flutter by applying this Skill to generate the UI components automatically. It utilizes associated design tokens to construct page cards, track chips, and decay indicators without manual coding.

What are decay indicators in Flutter app development for tracking page progress?▼

Decay indicators in Flutter app development are UI components used to visually track and display the review status of Quranic pages. This Skill manages these indicators along with track chips to handle page progress within the Hifz Companion app.

Can I use this Skill to generate a page card for a specific Quranic page in Flutter?▼

Yes, you can use this Skill to quickly generate a page card for a specific Quranic page in Flutter. The generated card includes details such as the page number, juz, and review status for the Hifz Companion app.

Does the ui-page-card Skill require specific design tokens to build Flutter app components?▼

Yes, the ui-page-card Skill requires Flutter and associated design tokens to build the UI components. These tokens are necessary to construct the page cards and related tracking elements without manual coding.

What is the best way to manage track chips and page cards in a Flutter Quranic app?▼

The best way to manage track chips and page cards in a Flutter Quranic app is to use this Skill to handle component creation. It streamlines the configuration of page information displays, including page numbers and review statuses, for the Hifz Companion app.

Related Skills

Explore More Design & Creative Skills→
tanaka-mambingetanaka-mambinge

flutter-setting-up-on-windows

Configure Windows for Flutter SDK installation, PATH, and IDE integration.

Community
Intermediate
dus2183-commitsdus2183-commits

flutter-skeleton-gen

Generates Flutter skeleton shimmer widgets from target page layout.

Community
Intermediate
algusaemalgusaem

react-ui-patterns

Codify loading, error, and empty state patterns for React components.

Community
Basic
adona9adona9

ui-builder

Generate Flutter UI components using AppColors, AppTypography, and AppSpacing tokens.

Community
Intermediate