skills.rest
www-zaq-ai
www-zaq-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

replace

Identify inline UI markup in Elixir LiveViews and propose reusable component replacements.

66|9|Updated Feb 26, 2026
Search Tags:#Elixir#LiveView#UI component integration#Phoenix Framework#Code maintenance
One-click install
npx skills add https://github.com/www-zaq-ai/zaq --skill replace
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: replace
Source: https://github.com/www-zaq-ai/zaq/tree/main/.agents/skills/replace
Command: npx skills add https://github.com/www-zaq-ai/zaq --skill replace

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill addresses the issue of duplicate inline markup in LiveViews by identifying existing reusable components and guiding the replacement process.

Core Features & Use Cases

  • Component Replacement: Identifies inline UI regions that match reusable components.
  • Replacement Candidates: Provides replacement candidates for human approval.
  • Integration: Assists in wiring approved components into LiveViews and verifying with e2e or ExUnit tests.
  • Use Case: Use after component extraction to reduce redundancy and improve maintainability in your LiveView codebase.

Quick Start

Use the replace skill to identify and replace duplicate inline markup in the LiveView located at 'path/to/livewire/file.ex'.

Frequently Asked Questions about replace

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

FAQPage Schema
How do I replace inline UI markup with reusable components in Phoenix LiveViews?▼

To replace inline UI markup with reusable components in Phoenix LiveViews, the Skill compares inline markup against existing components to identify matching regions. It then generates replacement candidates for your explicit human approval before proceeding with the integration.

What problem does duplicate markup cause in Elixir LiveView front-end codebases?▼

Duplicate markup in Elixir LiveView front-end codebases causes severe maintainability issues and inconsistent design systems. Identifying existing reusable components and replacing inline duplicates ensures structural consistency and significantly reduces markup redundancy across your application.

Can I automate component replacement in LiveViews without manual review?▼

Automating component replacement in LiveViews requires user approval before any changes are applied. The Skill strictly provides replacement candidates for human review, ensuring you maintain control over how reusable components are wired into your existing front-end markup.

Does replacing inline components in Phoenix Framework require running tests?▼

Replacing inline components in Phoenix Framework involves verification through E2E or ExUnit tests. After you approve and wire the reusable components into your LiveViews, testing is utilized to verify that the integration maintains functional correctness and UI stability.

When should I use a component replacement workflow for LiveView code maintenance?▼

You should use a component replacement workflow for LiveView code maintenance after component extraction. It is primarily designed for front-end codebases using Elixir and Phoenix Framework, specifically targeting the reduction of markup redundancy and enforcing a consistent design system.

Related Skills

Explore More Software Engineering Skills→
SL-A-SHSL-A-SH

extract

Extract reusable UI components, design tokens, and interaction patterns from codebases.

Community
Intermediate
oimiragieooimiragieo
36

test-generator

Generate unit, integration, API, and E2E tests from specifications and components.

Community
Intermediate
wahidyankfwahidyankf
3

swe-programming-elixir

Enforce idiomatic Elixir, Phoenix, and LiveView coding standards for AI-generated code.

Community
Intermediate
hashicorphashicorp
78

find-duplicates

Detect duplicate and near-duplicate paragraphs across documentation directories.

Official
Intermediate