open-index/open-npm huggingface dataset:
npm package: @kailashg101/mcp-figma-to-code
Description: MCP server for converting Figma designs to React Native components
Author: Kailash G
Latest version: 1.0.1

# Figma to React Native MCP

Convert Figma designs to React Native components using Cursor's MCP. This tool extracts components from your Figma designs and generates corresponding React Native components with proper typing and styling.

## Installation

### For Development

Add to your `eas.json`:

```json
{
  "mcpServers": {
    "figma-to-code": {
      "command": "node",
      "args": ["PATH_TO_REPO/build/index.js"],
      "env": {
        "FIGMA_TOKEN": "your_figma_token",
        "FIGMA_FILE": "your_figma_file_id",
        "PROJECT_DIR": "your_project_directory"
      }
    }
  }
}
```

### For End Users

Install the MCP server in your Cursor IDE:

```bash
npx -y @smithery/cli@latest install @kailashg101/mcp-figma-to-code --client claude --config "{
  \"figmaToken\": \"YOUR_FIGMA_TOKEN\",
  \"figmaFile\": \"YOUR_FIGMA_FILE_ID\",
  \"projectDir\": \"YOUR_PROJECT_DIRECTORY\"
}"
```

## Usage

After installation, you can use the following prompts in Cursor:

### Extract All Components

```
using the extract_components mcp tool get all components from figma and generate their corresponding react native components in components folder
```

### Extract Specific Component

```
using the extract_components mcp tool get the [ComponentName] component from figma and generate its corresponding react native component in components folder
```

## Configuration

The config object accepts the following parameters:

```typescript
{
  "figmaToken": string,    // Your Figma access token
  "figmaFile": string,     // Your Figma file ID (from the URL)
  "projectDir": string     // Where to generate the components
}
```

## Features

Current:

- ✅ Extract components from Figma
- ✅ Generate React Native components
- ✅ Maintain component hierarchy
- ✅ Handle component props and types
- ✅ Support nested components

Coming Soon:

- 🚧 GraphQL schema generation

## Development

To contribute or modify:

1. Clone the repository
2. Install dependencies:

```bash
npm install
```

3. Build:

```bash
npm run build
```

4. Run locally:

```bash
npm start
```

## Environment Variables

When running locally, you'll need these in your `.env`:

```bash
FIGMA_TOKEN=your_figma_token
FIGMA_FILE=your_figma_file_id
PROJECT_DIR=your_project_directory
```

## Error Handling

Common errors and solutions:

- **"Failed to create client"**: Check if all environment variables are properly set
- **"Components page not found"**: Ensure your Figma file has a page named "Components"
- **"Failed to fetch Figma file"**: Verify your Figma token and file ID

## License

MIT

---

For issues and feature requests, please open an issue on GitHub.
npm package: @kailashw/logger-app
Description: A sample package to log your messages in browser console or server console.
Author: Kailas WalldoddAai
Latest version: 1.0.9

# @kailashw/logger-app
This library is used to log the messages to server/browser console. The library currently prints the data to the console. I will be working on making it more effective. For now, This is a test library published on npm library. The details about usage of this library are as following.


To install the library in your application

### Using npm
```
npm i @kailashw/logger-app
```
### Using yarn
```
yarn add @kailashw/logger-app
```

Sample usage in the code,

### For ES5 and before

```
const logger = require("@kailashw/logger-app")
logger.info({msg:'this is message', data:'this is data'})
```

### ES6 onwards
```
import logger from "@kailashw/logger-app";
logger.info({msg:'this is message', data:'this is data'})
```
npm package: @kailight/socials
Description: Vue socials interaction - client side
Author: Kai Light
Latest version: 0.0.8
Deprecated: false

# Documentation

```
import Socials from '@kailight/socials'
let options = {
  // tribefire-auth server to point popup to 
  base : 'http://localhost:3000',
  // dispatch this vuex action when login happens
  onLogin : 'onSocialLogin',
  // this route is automatically added to router and is used for callback
  cb : '/auth-callback'
  // since we use client-side auth, Facebook clientId is required
  Facebook : { clientId : 'some numbers' } 
}
Vue.use( Socials, options )
```

```
// In your store add mutation
onSocialLogin: (context, data) => {
  info('setUserData()', data)
  context.commit('setUserData', data)
}
// that will call following action
onSocialLogin: (state, data) => {
  info('setUserData', data)
    if (data.social) {
      state.User[data.social] = data.data
    }
  }
}
```



Then, in your component
```
this.$Socials.login('Twitter')
```

Note that this code only works in conjuction with backend, property of Tribefire

See [github](https://github.com/kailight/socials)
npm package: @kailight/tribefire-auth
Description: Tribefire-auth VUEX addon
Author: Kai Light
Latest version: 0.0.8
Deprecated: false

# @kailight/tribefire-auth

>> VUEX addon for loggin in with tribefire-backend

### Installation

npm i @kailight/tribefire-auth

### Example usage 

in your **store.js**

```
// don't forget the trailing slash
let BASE = 'http://localhost:3000/'

import axios from 'axios'
const BACKEND = axios.create({
  baseURL : BASE,
  withCredentials: true,
})

import tribefireAuthInit from '@/kailight/tribefire-auth'
let TribefireAuth = tribefireAuthInit(BACKEND)
```

then 

```
const store = new Vuex.Store({
  state: {
    ...TribefireAuth.state,
    // your state vars
  },
  getters: {
    ...TribefireAuth.getters,
    // your getters
  },
  mutations: {
    ...TribefireAuth.getters,
    // your mutations
  },
  mutations: {
    ...TribefireAuth.getters,
    // your mutations
  },
```

### Usage

Login User

```
store.dispatch('login', 'login', 'password').then( 
  response => { alert('logged in') } 
)
```

Register User

```
store.dispatch('register', 'login', 'password').then( 
  response => { alert('registered') } 
)
```

Get user data in component

```
computed : {
  ...mapGetters(['User']),
  // other computed properies
}
...
methods : {
  greetUser() { 
    alert("Hi "+this.User.name)
  }
}
```