skills.rest
redongreen
redongreenCOMMUNITY
Explore all skills by this author →
GitHub

create-structure

Generates UI component structure specs from Figma dimensional properties and variants.

236|32|Updated Jan 23, 2026
Search Tags:#documentation#design system#figma#spacing#dimensions#component specs
One-click install
npx skills add https://github.com/redongreen/uSpec --skill create-structure
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-structure
Source: https://github.com/redongreen/uSpec/tree/main/.cursor/skills/create-structure
Command: npx skills add https://github.com/redongreen/uSpec --skill create-structure

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about create-structure

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

FAQPage Schema
How do I document Figma component dimensions and spacing for a design system?▼

To document Figma component dimensions and spacing for a design system, you can automatically extract width, height, padding, and sub-component structures to generate detailed structure specifications.

How do I extract padding and spacing variations across different Figma component variants?▼

You can extract padding and spacing variations across Figma component variants by analyzing the component's dimensional properties, documenting how values adapt across different size, density, and shape configurations.

Can I document sub-components hidden behind boolean toggles in Figma?▼

Yes, you can document sub-components hidden behind boolean toggles in Figma. The specification generation explores and documents the internal structure of sub-components revealed by these toggles.

What's the best way to generate structure specs for UI components with multiple density modes?▼

The best way to generate structure specs for UI components with multiple density modes is to automate dimensional property extraction, documenting how padding and minimum sizes adapt for compact and spacious variations.

Does this approach work for documenting design system component specs from scratch?▼

Yes, this approach works for documenting design system component specs from scratch. It automates the creation of detailed structure specifications, ensuring accurate documentation of dimensions, spacing, and padding across various design variants.

Related Skills

Explore More Design & Creative Skills→
redongreenredongreen
236

create-property

Generate visual property annotations for Figma components with variant and variable mode support.

Community
Advanced
chriswchchriswch
2

clear-writing

Revise technical and user-facing prose for clarity, concision, and precision.

Community
Intermediate
johnlindquistjohnlindquist
24

figma

Extract design tokens, components, and styles from Figma files.

Community
Intermediate
padjeipadjei

design-systems-slds-validate

Validate Lightning Web Components for SLDS compliance and generate a detailed scorecard.

Community
Advanced