skills.rest
Ariedam64
Ariedam64COMMUNITY
Explore all skills by this author →
GitHub

add-card

Scaffold UI card parts with factory or class patterns in sections.

3|1|Updated Dec 11, 2025
Search Tags:#typescript#ui#architecture#frontend#card#factory-pattern
One-click install
npx skills add https://github.com/Ariedam64/Gemini --skill add-card
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-card
Source: https://github.com/Ariedam64/Gemini/tree/main/.claude/skills/add-card
Command: npx skills add https://github.com/Ariedam64/Gemini --skill add-card

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Card-driven UI in large sections requires a reusable pattern and a clean lifecycle; this skill provides a guide to implementing Card parts using factory or class patterns with a consistent Card wrapper and proper cleanup.

Core Features & Use Cases

  • Factory pattern templates to quickly scaffold card parts within a section
  • Class pattern templates for complex, stateful cards with lifecycle management
  • Clear guidance on exporting, registering in sections, and integrating with section workflows

Quick Start

Instantiate a card using createCard(options) or the CardPart class to scaffold a new UI card in your target section.

Frequently Asked Questions about add-card

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

FAQPage Schema
How do I structure modular UI cards with proper cleanup in a TypeScript frontend?▼

To structure modular UI cards with proper cleanup, use a standard Card wrapper supporting factory or class patterns. This enforces consistent exports, type definitions, and a cleanup lifecycle within section workflows.

When should I use the factory pattern vs the class pattern for UI card creation?▼

Use the factory pattern to quickly scaffold simple card parts, and the class pattern for complex, stateful UI cards requiring explicit lifecycle management and cleanup discipline.

How do I register a new UI card part within a frontend section directory?▼

Register a UI card part by placing it in the src/ui/sections/<SectionName>/parts directory, ensuring it meets project conventions for barrel exports and integrates with section registration workflows.

What is the add-card Skill used for in frontend architecture?▼

The add-card Skill provides structured scaffolds for UI card creation using factory or class patterns, guiding consistent exports, type definitions, and cleanup discipline within section-specific frontend architectures.

How do I manage scripts and assets when scaffolding stateful UI cards?▼

Manage scripts and assets by wiring them through the provided Card wrapper or class pattern template, guiding integration while maintaining standard cleanup lifecycle discipline.

Related Skills

Explore More Software Engineering Skills→
spuneiarturspuneiartur
1

component-factory

Generate reusable React components with JSX files and barrel exports.

Community
Intermediate
umbrella-librariesumbrella-libraries
8

dotnet-scaffold-api-data-service-controller

Scaffold an API controller with UmbrellaRepositoryDataService and DI registration.

Official
Advanced
SandroBeatzSandroBeatz

new-component

Generate Vue/Quasar component structures with TypeScript interfaces and barrel exports.

Community
Intermediate
flag3flag3
1

frontend-patterns

Implement React design patterns for scalable UI components in Next.js.

Community
Basic