skills.rest
RickOBrian
RickOBrianCOMMUNITY
Explore all skills by this author →
GitHub

ds-component-build

Implements Product DS components from Figma for Web, iOS, and Android with semantic tokens and review pages.

Updated Jun 17, 2026
Search Tags:#changelog#design system#figma#multi-platform#semantic tokens#review page#component build
One-click install
npx skills add https://github.com/RickOBrian/aid --skill ds-component-build-rickobrian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ds-component-build
Source: https://github.com/RickOBrian/aid/tree/main/skills/ds-component-build
Command: npx skills add https://github.com/RickOBrian/aid --skill ds-component-build-rickobrian

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building a new design system component from a Figma design involves many error-prone steps: resolving product context, mapping semantic tokens, handling platform differences, creating metadata and changelog artifacts, and wiring up a review page. This Skill orchestrates that entire workflow so a component is implemented consistently without manual gate-checking. ## Core Features & Use Cases - Figma-to-component implementation: Discovers canonical name, variants, states, and semantic tokens from Figma plus repository context, then implements the component for confirmed platforms (Web, SwiftUI, Compose). - Pending-first versioning artifacts: Creates metadata, changelog source, and a pending release item with currentVersion: null and proposed initial version 1.0.0, never bumping versions automatically. - Review page and routing: Registers the component in the correct Components group, creates the review page and route, and renders the ComponentReleaseStatus changelog block. - Use Case: A designer shares a Figma link for a new Button component for the Driver product on Web. The Skill confirms platform scope, resolves tokens including Day/Night color mode mapping, implements the component, and returns a verified review page URL. ## Quick Start Ask the agent to build a component by providing a Figma link, product name, and target platform, for example: build this Figma component for the driver product on Web.

Frequently Asked Questions about ds-component-build

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

FAQPage Schema
How do I build a design system component from Figma?▼

Provide a Figma link, product name, and target platform in a short request. The Skill runs silent discovery, resolves semantic tokens and variants, implements the component, and returns a verified review page URL without requiring a long specification phase.

What platforms does Figma component implementation support?▼

The Skill supports Web, iOS (SwiftUI), and Android (Compose). A mandatory platform scope gate asks which platforms to target before discovery, and implementation is limited to the confirmed subset rather than defaulting to all three.

Does the component build work when Figma MCP is unavailable?▼

Yes. The Skill posts one explicit fallback message and continues from screenshots, descriptions, and repository context. Unverified Figma properties are marked as assumptions, and a decision form appears only for material unknowns affecting tokens, API, states, or accessibility.

How are semantic tokens and color modes handled for different products?▼

Only semantic tokens are used, never Core tokens or hardcoded values. Driver product maps Day to light and Night to dark via its manifest colorModeMapping; other products use their own manifest mode labels, and no Driver-style mapping is inferred when absent.

Does the Skill automatically version or release new components?▼

No. New components are created with currentVersion null and a pending item proposing initial version 1.0.0. Version bumps, final changelog entries, commits, and pushes happen only through an explicit Release Gate request confirmed by a Principal Designer.

Related Skills

Explore More Design & Creative Skills→
vultisigvultisig
19

figma

Implement React components from Figma designs using MCP inspection.

Official
Advanced
tenzirtenzir
3

tenzir-ship

Automate changelog entries, release notes, and GitHub publishing.

Official
Advanced
niraclerniracler
11

ha-integration-reviewer

Review Home Assistant integrations against quality-scale, style, Config Flow, and test coverage rules.

Community
Advanced
winstonkoh87winstonkoh87
558

Spec-Driven Development

Interrogate users to produce a design specification before coding.

Community
Advanced