skills.rest
ex3ndr
ex3ndrCOMMUNITY
Explore all skills by this author →
Website𝕏@ex3ndrGitHub

fragments-creator

Creates and updates UI fragments from JSON-render specifications with embedded Python.

14|2|Updated Jan 30, 2026
Search Tags:#frontend development#component creation#fragment#ui generation#declarative ui#json-render
One-click install
npx skills add https://github.com/ex3ndr/daycare --skill fragments-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fragments-creator
Source: https://github.com/ex3ndr/daycare/tree/main/packages/daycare/sources/skills/software-development/fragments-creator
Command: npx skills add https://github.com/ex3ndr/daycare --skill fragments-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation and updating of reusable UI components (fragments) using a declarative JSON specification and a widget catalog.

Core Features & Use Cases

  • UI Component Generation: Define complex UI elements like widgets, cards, panels, and modals using a structured JSON format.
  • Dynamic Logic Integration: Embed Python code within fragments for client-side logic, state management, and data querying.
  • Use Case: A user wants to create a customizable dashboard widget to display real-time stock prices. This Skill can generate the fragment's JSON spec, including data fetching logic and interactive elements.

Quick Start

Use the fragments-creator skill to build a new UI widget with the title "My Stock Ticker".

Frequently Asked Questions about fragments-creator

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

FAQPage Schema
How do I generate UI components from a JSON specification?▼

You can generate UI components from a JSON specification by defining widgets, cards, and panels declaratively. This Skill automates creating and updating these reusable UI fragments using a structured JSON format and a widget catalog.

Can I embed dynamic logic inside declarative UI fragments?▼

Yes, you can embed dynamic logic inside declarative UI fragments by integrating optional Python code. This enables client-side execution, state management, and data querying directly within the generated JSON specification.

Does this Skill support React Native flexbox for layout?▼

Yes, this Skill supports React Native flexbox for layout. It requires adherence to Material Design 3 color and typography standards to ensure your UI fragments maintain consistent visual guidelines.

How do I create a customizable dashboard widget with real-time data?▼

To create a customizable dashboard widget with real-time data, define the component using the structured JSON format. You can include embedded Python logic for data fetching and interactive elements to display dynamic information like stock prices.

What are the limitations of using JSON-render for UI generation?▼

Limitations of using JSON-render for UI generation include strict adherence to Material Design 3 standards and React Native flexbox layout constraints. Component creation is bound by the available widget catalog and the structured JSON specification format.

Related Skills

Explore More Software Engineering Skills→
sametozkalesametozkale

react

Convert JSON UI specifications into React component trees.

Community
Intermediate
netprtonynetprtony

mobile-frontend

Standardize React Native mobile frontend patterns with NativeWind styling.

Community
Basic
Mte90Mte90
51

Next.js State Management

Guide Next.js state management with URL-driven state and server libraries.

Community
Intermediate
freedomw1987freedomw1987
2

react-html5-drag-drop-pitfalls

Diagnose silent HTML5 drag-and-drop failures in React applications.

Community
Intermediate