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

ds-component-audit

Classifies UI components from screenshots or Figma links against a design system catalog.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design teams struggle to know whether a UI element in a screenshot or Figma file already exists in their design system, needs to be created, or is ambiguous. This Skill performs a structured identity audit that prevents duplicate components and inconsistent naming before any specification work begins. ## Core Features & Use Cases - Verdict classification: Determines Match, New, Ambiguous, Not a DS component, Cannot analyze input, or Platform scope extension for any screenshot or Figma link, with explicit confidence levels. - Decomposition and collision checks: Detects repeating structural patterns (rows, cells, cards) that should become separate reusable components, and checks naming collisions against the existing component catalog. - Persistent audit memory: Logs every verdict with proposed/approved/rejected status in per-user JSON memory files, preventing re-proposal of rejected components and enabling cross-checks with the ds-component-spec skill. - Use Case: A designer pastes a screenshot of a pill-shaped status indicator and runs /audit_component. The skill compares it against Badge and Chip, finds two close candidates, attaches visual evidence, and asks the designer to choose — recording the approved verdict for future audits. ## Quick Start Attach a screenshot or Figma link of a UI component and type /audit_component to receive a structured identity verdict with confidence and reasoning.

Frequently Asked Questions about ds-component-audit

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

FAQPage Schema
How do I check if a UI component already exists in my design system?▼

Attach a screenshot or Figma link and run the /audit_component command. The skill compares the element by role and composition against the component catalog and returns a Match, New, or Ambiguous verdict with a confidence level and reasoning.

How to audit a Figma component against a design system?▼

Provide a Figma link with the /audit_component command. Links to named component instances give more reliable verdicts than links to whole frames. If Figma MCP is not connected, the skill warns you and works from the link plus a manual description or screenshot.

Does the component audit work for iOS and Android designs?▼

Yes, the skill supports Web, iOS, and Android. It infers the platform from visual patterns like native controls and safe areas, shows its assumption for confirmation, and can issue a Platform scope extension verdict when a known component appears on a new platform.

What happens when two existing components both look similar to my input?▼

The skill first checks whether the input is actually a third, undescribed component. If not, it presents both candidates with confidence scores and visual evidence, marks the verdict Ambiguous, and leaves the final choice to the designer rather than deciding itself.

Can the audit skill generate the component specification automatically?▼

No. The audit only determines component identity and verdict. After you approve the verdict, it prepares a structured handoff block, but the separate ds-component-spec skill must be launched explicitly as its own action.

Why does the skill reject re-auditing a previously rejected component?▼

Audit memory stores each verdict with a status of proposed, approved, or rejected. A rejected component is not re-proposed unless you provide new grounds such as a different source, platform, or changed visual characteristics, preventing repeated review loops.

Related Skills

Explore More Design & Creative Skills→
razorpayrazorpay
649

verify-with-browser

Visually verify Storybook component changes using the agent-browser CLI tool.

Official
Intermediate
nroze22nroze22
1

figma-component-generator

Generate Figma-ready component specifications for clinical trial EDC components.

Community
Advanced
swarm-ai-researchswarm-ai-research
39

session-close

Summarize research work, update memory logs, commit changes, and push to version control.

Official
Intermediate
MadAppGangMadAppGang
7

designer-integration

Compare UI implementations against design references to detect visual discrepancies.

Official
Intermediate