redongreenCommunity·11 Agent Skills Included

uSpec

Generate design system specs from Figma components

Generates design system documentation for UI components directly from Figma, covering API properties, structure, color tokens, anatomy, motion, and screen-reader behavior. Captures components with a Figma plugin, produces one portable Markdown spec per component, then renders annotation frames back into Figma. Eliminates hours of manual spec writing and keeps design documentation consistent across teams.

236|32

↗

npx skills add redongreen/uSpec --all -g -y

All Skills in This Repository (11)

Pure Emerald Level Indicators

📦 In Repo

redongreen

create-structure

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

firstrun

Automate uSpec initial setup for Cursor, Claude Code CLI, and Codex CLI.

create-voice

Generate screen reader accessibility specs for VoiceOver, TalkBack, and ARIA.

create-anatomy

Generate numbered anatomy annotations and attribute tables for Figma components.

create-api

Generate API overview specifications for Figma components using MCP tools.

create-motion

Generate motion specification annotations in Figma from After Effects timeline data.

update-changelog

Add new changelog entries to a specified Figma frame using MCP tools.

convert-changelog

Convert Figma changelogs into structured JSON for uSpec.

create-property

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

create-changelog

Generate and populate changelog entries within Figma using template components.

create-color

Generate color annotation tables mapping Figma UI elements to design tokens.

Community

Advanced

Frequently Asked Questions

FAQPage Schema

How to install uSpec?▼

Run `npx skills add redongreen/uSpec --all -g -y` in your terminal to install all skills globally. Then run the firstrun skill to connect your Figma template library.

What does uSpec generate from Figma components?▼

It produces a portable Markdown spec per component covering API, structure, color tokens, and screen-reader behavior, plus Figma annotation frames for anatomy, properties, and motion.

Does uSpec work with Cursor and Claude Code?▼

Yes. The installer detects Cursor, Claude Code, or Codex and places the skills in the right directory, working with either the Figma Console MCP or the native Figma MCP.

Can uSpec document accessibility behavior?▼

Yes. It generates screen reader specs with focus order and per-state announcement tables for VoiceOver, TalkBack, and ARIA.

Do I need to write code to use uSpec?▼

No. You describe the component in plain language and your agent handles extraction, spec generation, and Figma rendering automatically.