rds-component-mapper
RDS Component Mapper
1. Overview
This skill is the component selection engine for the RDS (Reusable Design System) Vue UI library. Given a visual description, Figma design context, screenshot analysis, or section type, it maps to the best-matching @rds-vue-ui/* component(s).
The RDS library contains 94 components across 15 categories:
| Category | Count | Examples |
|---|---|---|
| Sections | 22 | Hero, testimonials, parallax, cards, video |
| Cards | 14 | Image, testimonial, article, degree, icon |
| Forms | 11 | Input, checkbox, radio, dropdown, date |
| Core | 8 | Modal, alert, accordion, tooltip, popover |
| Carousels | 5 | Image, tab, ranking, timer sliders |
| Images | 4 | Landscape, portrait, infographic, testimonial |
| Buttons | 1 | Play button |
| Footers | 2 | Standard, partner |
| Navbars | 3 | Sticky/fixed navigation |
More from chandima/rds-lp-factory
markdown-spec-to-page
Converts a markdown specification document into a complete Nuxt 3 landing page using RDS Vue UI components. Use when user provides a markdown file or text describing the desired page structure, components, and content.
1figma-to-landing-page
Translates Figma design URLs into complete Nuxt 3 landing pages using RDS Vue UI components. Supports both Dev+ accounts (rich design context) and Basic accounts (screenshot-based). Use when user provides a Figma URL or screenshot of a design to implement.
1iterative-build-page
Builds a Nuxt 3 landing page section-by-section from natural language descriptions using RDS Vue UI components. Use when user describes page sections incrementally (e.g., "Add a hero with video background", "Now add a 3-column card grid").
1reference-to-landing-page
Creates a new Nuxt 3 landing page inspired by a reference website URL, adapted with user-specified modifications, using RDS Vue UI components. Use when user provides an existing page URL and describes how they want the new page to differ.
1