mh-cto-sdlc-component-spec

Write UI component specifications with design system tokens and wireframe behavior.

2|Updated Apr 5, 2026

Search Tags:#specification #UI development #AI-driven #design handoff #UI component

Ready to run

npx skills add https://github.com/Imad-Oute/MicroHard --skill mh-cto-sdlc-component-spec

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mh-cto-sdlc-component-spec
Source: https://github.com/Imad-Oute/MicroHard/tree/main/src/departments/cto/sdlc/phase-3-ux-design/mh-cto-sdlc-component-spec
Command: npx skills add https://github.com/Imad-Oute/MicroHard --skill mh-cto-sdlc-component-spec

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the creation of detailed component specifications for UI components, streamlining the design-to-engineering handoff process.

Core Features & Use Cases

Component Specification Generation: Automatically writes specifications for UI components based on design system and wireframes.
Ask-Driven Edits: Allows for the inclusion of edge-case behavior based on user input.
Automated Dependencies: Identifies component dependencies and provides a build order for development.

Quick Start

Trigger the 'component spec' skill after design-token phase to generate specifications for your custom components.

Frequently Asked Questions about mh-cto-sdlc-component-spec

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

FAQPage Schema

How do I generate UI component specifications for AI-driven development?▼

Generate UI component specifications by applying a structured template that integrates design system tokens and wireframe behavior, ensuring developers get clear props, states, and interaction logic. This streamlines the design-to-engineering handoff process for AI-driven UI development.

What is the best way to document component states and interaction logic for design handoff?▼

Document component states and interaction logic by writing detailed specifications using a structured template. This approach translates wireframe behavior and design system tokens into precise developer instructions, clarifying props and edge-case behaviors for seamless design handoff.

Do I need design system tokens to write component specifications?▼

Yes, you need design system tokens and wireframes to write component specifications. The specification generation requires knowledge of the design system to accurately map token values and wireframe behavior into structured component states and interaction logic.

How do I handle edge-case behavior when writing UI component specifications?▼

Handle edge-case behavior in UI component specifications through ask-driven edits, allowing you to include specific edge-case interactions based on user input. This ensures the generated component spec captures nuanced wireframe behavior accurately.

Can I automatically identify component dependencies for a UI build order?▼

Yes, you can automatically identify component dependencies and generate a build order for development. The specification process maps out UI component relationships, providing a structured development sequence to follow during implementation.

When should I generate component specifications in the UI development workflow?▼

Generate component specifications after the design-token phase to produce detailed specs for custom components. This positions the specification generation directly before the engineering implementation phase, ensuring design handoff occurs with complete interaction logic.