feature

Name: feature
Availability: InStock
Author: Agility CMS

Convert design references into React components and Agility CMS models.

1|Updated Jul 5, 2024

Search Tags:#automation #react #component-registry #design-reference #design-to-component #agilitycms

Ready to run

npx skills add https://github.com/agility/agility-website-next.js --skill feature-agility

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: feature
Source: https://github.com/agility/agility-website-next.js/tree/main/.claude/skills/feature
Command: npx skills add https://github.com/agility/agility-website-next.js --skill feature-agility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Convert design references (Replit, Lovable, Figma screenshots, or any URL/image) into production-ready React components and integrated Agility CMS models, reducing handoff delays and rework.

Core Features & Use Cases

Analyze a design reference to identify UI sections (hero, features, cards, etc.) and determine required components and CMS content.
Implement React components, create Agility CMS component models, and register everything so pages can be built or updated automatically.
Wire the implemented components into a page or page template, creating/updating the page as needed.

Quick Start

Provide a design reference (URL or screenshot) and I will implement the UI components, configure CMS models, and wire up the page.

Frequently Asked Questions about feature

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

FAQPage Schema

How do I convert Figma screenshots into React components?▼

To convert Figma screenshots into React components, provide the design reference image or URL. The system analyzes the UI sections, implements production-ready React components, and registers them automatically.

Can I automatically generate Agility CMS models from a design reference?▼

Yes, you can generate Agility CMS models from a design reference. The system identifies required content fields and automatically creates the corresponding CMS component models for page building.

What is the best way to wire React components into an Agility CMS page?▼

The best way to wire React components into an Agility CMS page is by using an automation tool that registers the components and configures the page template automatically based on a provided design reference.

Does this design-to-component automation work with existing page updates?▼

Yes, this design-to-component automation works with existing page updates. It analyzes new design references to update current React components and modify existing Agility CMS page configurations as needed.

How do I turn a Replit or Lovable UI design into production code?▼

To turn a Replit or Lovable UI design into production code, input the application URL. The system identifies UI sections, builds the React components, and integrates the required Agility CMS models.

What design reference formats are supported for generating React components?▼

Supported design reference formats include URLs and screenshots from Replit, Lovable, Figma, or any image. The system analyzes these references to build production-ready React components and CMS configurations.