skills.rest
austinjan
austinjanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

spec-ui-component

Generate TypeScript API contracts, Mermaid.js state diagrams, and Gherkin-like scenarios for UI components.

1|Updated Jan 3, 2026
Search Tags:#typescript#mermaid#specification#ui component#gherkin
One-click install
npx skills add https://github.com/austinjan/aaagent-rs --skill spec-ui-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spec-ui-component
Source: https://github.com/austinjan/aaagent-rs/tree/main/.claude/skills/spec-ui-component
Command: npx skills add https://github.com/austinjan/aaagent-rs --skill spec-ui-component

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires typescript, mermaid, gherkin, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of designing UI components by providing a structured way to generate specifications, including API contracts, state logic, and verifiable scenarios.

Core Features & Use Cases

  • API Contract Creation: Generates TypeScript Prop and Event interfaces for component interfaces.
  • State Logic Definition: Utilizes Mermaid.js to create finite state machines for component states.
  • Behavioral Specification: Writes Gherkin-like scenarios for testable edge cases and user actions.
  • Use Case: When a new UI component is required, this Skill aids in defining its architecture and usage guidelines upfront.

Quick Start

Generate a specification for the UI component named 'SearchBar'.

Frequently Asked Questions about spec-ui-component

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

FAQPage Schema
How do I create a UI component specification with API contracts and state logic?▼

You can generate a UI component specification by defining TypeScript Prop and Event interfaces, mapping state logic with Mermaid.js diagrams, and writing Gherkin-like scenarios for verifiable behavior.

What is the best way to define testable scenarios for UI component states?▼

The best way to define testable scenarios is using Gherkin-like syntax to document edge cases and user actions, ensuring the UI component states are fully verifiable and behaviorally specified.

Can I use TypeScript interfaces to generate API contracts for UI components?▼

Yes, you can use TypeScript to generate API contracts by creating strongly typed Prop and Event interfaces that define the architecture and usage guidelines for your UI components.

Does Mermaid.js work for visualizing finite state machines in component specifications?▼

Yes, Mermaid.js works for visualizing finite state machines by rendering state diagrams that map out the complex state logic and transitions within your UI component specifications.

How do I document edge cases and user actions when designing UI components?▼

You document edge cases and user actions by writing Gherkin-like behavioral scenarios that specify testable conditions, ensuring the UI component architecture handles all expected interactions.

When do I need to generate a specification for a UI component rather than coding directly?▼

You need to generate a specification upfront when a new UI component requires clear architecture, defined API contracts, and verifiable state logic to streamline the design and testing process before implementation.

Related Skills

Explore More Software Engineering Skills→
crgarcia12crgarcia12

contract-generation

Generate API contracts, TypeScript types, and Azure infrastructure definitions from Gherkin scenarios.

Community
Advanced
lv7devlv7dev

mermaidjs-v11

Generate flowcharts, sequence, class, and ER diagrams from text using Mermaid.js v11.

Community
Intermediate
dhar174dhar174
1

mermaid-diagrams

Generate flowcharts, sequence, class, ER, and Gantt diagrams from Mermaid syntax.

Community
Intermediate
AZANIRAZANIR
2

qa-spec-writer

Transform requirements into technical specifications with Gherkin acceptance criteria.

Community
Intermediate