qt-figma-component-generation
SkillExtract component metadata from a Figma design system and generate production-ready QML controls. Use this skill whenever someone wants to turn Figma components into QML files — whether they say "generate components from Figma", "create QML controls based on a design system", "convert Figma componen
Install
git clone https://github.com/TheQtCompanyRnD/agent-skills.git ~/.claude/skills/qt-figma-component-generationWhat is qt-figma-component-generation?
Extract component metadata from a Figma design system and generate production-ready QML controls. Use this skill whenever someone wants to turn Figma components into QML files — whether they say "generate components from Figma", "create QML controls based on a design system", "convert Figma components to QML", "build the component library", "extract button/input/checkbox from Figma", or anything similar. Requires design-tokens.json and QML design system singletons to already exist (from the token extraction skill). Uses Figma MCP to inspect components one at a time and maps variants, states, sizing, and token usage to idiomatic Qt Quick Controls 2 patterns. Trigger this skill at the component generation step of any QML design-system workflow.
What this can do
Capabilities declared in this component's own frontmatter — not inferred.
Inherit all session tools
Declares no tool restrictions — inherits every session tool
~188 tokens of context used while enabled, before you invoke anything
Documentation
README · ~10 min readFigma Component Generation Skill
This skill reads component definitions from a Figma file via MCP and generates production-ready QML control files that consume the design-system singletons produced by the token-extraction skill.
Prerequisites
Before generating any components, confirm all of the following exist in the project:
design-tokens.json— the merged token file from the token-extraction skill- QML design system singletons —
Primitives.qml,Theme.qml,Spacing.qml,FontInterface.qmlin adesign-system/folder
If either is missing, stop and run the token-extraction skill first (qt-figma-token-extraction).
Verify Figma MCP is connected — confirm that get_metadata and get_design_context are available in the tool list. If not, tell the user:
"The Figma MCP connector isn't connected yet. Connect it via your MCP configuration, then come back and we can start."
Reviews
Log in to leave a review.
No reviews yet — be the first.
Explore related
Other things in this space — across every part of the ecosystem, not just skills.
Skillssimilar to this one
All skills →ui-ux-pro-max-skill
An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms
111.3K stars
claude-mem
Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More
88.9K stars
impeccable
The design language that makes your AI harness better at design.
52.5K stars
Commands
All commands →create-plugin
Guided end-to-end plugin creation workflow with component design, implementation, and validation
32.8K stars
release-testing
Run automated UAT tests (UI or API) using a test profile on the AWS DevOps Agent
2.2K stars
quick-build
Creates a WordPress block theme from a description with an index.html landing page template and deploys it to a local Studio site
Plugins
All plugins →frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.
32.9K stars
playground
Creates interactive HTML playgrounds — self-contained single-file explorers with visual controls, live preview, and prompt output with copy button. Includes templates for design playgrounds, data explorers, concept maps, and document critique.
32.9K stars
session-report
Generate an explorable HTML report of Claude Code session usage — tokens, cache efficiency, subagents, skills, and the most expensive prompts — from local ~/.claude/projects transcripts.
32.9K stars
MCP Servers
All mcp servers →codebase-memory-mcp
High-performance code intelligence MCP server. Indexes codebases into a persistent knowledge graph — average repo in milliseconds. 158 languages, sub-ms queries, 99% fewer tokens. Single static binary, zero dependencies.
36.7K stars
Figma-Context-MCP
MCP server to provide Figma layout information to AI coding agents like Cursor
15.5K stars
dbhub
Zero-dependency, token-efficient database MCP server for Postgres, MySQL, SQL Server, MariaDB, SQLite.
3.3K stars
Hooks
All hooks →Subagents
All subagents →code-architect
Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences
32.8K stars
claude-security
The dedicated Claude Security orchestrator. Hand it an unattended job — "fully scan this repository and patch what you find; I understand it will use a lot of tokens" — and it runs the whole thing itself: capturing the revision, driving the multi-agent scan through the claude-security:scan workflow,
32.8K stars
plugin-validator
Use this agent when the user asks to "validate my plugin", "check plugin structure", "verify plugin is correct", "validate plugin.json", "check plugin files", or mentions plugin validation. Also trigger proactively after user creates or modifies plugin components. Examples: <example> Context: User f
32.8K stars