skills.rest
toobutta
toobuttaCOMMUNITY
Explore all skills by this author →
GitHub

property-ui

Build and extend Maptelli property UI frontend features with tabbed panels and analytics.

Updated Dec 14, 2025
Search Tags:#typescript#frontend#react#ui-components#ai-search#maptelli
One-click install
npx skills add https://github.com/toobutta/maptelli --skill property-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: property-ui
Source: https://github.com/toobutta/maptelli/tree/main/.claude/skills/property-ui
Command: npx skills add https://github.com/toobutta/maptelli --skill property-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a ready-to-extend frontend foundation for Maptelli's property UI, including a tabbed property panel, comparison view, saved searches integration, a settings hub, and an analytics dashboard, to accelerate feature delivery.

Core Features & Use Cases

  • Tabbed property panel with AI-driven tabs (RoofIQ, SolarFit, DrivewayPro, PermitScope, etc.)
  • Side-by-side property comparison with best/worst highlighting
  • Saved searches flow on the map, including alert history and unsubscribe options
  • Comprehensive Settings page: profile, email preferences, API keys, and notifications
  • Analytics dashboard scaffolding with live data endpoints and charts
  • AI search bar to translate natural language queries into UI filters

Quick Start

Scaffold the property UI module and wire the tabbed panel to backend property data.

Frequently Asked Questions about property-ui

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

FAQPage Schema
How do I build a tabbed property UI panel in React with AI-driven features?▼

Build a tabbed property UI panel in React by scaffolding the frontend module and wiring AI-driven tabs like RoofIQ and SolarFit directly to backend property data endpoints.

What is the best way to implement a side-by-side property comparison view in a TypeScript frontend?▼

Implement a side-by-side property comparison view in TypeScript by extending the property UI module to highlight best and worst property attributes dynamically from fetched data.

How do I translate natural language queries into UI filters for real estate search?▼

Translate natural language queries into UI filters by integrating an AI search bar into the property UI, allowing users to input conversational text that maps to map-based property filters.

Does the Maptelli property UI include scaffolding for an analytics dashboard?▼

The Maptelli property UI includes analytics dashboard scaffolding that connects to live data endpoints to render interactive charts and visualize property metrics.

Can I manage user settings, API keys, and email preferences within a React property application?▼

Manage user settings, API keys, and email preferences within a React property application by utilizing the comprehensive settings hub that handles profile configurations and notification alerts.

How do I add saved searches flow and alert history to a map-based property interface?▼

Add saved searches flow and alert history to a map-based property interface by extending the frontend module to support saving user queries, tracking alert history, and providing unsubscribe options.

Related Skills

Explore More Software Engineering Skills→
v1bh0rv1bh0r

nw-pbt-typescript

Automate property-based testing workflows for TypeScript/JavaScript projects with fast-check.

Community
Advanced
mmcmediammcmedia
2

ga4-analytics

Analyze GA4, Search Console, and Indexing API data into Markdown summaries.

Community
Advanced
esassocesassoc
6

migrate-map

Migrate Leaflet maps from legacy MVC views to Angular with neptune-map components.

Official
Intermediate
mcevoyinitmcevoyinit

css-border-beam-animated

Animate card borders with two CSS border-beam techniques.

Community
Intermediate