Skills
.Work. You
Rest

create-structure

Community

Document component dimensions and spacing.

Design & Creative#documentation#design system#figma#spacing#dimensions#component specs
Authorredongreen
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the creation of detailed structure specifications for UI components, ensuring accurate documentation of dimensions, spacing, and padding across various design variants.

Core Features & Use Cases

  • Automated Spec Generation: Extracts dimensional properties like width, height, padding, and spacing directly from Figma components.
  • Variant Analysis: Documents how these properties change across different size, density, and shape variants.
  • Sub-component Detailing: Explores and documents the internal structure of sub-components, including those hidden behind boolean toggles.
  • Use Case: When designing a new button component, use this Skill to generate a comprehensive structure spec that details its padding, minimum size, and how these values adapt for large, medium, and small variants, as well as for compact and spacious density modes.

Quick Start

Generate a structure specification for the Figma component located at https://www.figma.com/file/example/component.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: create-structure
Download link: https://github.com/redongreen/uSpec/archive/main.zip#create-structure

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.