templates

Generate component briefs and architecture documentation from Markdown templates.

7|Updated Mar 11, 2026

Search Tags:#architecture #templates #documentation #component design #developer handoff

Ready to run

npx skills add https://github.com/kaelig/react-craft --skill templates-kaelig

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: templates
Source: https://github.com/kaelig/react-craft/tree/main/react-craft/skills/templates
Command: npx skills add https://github.com/kaelig/react-craft --skill templates-kaelig

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures consistency and completeness in documentation for software components and architecture designs, streamlining the development handoff process.

Core Features & Use Cases

Component Briefs: Provides a structured template for documenting component specifications extracted from design tools like Figma.
Architecture Docs: Offers a template for defining component implementation plans, including file structure, prop interfaces, and dependencies.
Use Case: When a new UI component is designed, use the component-brief.md template to capture all its details. Later, use the architecture.md template to plan its code implementation.

Quick Start

Use the templates skill to generate a new component brief using the component-brief.md template.

Frequently Asked Questions about templates

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

FAQPage Schema

How do I standardize component documentation for developer handoff?▼

Standardize component documentation by using Markdown templates to generate consistent component briefs and architecture docs. This ensures design specifications, prop interfaces, file structures, and dependencies are uniformly captured for reusable UI components.

What is the best way to document component specifications extracted from Figma?▼

Document component specifications by applying a structured Markdown template to capture extracted design details. This creates a standardized component brief that translates visual designs into machine-readable YAML frontmatter and human-readable implementation requirements.

How do I plan a UI component implementation plan including file structure and props?▼

Plan a UI component implementation by using an architecture documentation template. This defines the file structure, prop interfaces, and dependencies required, bridging the gap between initial design briefs and final code implementation.

Does this component documentation approach use YAML frontmatter for machine-readable metadata?▼

Yes, this component documentation approach uses YAML frontmatter to provide machine-readable metadata alongside Markdown for human-readable details. This dual format ensures specifications are both developer-friendly and pipeline-ready.

When do I need to use architecture documentation templates in a software development pipeline?▼

Architecture documentation templates are needed when transitioning a new UI component from design to code within a development pipeline. They provide a structured plan for implementation, ensuring file structures and dependencies are defined before development begins.