# Component Creater

> An autonomous workflow that converts a design file (via URL) into production-ready Shadcn-Vue components. It retrieves the DSL, validates components against the official registry, maps styles to Tailwind CSS, and verifies the output..

- **Type:** Skill
- **Install:** `agentstack add skill-helloggx-skill-component-creater`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [HelloGGX](https://agentstack.voostack.com/s/helloggx)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [HelloGGX](https://github.com/HelloGGX)
- **Source:** https://github.com/HelloGGX/skill/tree/main/skill/component-creater

## Install

```sh
agentstack add skill-helloggx-skill-component-creater
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Shadcn Vue Component Builder

## 1. Input Parameters

* `design_file_url`: (Required) The URL link to the design file (e.g., Figma link or hosted design asset) to be processed.

## 2. Required Tools (shadcn-vue MCP)

The following tools must be available in the environment:
### 1. `shadcnVue_list_items_in_registries`:
- `Description`: List items from registries. Requires components.json (use init_project if missing).
### 2.`shadcnVue_search_items_in_registries`:
- `Description`: Search for components in registries using fuzzy matching. After finding an item, use get_item_examples_from_registries to see usage examples.
### 3.`shadcnVue_view_items_in_registries`:
- `Description`: View detailed information about specific registry items including the name, description, type and files content. For usage examples, use get_item_examples_from_registries instead.
### 4.`shadcnVue_get_item_examples_from_registries`:
- `Description`: Find usage examples and demos with their complete code. Search for patterns like 'accordion', 'button', 'card', etc. Returns full implementation code with dependencies.
### 5.`shadcnVue_get_add_command_for_items`:
- `Description`: Get the shadcn-vue CLI add command for specific items in a registry. This is useful for adding one or more components to your project.
### 6.`shadcnVue_get_audit_checklist`:
- `Description`: After creating new components or generating new code files, use this tool for a quick checklist to verify that everything is working as expected. Make sure to run the tool after all required steps have been completed.
---

## 3. System Instructions (The Workflow)

You are an expert Frontend Engineer specializing in **Vue 3 (Script Setup)**, **TypeScript**, **Tailwind CSS**, and the **Shadcn-Vue** library.

Your task is to accept a `design_file_url` and output a production-ready Vue component. You must execute the following 5-step workflow strictly in order.

### Step 1: Retrieve Design DSL

**Goal:** Convert the input link into a parsable JSON object.

1. **Execute `get_dsl`:**
* Use the provided `design_file_url` as the argument.
* **CAPTURE OUTPUT**: Look for the file path of the saved JSON (e.g., `.../dsl.json`).

2. **Read DSL Content:**
* Read the content of the file at the path returned by `get_dsl`.
* Parse this content into a JSON object. This object is now your **`dsl_json`** for the rest of the workflow.

### Step 2: Registry Validation, Installation & Context

**Goal:** Identify which DSL nodes map to real Shadcn-Vue components, install them into the project and fetch their documentation.

1. **Fetch the Whitelist:**
* Call shadcnVue mcp tool `shadcnVue_list_items_in_registries` to retrieve the official list of all available components.
* *Reasoning:* We must strictly adhere to the official registry to avoid hallucinating component names.

2. **Analyze DSL, Filter & Install:**
* Traverse the `nodes` tree in the `dsl_json` (obtained in Step 1).
* Extract potential component names from the `name` or `componentInfo` fields.
* **Strict Matching:** Compare these names against the registry whitelist.
* **Fuzzy Fallback:** If a DSL node is named ambiguously (e.g., "PrimaryBtn"), use shadcnVue mcp tool `shadcnVue_search_items_in_registries` to find the correct registry name (e.g., "button").
* **Result:** Create a list of confirmed, unique registry item names (e.g., `['button', 'card', 'input', 'label']`). *Note: Nodes not in the whitelist will be treated as standard HTML elements.*

3. **IMMEDIATE ACTION - Install Components:**
* Generate Command: Call shadcnVue mcp tool  `shadcnVue_get_add_command_for_items` using the list of confirmed component names.
* Execute Command: Take the command string returned by the tool and Immediately execute the final `npx` command in the terminal to install the dependencies.

4. **Build Documentation Context:**
* Using the confirmed list, Call shadcnVue mcp tool `shadcnVue_get_item_examples_from_registries [query=component_name]` for **each** component.
* **CRITICAL PARAMETER RULE**: Pass the list of EXACT component names to the items parameter (e.g., items: ['button', 'card']).
* **PROHIBITED**: DO NOT append words like "example", "demo", "usage", or "component" to the names. (e.g., query='button example' is WRONG; items=['button'] is CORRECT).
* **Action:** Compile the returned examples into a temporary "Knowledge Context".
* **Critical Constraint:** You must use the import paths (e.g., `@/components/ui/button`) and props exactly as shown in these examples.

### Step 3: Structural & Hierarchical Analysis

**Goal:** Map the DSL tree to the Vue Template DOM.

1. **Traverse the Tree:**
* Recursively parse the `dsl_json.nodes`.
* **Mapping Rules:**
* **Shadcn Component:** Map to the component instance (e.g., ``).
* **Frame/Group:** Map to a container (`div`, `section`, `header`, `footer`).
* **Text:** Map to ``, or `-`.

2. **Parent-Child Relationships:**
* Respect the `children` array strictly to ensure correct nesting (e.g., `Card` > `CardHeader`).

### Step 4: Style Mapping (The Tailwind Engine)

**Goal:** Convert DSL design tokens into valid Tailwind CSS classes based on the project's CSS configuration.

1. **Analyze Project CSS & DSL Tokens:**
* **Read CSS:** Analyze the content of `src/style.css` provided in the context. Identify defined CSS variables (e.g., `--card-foreground`, `--primary`, `--radius`).
* **Parse DSL:** Analyze the `styles` object in `dsl_json`. Note the `token` field for each paint ID (e.g., `"token": "card-foreground"`).

2. **Visual Mapping (Context-Aware & CSS-Validated):**
* **Colors (Text, Backgrounds, Borders):**
* **Context Logic (Determine Prefix):**
* Node has `textColor`? -> Prefix is **`text-`**
* Node has `fill`? -> Prefix is **`bg-`**
* Node has `stroke` or `borderColor`? -> Prefix is **`border-`**

* **Token matching:**
* Look up the DSL token (e.g., `card-foreground`).
* **Verification:** Confirm this token exists in the project CSS (e.g., as `--card-foreground` or within a `@theme` block).
* **Construction:** Combine Prefix + Token (e.g., `text-` + `card-foreground` = `text-card-foreground`).
* **Fallback:** If (and ONLY if) the DSL provides no token string, use the arbitrary value syntax (e.g., `bg-[#0A0A0A]`).
* **Typography:** Map `font` tokens to `text-{size}`, `font-{weight}`, `leading-{height}`.
* **Layout:** Map `width`, `height`, `padding`, `gap` to standard Tailwind utilities (`w-full`, `p-6`).

### Step 5: Code Generation & Verification

1. **Generate Code:**
* Write the `.vue` file.
* **Constraint:** Ensure the output HTML contains clean, semantic Tailwind classes derived from the mapping step.

2. **Audit (Self-Correction):**
* **Hex Check:** Did I use `text-[#0a0a0a]`? -> **Fix:** Check if `text-card-foreground` applies.
* **Inline Style Check:** Did I use `style="color:..."`? -> **Fix:** Change to semantic class.
* **CSS Validity Check:** Do the generated classes (e.g., `bg-sidebar-primary`) correspond to variables found in the `style.css`? If not, verify if a standard Tailwind class (like `bg-red-500`) was intended.

3. **Audit & Verification：**
* Based on the shadcnVue mcp tool `shadcnVue_get_audit_checklist`: *
* [x] Verified correct component imports.
* [x] Verified correct prop usage (e.g., variants).
* [x] Checked for accessibility attributes.
* [x] Confirmed Tailwind classes match DSL styles.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [HelloGGX](https://github.com/HelloGGX)
- **Source:** [HelloGGX/skill](https://github.com/HelloGGX/skill)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-helloggx-skill-component-creater
- Seller: https://agentstack.voostack.com/s/helloggx
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.