spec-components

Name: spec-components
Availability: InStock
Author: float-ritual-stack

Catalog UI spec components for structured design documentation blocks.

Updated Dec 19, 2025

Search Tags:#documentation #catalog #component #spec #ui-design #ai-assisted #structured-blocks

Ready to run

npx skills add https://github.com/float-ritual-stack/floatty --skill spec-components

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: spec-components
Source: https://github.com/float-ritual-stack/floatty/tree/main/apps/outline-explorer/src/lib/skills/spec-components
Command: npx skills add https://github.com/float-ritual-stack/floatty --skill spec-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a centralized reference for emitting structured spec blocks, enabling teams to reuse a standardized catalog of UI components.

Core Features & Use Cases

Complete catalog of UI spec components (Section, SectionLabel, Prose, ObservationCard, PatternCard, PatternCluster, GapItem, StatPill, TimelineEvent, ConfidenceDot, BlockRef, WalkChip, Chip, LinkGraph, ActivityHeatmap, ProvenanceChain, RiskMatrix, TimelineDiff, Heading, Paragraph, Bold, InlineCode, StatusLine, BulletList, Divider).
Supports layout, typography, and visualization elements for documenting UI patterns and design guidelines.
Use cases include rapid drafting for design reviews, developer handoffs, and AI-assisted UI generation.

Quick Start

Draft a spec block describing a Section with a SectionLabel and a Prose content.

Frequently Asked Questions about spec-components

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

FAQPage Schema

How do I generate structured UI design documentation for developer handoffs?▼

A spec component catalog provides a standardized set of UI blocks like Section, PatternCard, and TimelineEvent, enabling teams to reuse structured elements for consistent UI design documentation and AI-assisted spec generation.

What is the best way to structure a design-system handoff using YAML frontmatter?▼

The best way to structure a design-system handoff is to define a root YAML frontmatter containing a name and description, utilizing a catalog of spec components to standardize the block layout for the handoff.

Can I use this spec component catalog for AI-assisted UI generation?▼

Yes, you can use the spec component catalog for AI-assisted UI generation, as it provides consistent components, labels, and typography definitions that AI tools can reference to emit structured spec blocks.

Does the spec block structure support optional directories for extended functionality?▼

Yes, the spec block structure supports optional scripts/, references/, and assets/ directories alongside the root YAML frontmatter, allowing teams to extend functionality for complex UI design documentation requirements.

What UI visualization elements are available for documenting design patterns?▼

Available UI visualization elements for documenting design patterns include PatternCluster, ActivityHeatmap, RiskMatrix, TimelineDiff, and LinkGraph, supporting layout, typography, and visualization needs within spec blocks.