4 files changed, 25 insertions, 10 deletions
diff --git a/packages/create-astro/src/components/App.tsx b/packages/create-astro/src/components/App.tsx
index deb9b252a..4cf9f3852 100644
--- a/packages/create-astro/src/components/App.tsx
+++ b/packages/create-astro/src/components/App.tsx
@@ -9,7 +9,7 @@ import Finalize from './Finalize';
 
 interface Context {
   use: 'npm' | 'yarn';
-  run: boolean;
+  skipInstall?: boolean;
   projectExists?: boolean;
   force?: boolean;
   projectName?: string;
@@ -18,7 +18,7 @@ interface Context {
   ready?: boolean;
 }
 
-const getStep = ({ projectName, projectExists: exists, template, force, ready }: Context) => {
+const getStep = ({ projectName, projectExists: exists, template, force, ready, skipInstall }: Context) => {
   switch (true) {
     case !projectName:
       return {
@@ -35,16 +35,21 @@ const getStep = ({ projectName, projectExists: exists, template, force, ready }:
         key: 'template',
         Component: Template,
       };
-    case !ready:
+    case !ready && !skipInstall:
       return {
         key: 'install',
         Component: Install,
       };
-    default:
+    case ready:
       return {
         key: 'final',
         Component: Finalize,
       };
+    default:
+      return {
+        key: 'empty',
+        Component: () => <></>,
+      };
   }
 };
 
@@ -70,7 +75,12 @@ const App: FC<{ context: Context }> = ({ context }) => {
 
     if (state.projectName && (state.projectExists === false || state.force) && state.template) {
       if (state.force) emptyDir(state.projectName);
-      prepareTemplate(context.use, state.template, state.projectName).then(() => {
+      prepareTemplate({
+        use: context.use,
+        templateName: state.template,
+        projectName: state.projectName,
+        skipInstall: state.skipInstall,
+      }).then(() => {
         if (isSubscribed) {
           setState((v) => {
             const newState = { ...v, ready: true };
diff --git a/packages/create-astro/src/components/Confirm.tsx b/packages/create-astro/src/components/Confirm.tsx
index 84d83ed8f..6f755ee61 100644
--- a/packages/create-astro/src/components/Confirm.tsx
+++ b/packages/create-astro/src/components/Confirm.tsx
@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
-import { Box, Text, useInput, useApp } from 'ink';
+import { Box, Text, useApp } from 'ink';
+import { relative } from 'path';
 import Spacer from './Spacer';
 import Select from './Select';
 
@@ -18,7 +19,7 @@ const Confirm: FC<{ message?: any; context: any; onSubmit: (value: boolean) => v
             <Text color="#FFBE2D">{'[uh-oh]'}</Text>
             <Text>
               {' '}
-              It appears <Text color="#17C083">./{projectName}</Text> is not empty. Overwrite?
+              It appears <Text color="#17C083">./{relative(process.cwd(), projectName)}</Text> is not empty. Overwrite?
             </Text>
           </>
         ) : (
diff --git a/packages/create-astro/src/components/Finalize.tsx b/packages/create-astro/src/components/Finalize.tsx
index 933a8844e..c7aeaad36 100644
--- a/packages/create-astro/src/components/Finalize.tsx
+++ b/packages/create-astro/src/components/Finalize.tsx
@@ -1,5 +1,6 @@
 import React, { FC, useEffect } from 'react';
 import { Box, Text } from 'ink';
+import { relative } from 'path';
 import { cancelProcessListeners } from '../utils';
 
 const Finalize: FC<{ context: any }> = ({ context: { use, projectName } }) => {
@@ -8,20 +9,22 @@ const Finalize: FC<{ context: any }> = ({ context: { use, projectName } }) => {
     process.exit(0);
   }, []);
 
+  const projectPath = `./${relative(process.cwd(), projectName)}`;
+
   return (
     <>
       <Box display="flex">
         <Text color="#17C083">{'[ yes ]'}</Text>
         <Text>
           {' '}
-          Project initialized at <Text color="#3894FF">./{projectName}</Text>
+          Project initialized at <Text color="#3894FF">{projectPath}</Text>
         </Text>
       </Box>
       <Box display="flex" marginY={1}>
         <Text dimColor>{'[ tip ]'}</Text>
         <Box display="flex" marginLeft={1} flexDirection="column">
           <Text>Get started by running</Text>
-          <Text color="#3894FF">cd ./{projectName}</Text>
+          <Text color="#3894FF">cd {projectPath}</Text>
           <Text color="#3894FF">{use} start</Text>
         </Box>
       </Box>
diff --git a/packages/create-astro/src/components/Help.tsx b/packages/create-astro/src/components/Help.tsx
index 5991664f1..ebbc0aa3c 100644
--- a/packages/create-astro/src/components/Help.tsx
+++ b/packages/create-astro/src/components/Help.tsx
@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import { Box, Text } from 'ink';
+import decamelize from 'decamelize';
 import { ARGS, ARG } from '../config';
 
 const Type: FC<{ type: any; enum?: string[] }> = ({ type, enum: e }) => {
@@ -71,7 +72,7 @@ const Help: FC<{ context: any }> = ({ context: { templates } }) => {
       </Box>
       <Box marginBottom={1} marginLeft={2} display="flex" flexDirection="column">
         {Object.entries(ARGS).map(([name, info]) => (
-          <Command key={name} name={name} info={name === 'template' ? { ...info, enum: templates.map(({ value }) => value) } : info} />
+          <Command key={name} name={decamelize(name, { separator: '-' })} info={name === 'template' ? { ...info, enum: templates.map(({ value }) => value) } : info} />
         ))}
       </Box>
     </>