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

ds-component-spec

Generates cross-platform design system component specifications from Figma frames, screenshots, or text descriptions.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design system teams struggle to keep component documentation consistent across Web, iOS, and Android. This Skill turns a single component input (Figma frame, screenshot, text, or code) into one complete specification that answers design and engineering questions for all three platforms at once. ## Core Features & Use Cases - Architecture classification: Assigns each component to one of four levels (Item, Surface View, Structural View, Layout) with explicit reasoning for borderline cases. - Naming and token validation: Enforces the Role + Entity naming formula and a two-tier token system (Core → Semantic), flagging hardcoded values and missing semantic tokens as blockers. - Full spec output: Produces a fixed-structure spec covering variants, states, slots, lifecycle, React/SwiftUI/Compose implementations, and accessibility requirements, plus per-user memory logs in JSON. - Use Case: A designer drops a Figma frame of a new Badge component and asks for a spec; the Skill classifies it as Surface View, validates tokens, and outputs platform-specific implementation guidance for all three engineering teams. ## Quick Start Ask the assistant to create a component spec from the attached Figma frame or screenshot for Web, iOS, and Android.

Frequently Asked Questions about ds-component-spec

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

FAQPage Schema
How do I create a design system component specification for multiple platforms?▼

Provide a Figma frame, screenshot, text description, or existing code, and the Skill produces one specification covering Web (React), iOS (SwiftUI), and Android (Compose). The output includes architecture level, naming, tokens, states, and accessibility requirements.

What is the difference between Surface View and Structural View components?▼

A Surface View wraps one main content element in a shell with background, shape, and padding, like a Badge or Button. A Structural View contains two or more independent Role/Entity components, such as ListRow or NavBar; Item-level primitives alone do not qualify.

Does the component spec work without a Figma MCP connection?▼

Yes, the Skill warns that Figma MCP is not connected and asks for a screenshot or text description instead. It continues working with whatever input is available without blocking the workflow.

How are design tokens validated in the component spec?▼

Components must use only semantic tokens like color-surface-default, while core tokens are reserved for defining semantic ones. Hardcoded values are flagged as blockers, and missing semantic tokens are explicitly marked for addition.

What naming rules apply to design system components?▼

Names follow the Role plus Entity formula, such as BadgeStatus or WidgetBalance, with exceptions for established names like Avatar, Dialog, and Toast. Implementation-based names and standalone Item suffixes are rejected.

What happens when shared reference files are missing?▼

The Skill warns about the missing file and falls back to built-in rules for tokens, platforms, and component states embedded in its instructions. Work continues with reduced but functional guidance.

Related Skills

Explore More Design & Creative Skills→
ValyayValyay

figma-audit

Compare live UI screenshots against Figma references and report visual discrepancies.

Community
Advanced
AbsolutelySkilledAbsolutelySkilled
207

design-systems

Standardize design tokens, theming, and Storybook documentation for UI libraries.

Official
Advanced
ttphatsttphats

repo-scan

Audits cross-stack source code to classify files, detect embedded third-party libraries, and generate HTML reports.

Community
Intermediate
GovTechSGGovTechSG
18

tailwind-mapping

Map SGDS CSS variables to Tailwind v4 utility classes with playground and Storybook documentation.

Official
Intermediate