skills.rest
cubachatou
cubachatouCOMMUNITY
Explore all skills by this author →
GitHub

kirby-kui-create-component

Generate Kirby UI component scaffolds with blueprints, Twig, SCSS, JS, and registration code.

Updated May 7, 2026
Search Tags:#javascript#scaffold#component#blueprint#twig#scss#kirby
One-click install
npx skills add https://github.com/cubachatou/kirby-twig-ui-lib --skill kirby-kui-create-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kirby-kui-create-component
Source: https://github.com/cubachatou/kirby-twig-ui-lib/tree/main/skills/kirby-ui-library-create-component
Command: npx skills add https://github.com/cubachatou/kirby-twig-ui-lib --skill kirby-kui-create-component

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill simplifies the process of creating new Kirby UI components by automating the generation of blueprint, Twig templates, SCSS, JS, and registration code, reducing manual setup time.

Core Features & Use Cases

  • Component Scaffold Generation: Automatically creates all necessary files for a new Kirby block component following established patterns.
  • Blueprint and Template Setup: Ensures consistency in blueprints, Twig snippets, styles, and scripts aligned with project standards.
  • Use Case: A developer requests a new contact card component; this Skill generates the complete file structure and code templates ready for customization.

Quick Start

Ask this Skill to scaffold a new component named 'tabs' with variants 'simple' and 'with-icons', and fields defining the main content structure.

Frequently Asked Questions about kirby-kui-create-component

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

FAQPage Schema
How do I create a new Kirby CMS component with Twig and SCSS files?▼

This Skill automates Kirby component scaffolding by generating Twig snippets, SCSS styles, JavaScript, and blueprint files simultaneously, establishing consistent custom UI elements without manual file creation.

What is the best way to scaffold a Kirby block with multiple variants?▼

The best way to scaffold a Kirby block with variants is to request the component by name and specify the variants you need, which generates the complete file structure and code templates ready for customization.

Can I automatically generate Kirby blueprints and registration code together?▼

Yes, you can generate Kirby blueprints and registration code together. This Skill outputs the complete setup for a new Kirby UI component, including blueprints, templates, styles, scripts, and registration code in one automated process.

Does Kirby component scaffolding support custom field structures for blocks?▼

Kirby component scaffolding supports custom field structures. You can define the main content structure fields when requesting a new component, and the Skill incorporates them into the generated blueprint and template files.

Why does manually setting up Kirby UI components take so much time?▼

Manually setting up Kirby UI components takes time because you must individually create blueprints, Twig templates, SCSS, JS, and registration code. This Skill reduces manual setup time by automating the generation of all necessary files.

Related Skills

Explore More Software Engineering Skills→
cubachatoucubachatou

kirby-twig-best-practices

Provides best practices for Kirby CMS projects with Twig templates and site structure.

Community
Advanced
imsaifimsaif
3

design-audit

Scan Tailwind UI components for hardcoded colors and design token violations.

Community
Advanced
twarogowskitwarogowski
2

api-development

Create and modify Elysia API routes with t schema validation and auth guards.

Community
Intermediate
ProyectoG007ProyectoG007

frontend-design-ultimate

Generate React, Tailwind CSS, and shadcn/ui static websites from natural language descriptions.

Community
Advanced