Component

---

| Skaya v1.0.0

---

Skaya's AI-powered component generator accelerates UI development with smart, context-aware scaffolding. Generate production-ready components with integrated testing, styling, and documentation in seconds.

Prerequisites

This guide assumes knowledge of:

• Basic Skaya project initialization
• Fundamental React concepts

Key Features

Feature	Description
🤖 AI-Powered	Context-aware generation with dynamic prop/state suggestions
🌐 Language Support	TypeScript (tsx) with strict typing enforcement
🎨 Styling Options	CSS | SCSS | styled-components | Tailwind
🧪 Test Coverage	Auto-generated Jest/Vitest + Storybook stories
🔄 Dependency Import	Seamlessly import existing components and APIs

Every component includes:

• ✅ Core component file with TypeScript interface
• ✅ Storybook integration for visual testing
• ✅ Unit tests with sample test cases
• ✅ Style file (CSS/SCSS) or CSS-in-JS setup

Creating Components

Interactive Mode

skaya create
# Follow the interactive prompts

Direct Generation

skaya create component --project frontend --filename WalletButton

Quick Start with npx

npx skaya create component -p frontend -f WalletButton

Advanced Configuration

Custom Template Setup (Coming in v2.0)

skaya create component --template path/to/template.json

Example Workflow with Custom imports

1: Initiate Creation

skaya create component -f WalletButton

2: Configuration

✔ Enter the folder where you want to create the component for Walletbutton:
myapp/src/components
✔ Use AI to generate the component? Yes
? Select which required components you would like to import: 
(Press <space> to select, <a> to toggle all, <i> to invert selection)
  ◉ component
❯ ◯ api

You can select existing components or APIs to import into your newly generated component, allowing for seamless integration and reusability. For instance, you might want to import a Walletbutton component and a Login API into a new NftCard component.

• Learn how to create Apis in our Api Create Guide.

3. Import Custom Selection

A. Import BuiltIn Componenet

✔ Select which required components you would like to import: component, api
? Select component components to import:
(Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◉ Walletbutton

B. Import BuiltIn Apis

✔ Select component components to import: Walletbutton
? Select api components to import:
❯◉ Login

4. Ai Prompt Specification For Component Generation

✔ Select component components to import: Walletbutton
✔ Select api components to import: Login

--- Dependencies to be imported ---

Dependencies (component):
- Walletbutton

Dependencies (api):
- Login
-------------------------------------------------
? Enter AI Prompt on how the files and code should work: Import the walletconenctbutton and use login api to create a nftcard

5. File Generation Output

✅ component file created at myapp/src/components/Walletbutton/Walletbutton.tsx
✅ component file created at myapp/src/components/Walletbutton/Walletbutton.stories.tsx
✅ component file created at myapp/src/components/Walletbutton/Walletbutton.test.tsx
✅ component file created at myapp/src/components/Walletbutton/Walletbutton.css

Key Notes

1. When using AI generation:

- You can import existing components if needed, fostering a modular and reusable codebase.
- Provide clear, specific prompts for best results, especially when defining how imported components or APIs should interact.
- Generated files include tests and stories by default.

2. Folder structure:

- Components are created in PascalCase
- Test/story files are automatically paired
- CSS modules are generated by default

Import Behavior

• Automatic Props Binding: Imported components' props are automatically wired
• API Hook Generation: Required API hooks are generated with proper typing
• Dependency Tracking: All imports are tracked in the component's metadata

Updating Components

Learn how to modify existing components in our Component Update Guide.