skills.rest
float-ritual-stack
float-ritual-stackOFFICIAL
Explore all skills by this author →
WebsiteGitHub

spec-components

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
One-click install
npx skills add https://github.com/float-ritual-stack/floatty --skill spec-components
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Wanger-SJTUWanger-SJTU

skill-creator

Detect SKILL.md files and extract metadata into structured YAML blocks.

Community
Intermediate
augustoheissaugustoheiss

agency-ui-designer

Create tokenized UI design systems with WCAG AA accessibility and developer handoff packages.

Community
Advanced
shawn-sandyshawn-sandy

design-token-extractor

Extract design tokens from images into W3C DTCG JSON, CSS custom properties, SCSS variables, and Tailwind-style utilities.

Community
Advanced
valithedgevalithedge

content-modeling

Apply four canonical content models to design and document block structures.

Community
Advanced